Showing posts with label blogger widgets. Show all posts
Showing posts with label blogger widgets. Show all posts

Thursday 8 August 2013

Blogger Tricks: add social buttons to increase your traffic

// siddhu vydyabhushana // Leave a Comment
If you have a blog, the most simple way to increase your traffic is using Social Networks.

Every time you add a new post on your blog, I suggest you to take some minuts to promote it on sites like Digg, Technorati, Reddit, StumbleUpon ad delicious to increase quickly your traffic.



Take a look at the following list of links to add your preferred buttons on your Blogger template:

Add Digg vote button on Blogger Template (update)
Add Yahoo! Buzz button on Blogger Template
Add Technorati blog reaction on your Blogger Template
Add Reddit button with counter in your Blogger Template
Add StumbleUpon button in your Blogger posts
Add delicious button with counter in your blogger posts
Add Mixx button on Blogger template
Add DZone button on Blogger template
Add Design Float button on Blogger template

They can help you to attract new readers and increase popularity of your blog.
Read More

Monday 25 March 2013

Blogger Widget:How to add floating social media (Google +1, Facebook, Twitter, Digg, Stumbleupon) buttons on blogger

// siddhu vydyabhushana // Leave a Comment

Why do we need these social media Facebook, Twitter, Google +1, Digg, StumbleUpon buttons? Social media is a great way to drive more traffic to your sites. Get these buttons means that you will have a better chance to make your site become popular. In this tutorial I will show you the way to add floating these buttons to your blogger. All you need to do is following these simple steps:


1. Go to Dashboard>Design>Edit HTML and search for <head> 
2. Paste this code just below it and save your template. Note: Google +1 button only works when you disable default share buttons in "Blog Posts" widget

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

3. Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript

4. Paste this code inside it

<style>#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>

<div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div>

<div class='floatbutton' id='stumbleupon'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div>

<div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>

<div class="addbuttons"><a href="http://www.blogtipsntricks.com/2011/07/how-to-add-floating-social-media-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div>

5. Save your widget, refresh your blog. Now you can see the widget.
Read More

Saturday 23 March 2013

Blogger Widget: Onetime Popup Feedburner Subscription Widget for Blogger

// siddhu vydyabhushana // Leave a Comment

Your Blogger blog needs an email subscription widget on it to perform well because your regular visitors, who love your content, would never want to miss your latest posts and you can make their task easy by allowing them to subscribe your blog through email subscription. By doing this, you make it sure that your visitors can visit you constantly. Feedburner is a great service by Google which delivers your content to your subscribers effectively. Onetime Popup Feedburner Email Subscription Widget will make your dream true to add a stylish and effective popup email subscription box to your Blogger blog. As the popup is onetime, so it guarantees that your visitors will never experience it irritating. It will appear once and never popup again for the same visitor from the same computer. Onetime Popup Email Subscription widget sets a cookie in the targeted visitor and once it has appeared for the visitor, later on it recognizes the visit and don't bother to popup again. So your subscribers number will effectively increase and as a result, your traffic will keep growing day by day. Additionally, your regular visitors will stay in touch with your blog whenever you will post something new.

How to Add Onetime Popup Email Subscription Box to Blogger

1. Login to your Blogger dashboard, choose your blog and go to its layout
2. Add a new HTML/JavaScript gadget with the below code
<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:80%; height:80%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:80%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:80%; height:80%; display:block; border:0;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7QaADx-E97YoxEYMI9fvh9Ddr4KPhYmI5-vTuAso9JbOSxh3B3MzNDh5AFJB-Nk2mCc7wKR-5PaVTwnnbn7oXY2sihlZhGZtI8yKU326RJFgrDbgyY6cElUW9VFPgzj1-vXEkycoOp4s/h120/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7QaADx-E97YoxEYMI9fvh9Ddr4KPhYmI5-vTuAso9JbOSxh3B3MzNDh5AFJB-Nk2mCc7wKR-5PaVTwnnbn7oXY2sihlZhGZtI8yKU326RJFgrDbgyY6cElUW9VFPgzj1-vXEkycoOp4s/h120/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTsv9Crk9CZSos7bIUj0tZGEYfk9k60WbtoerKtab_JP5vUKoTcMD-OMU9qsj3Nygkq2-ZuAwVxwh3kCn0-LwihSFaUMhWTDcN3_PuXmYODDEz-UPxLaCeN5SUXVP3qpuy_bCF26mwt8/h120/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT63sse8t8521FJNQRMa6YZufeGn6Cq0zXB71DK_tSMStQ7c9fKFkcfzHvvXvH5BtzIL9yYp5fJvwQnMdObd8vkLnge4KBYo6RYKfHqmPOfKvvNN52J55dGOM3ZunbDaUco9mty8mUHizI/h120/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:80%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraxteu0RVEjkg2FPu_ZDwQWMkpFrA47wQa2yvVGzf-h-veqECCHo8s-J5CEyIBswsT1jZ7BAH-ixkmSmh-4rVeynlwT8SjR48jc7WLX-LhaChq0qlRpjtYipfp9CoNT6ltl4z39NyRlbL/h120/controls.pngno-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://supportivehandsjs.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center>
<div id="ig-subscription-optin" style="border: 0x solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 310px;">
<h3 id="truebloggertricks-title-text" style="color: white; font-size: 20px;">
GET FREE EMAIL UPDATES</h3>
<div id="truebloggertricks-sub-title-txt" style="color: white; font-size: 14px;">
Join us for free and get valuable content delivered right in your inbox.</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=aitamE-learning', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="truebloggertricks_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter First Name" /><br />
<input class="email" id="truebloggertricks_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="aitamE-learning" /><input name="loc" type="hidden" value="en_US" /> <input id="truebloggertricks_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
</div>
</center></div>

<style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnSsqjinAEDbs-cKbEyJQH8BAAClDOX5PaHrAcAFe5KgJXrTXw62mscVrtgCTZ4X1dh64WLzdorCHbONOciZW6cpa8rMiZ2mKwTL2qSxxVL5HvFTC3zaOoehXYz9RWIFxtVL-UgG8GTQz_/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqlZUa9ssQIH95bbzzo0LweflPtLSfyX9ikgCF3KYx_5smdGgU36r1nPyqDKkYDTtawAPpx0J3gMcnFyUFN696E2OODboboEKW0ABgwNXMh8rkWYkGZP65hBu5D4o9LLDK54e_3EkIexW/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFUMCx6PljT0bHzF88PdJi3RkxcHwFjSW6Bka7Rrn-jxurTN98m463SCXdIVjDYOLGne49emMvRp-h0pJrdDaRqqfNilOqbonGhe3Vkeo9ai9a0jpM3coGSwjBJgvdovXo98IoEPyEh6jP/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style>

</div>
2. Replace blue highlighted value with your Feedburner ID and save the gadget. You are all done!!!

If the Email Subscription Box doesn't popup, then it might be possible that you have Ajax JQuery script in your template already. To fix it, remove the red highlighted line from above code.

Read More

Blogger Wdgets:Related Posts Widget For Blogger / Blogspot with jQuery

// siddhu vydyabhushana // 2 comments
Related posts widget is very important for a blog, because it increases the number of page views and also help the visitor to view other posts related to blog. Now here is wonderful trick to display links to related posts beneath each posts. At their blogs today there are many types of related post widget, and related items thumbnail images using HTML, Java script, etc. .. Here I will show a method that is easy to show install.It only title jQuery.It related post widget will look like a picture below.

How To Add Related Posts Widget For Blogger



I have seen few who are showing the Related Posts Widget of posts below their posts. It’s also a good script placement which can increase your pageviews.

To add the code , just follow the above instructions.


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.


Now find (CTRL+F) this code in the template:

</head>


And immediately before it, paste this code:


<!--Related Posts Scripts and Styles www.bdlab.blogspot.com Start-->

<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><styletype="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts .widget{

padding-left:6px;

margin-bottom:10px;



}

#related-posts .widget h2, #related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:blue;

}

#related-posts a:hover{

color:blue;

}

#related-posts ul{

list-style-type:none;

margin:0 0 0px 0;

padding:0px;

text-decoration:bold;

font-size:15px;

text-color:#000000

}

#related-posts ul li{

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_yaq-g2EWXzHbvWBtUhibhF70CRTbi0YCyjsLdhLwBImbd6AWNw4WM8EKiDgrjvVjOy3XdlAuE9BXfAly1G8ABrkuTFkwNvD5LvxMUU0klrAzPDhWhVSD_wCDZejCCTkk74FNkuHGvM/s200/greentickbullet.png) no-repeat ;

display:block;

list-style-type:none;

margin-bottom: 13px;

padding-left: 30px;

padding-top:0px;}

</style>



<script type='text/javascript'>

var relatedpoststitle="Related Posts";

</script>

<script src='http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-for-blogger-24work.js' type='text/javascript'/>



<!--Remove--></b:if>

<!--Related Posts Scripts and Styles www.bdlab.blogspot.com End-->




If you want to change the title of your widget you can edit this line of the above code



var relatedpoststitle="Related Posts";


If you want you can edit the blue and black colors present in this code



2.Now find this line of code


<div class='post-footer-line post-footer-line-1'/>


If you cant find it then try finding this one


<p class='post-footer-line post-footer-line-1'/>


Now immediately after any of these lines(whichever you could find) place this code snippet



<!-- Related Posts Code www.bdlab.blogspot.com Start-->

<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;'type='text/javascript'/></b:if></b:loop><ahref='http://24work.blogspot.com'><img style="border: 0" alt="Related Posts Widget for Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg69GDvxOYSqLhd0euNKU9LiwbuJT00wj78REPRKRTQ9ULBuvbsF1dIjcQOoK9zAwJgOXrA8WFrLkx9V4seUNWoyp_JUWiPu87soaBGgRfrPsynZKt6IlrLUWF36baq0rtyp2AydCHLrGYE/s1600/blogger-widgets.png" /></a>


<script type='text/javascript'>

var maxresults=5;

removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);

</script>

</div>



<!--Remove--></b:if>

<!-- Related Posts Code www.bdlab.blogspot.com End-->


And now click Save Template 





You can adjust the maximum number of related posts being displayed by editing this line in the code.


var maxresults=5;



Note: If you want to display the Related Posts on every page, then remove the lines of code starting with <!--Remove-->


Read More

Blogger Widget: AJAX Navigation Menu Widget for Blogger

// siddhu vydyabhushana // Leave a Comment

After so long time almost two months, i am here with awesome new blogger widget. It is very hard to manage the works and blogs simultaneously. But still love to give the new blogger widgets and tips.
AJAX Navigation menu for blogger is very new widget created by Me in Blogger platform that uses Blogger JSON feed API and AJAX. This navigation menu is inspired from Mashable.com old site. I coded this widget some months ago, but there is no time for publishing this article. And now i recoded and improved this widget and added customizable features.

HOW IT WORKS ?

Well, this widget is works based on jQuery library and Blogger JSON feed API. Your blog must be for Public visitors. other wise the Blogger JSON Feed API won’t works.
The menu is works just like normal drop-down menu when javascript is disabled, And it will turns to AJAX powered drop-down menu when javascript is enabled.

HOW TO INSTALL THIS WIDGET?

  1. Go to Blogger Dashboard > Select the Blog > Go to Template page of the Blog
  2. Click Edit HTML button

THE CSS

Add the Following CSS Code before ]]></b:skin>
/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

THE JAVASCRIPT

If your Blog has jQuery plugin, then don’t add this plugin in your blog template,
Otherwise add the below line of code before  </head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Add the following Javascript code before  </head> tag
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#w2bajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
});
});
</script>

THE HTML

In this section you should be carefully add the HTML, otherwise it won’t works.
The AJAX Menu accepts three types of urls. You must use this urls only in the menu. They are Label,Search Query and Label w/ Search Query.
Label URLhttp://yourblogdomain.blogspot.com/search/label/LABELNAME
Search Queryhttp://yourblogdomain.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Queryhttp://yourblogdomain.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY
Note:- Search Query must be Url encoded. You can use this tool to encode your search query.
Use this MENU Example code and add it in HTML/JavaScript gadget.
<ul id="w2bajaxmenu" class="w2bmenu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Example 1</a>
<ul>
<li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a>
</ul>
</li>
<li>
<a href="#">Example 2</a>
<ul>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Facebook?q=Like+Button">Facebook</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li>
</ul>
</li>
<li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li>
</ul>
Read More