Rankwash

Awesome Slide Open Heart Bookmarking Gadget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
 
<div class="clear" style="-webkit-text-stroke-width: 0px; background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<div class="right" style="-webkit-text-stroke-width: 0px; background-color: #f9f9f9; color: #333333; float: right; font-family: 'Istok Web', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 5px 0px 10px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div addthis:title=""+title+"" addthis:url=""+encodeURI(url)+"" class="addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" href="" style="border: none; color: #0088b2; height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; width: 80px;"></a><a class="addthis_button_tweet" href="" style="border: none; color: #0088b2; height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; width: 85px;"></a><a class="addthis_button_google_plusone" g:plusone:size="medium" href="" style="border: none; color: #0088b2; height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; width: 65px;"></a><a class="addthis_button_pinterest_pinit" href="" style="border: none; color: #0088b2; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;"></a><a class="addthis_counter addthis_pill_style" href="" style="border: none; color: #0088b2; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;"></a></div>
</div>
 
<div class="post-body" style="-webkit-text-stroke-width: 0px; background-color: #f9f9f9; border-top-color: rgb(193, 193, 193); border-top-style: dotted; border-top-width: 1px; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; padding-top: 10px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
This widget released by Sharethis team was made as a Valentine gift from them. The heart bookmarking gadget has a cool slide out effect that makes the heart icon split each time you mouse hover it, displaying several bookmarking buttons like Facebook, Twitter, Pinterest, LinkedIn, Stumble Upon, Email and many more bookmarking choices. This gadget/widget comes with a fixed position and stays in the corner of the page, so it will grab your readers attention and make them share your posts easily. I'm sure you will love it after seeing the demo of this gadget: <div class="separator" style="clear: both; text-align: center;">
<a href="http://helplogger.googlecode.com/svn/trunk/html/Open%20Heart%20Bookmarking%20Gadget.html" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgybuAz3YBSSXUN8Dst7KXq7cvvvc7YUz-UJNWE2bi525oElQmZqLXREd6DYtqho0Yk1YJQ9z14rOKSg3uYSrvucETyt_Ops2dcDgu0yJ-Z6DPDeYC-yYx8NilR30FG61oB4z356ePQCFol/s1600/blogger-share-slide-out-heart-bookmarking-gadget-blogger-widgets.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px; text-decoration: none;" /></a></div>
 <div style="text-align: center;">
<a href="http://helplogger.googlecode.com/svn/trunk/html/Open%20Heart%20Bookmarking%20Gadget.html" style="border: none; color: #0088b2; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">View Demo</a> </div>
Adding The Open Heart Bookmarking Gadget to Blogger Step 1. Go to your <a href="http://www.blogger.com/home" style="border: none; color: #0088b2; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Blogger Dashboard</a>, select Template and click the Edit Html button: <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmqSXZF37d2FenaBDosSmO6MKWhPp6ZNjnTMHNzYQBdsxKTzbivYjyy2rQK-VtYXnC_GyrKwtn1V0uxbm2W71P0bs0N6CdADiufemXbobcxsRFeeR2e64UY4PwWo5ziPW5n9WW7H06lr4p/s1600/remove-blogger-labels.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmqSXZF37d2FenaBDosSmO6MKWhPp6ZNjnTMHNzYQBdsxKTzbivYjyy2rQK-VtYXnC_GyrKwtn1V0uxbm2W71P0bs0N6CdADiufemXbobcxsRFeeR2e64UY4PwWo5ziPW5n9WW7H06lr4p/s1600/remove-blogger-labels.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px; text-decoration: none;" width="320" /></a></div>
  ....select the "Expand Widget Templates" box (it is recommended to make a backup first) <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8-e9xknTf-ysAF8STUiYwX0A4pzAEGfwezerkED9Mng71L2IJdDbyWs2VPaLKw8OTcRc0lBzQ2Vwk6urcCncz76NL5b79M5izn9JcfefiY8mgoL9uSsACRvqWpipL94-EiHIitYuin2mf/s1600/blogger-expand-widget-templates.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8-e9xknTf-ysAF8STUiYwX0A4pzAEGfwezerkED9Mng71L2IJdDbyWs2VPaLKw8OTcRc0lBzQ2Vwk6urcCncz76NL5b79M5izn9JcfefiY8mgoL9uSsACRvqWpipL94-EiHIitYuin2mf/s1600/blogger-expand-widget-templates.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px; text-decoration: none;" width="320" /></a></div>
 Step 2. Find the following tag (Ctrl + F): <blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: “, ”, ‘, ’; word-wrap: break-word;">
 </head></blockquote>
<div>
 Step 3. Paste above/before the </head> tag, the following code:</div>
<div>
 </div>
<div>
<div>
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: “, ”, ‘, ’; word-wrap: break-word;">
  <script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> <script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script> <link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/> </blockquote>
</div>
</div>
 <div>
Step 4: Now find (CTRL + F) this tag: </div>
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: “, ”, ‘, ’; word-wrap: break-word;">
 </body></blockquote>
<div>
 Step 5: Paste above/before </body> tag... the following code: </div>
<div>
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: “, ”, ‘, ’; word-wrap: break-word;">
  <div style='position: fixed; bottom: 2%; left: 2%;'> <div class='shareEgg' id='shareThisShareHeart'/> </div> <script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://www.helplogger.blogspot.com/">Blogger Gadgets</a> </blockquote>
</div>
 How To Move The Position Of The Gadget To move the position of this widget from the bottom right corner of your blog to any location you want, change the percentages of the red code from Step 5. Step 6. Now preview and Save Template. Done!</div>
</div>

Awesome Slide Open Heart Bookmarking Gadget For Blogger

This widget released by Sharethis team was made as a Valentine gift from them. The heart bookmarking gadget has a cool slide out e...

How to add Facebook Like/Fan Box to Blogger

0 BLOGGER-WIDGETS

<div dir="ltr" style="text-align: left;" trbidi="on">
A <span class="IL_AD" id="IL_AD3" style="background-attachment: scroll !important; background-color: #f9f9f9; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">Facebook Fan Box or Like Box is a great plugin that allows blog visitors to subscribe to your blog updates via their Facebook accounts, without leaving your blog. After subscribing (by pressing like button), visitors will receive your most recent blog updates on their Facebook page. This box also displays faces of the "likers" on your blog. Before creating a fan box you should already have a facebook fan page. If you haven't yet created, click here to learn <a href="http://helplogger.blogspot.com/2012/03/how-to-create-facebook-fan-page-for.html" style="background-color: #f9f9f9; border: none; color: #0088b2; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">How to Create a Facebook Fan Page</a>. 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1iv3yuebyWPnO13Yn0Jo5KH9sZlWwgTRmamYFtJWQ_FKf7VRJcJU47A_89HFqeqAZX3jdwCBQ9cpgVqPLWwuuhFifEq7NcC-pTBud9bJia6XDr7j5a-GnhoimP2dVwLDmWJ7s6JEo8haY/s1600/add+a+facebook+like+box+to+your+blogger+blog.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1iv3yuebyWPnO13Yn0Jo5KH9sZlWwgTRmamYFtJWQ_FKf7VRJcJU47A_89HFqeqAZX3jdwCBQ9cpgVqPLWwuuhFifEq7NcC-pTBud9bJia6XDr7j5a-GnhoimP2dVwLDmWJ7s6JEo8haY/s200/add+a+facebook+like+box+to+your+blogger+blog.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" width="180" /></a></div>
 <span class="IL_AD" id="IL_AD1" style="background-attachment: scroll !important; background-color: transparent !important; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; font-size: 18px !important; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">Add Facebook Like Box to Blogger 1. Find out your <span class="IL_AD" id="IL_AD2" style="background-attachment: scroll !important; background-color: #f9f9f9; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">Facebook fan page URL by visiting your Facebook fan page and copy the url in the address bar, you can see how your url should look like in my screenshot: 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1Iqt_eriHUpQW1WjssSn0s_daGvx66MLrRFLCfaTH4LnVCzBTX2DNX9g3oke-1EsyaxCvt23NwSOODEGUQm5J6nKSvdG167X5vwnpHYlvZD7Wdxh5fO3rgR5WWtUDQR7qEFtD51xq2AU/s1600/how+to+create+a+facebook+fan+like+box+for+blogger+blogspot.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img border="0" height="121" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1Iqt_eriHUpQW1WjssSn0s_daGvx66MLrRFLCfaTH4LnVCzBTX2DNX9g3oke-1EsyaxCvt23NwSOODEGUQm5J6nKSvdG167X5vwnpHYlvZD7Wdxh5fO3rgR5WWtUDQR7qEFtD51xq2AU/s320/how+to+create+a+facebook+fan+like+box+for+blogger+blogspot.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" width="320" /></a></div>
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
</div>
 2. Then visit this page: <a href="http://developers.facebook.com/docs/reference/plugins/like-box" style="background-color: #f9f9f9; border: none; color: #0088b2; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">http://developers.facebook.com/docs/reference/plugins/like-box</a> 3. Paste your url into the Facebook Page URL field as it is shown below: 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivNCCeQiznxYpuYMBaz3sGcZt7eGIhQfu4vIHGUY13fZ4RzZvIw0-WBPYPI0Cc0-BNnPK-9Hzt6gdOkSw_Lp5IYO8Toa3qRQZFFezau2tOfqtuKrNj6XKz8Mk6hjr67fUWWNtDp66Ei2Oh/s1600/how+to+create+a+facebook+like+box+for+blogger.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivNCCeQiznxYpuYMBaz3sGcZt7eGIhQfu4vIHGUY13fZ4RzZvIw0-WBPYPI0Cc0-BNnPK-9Hzt6gdOkSw_Lp5IYO8Toa3qRQZFFezau2tOfqtuKrNj6XKz8Mk6hjr67fUWWNtDp66Ei2Oh/s400/how+to+create+a+facebook+like+box+for+blogger.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" width="215" /></a></div>
 4. Once you are satisfied with the looks of the Like Box, click on the "Get Code" button 5. You'll be given two codes, titled HTML 5, XFBML and IFRAME. You only need the iframe code.  Select it and copy the code generated for your box as it is shown in the example below: 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0EWzO5FtILVu5Zj8qbepLRsNcsLPXQWgime9fCvhabri8pJR4BBDX7i1-zOpoCA2KHGDJGsJ8jfeBvw32T4JjhEy-5XwL6VSCn_YNPW86eknXdchaqW0k-lXqE-GG9zkSSRKNFZDd4Ook/s1600/code+for+facebook+fan+box.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0EWzO5FtILVu5Zj8qbepLRsNcsLPXQWgime9fCvhabri8pJR4BBDX7i1-zOpoCA2KHGDJGsJ8jfeBvw32T4JjhEy-5XwL6VSCn_YNPW86eknXdchaqW0k-lXqE-GG9zkSSRKNFZDd4Ook/s320/code+for+facebook+fan+box.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" width="320" /></a></div>
 6. Then go to your <a href="http://www.blogger.com/home" style="background-color: #f9f9f9; border: none; color: #0088b2; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Blogger Dashboard</a> > Layout > click on the Add a Gadget link 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0VdWVSny7GszaWbwjfUg-tIgK0y12-CDhjQeQL-d6SwHxQ6xXD2YxxtOV7ZQyuOJLkZPRk4rKCY1oV1NmanJR7Y1_BZf0CIU5jW_IebZfe6X5RWgZEPVYcMQk88h-d3Ka7QEm0u8-xPy/s1600/blogger-layout-add+a+gadget-how-to.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0VdWVSny7GszaWbwjfUg-tIgK0y12-CDhjQeQL-d6SwHxQ6xXD2YxxtOV7ZQyuOJLkZPRk4rKCY1oV1NmanJR7Y1_BZf0CIU5jW_IebZfe6X5RWgZEPVYcMQk88h-d3Ka7QEm0u8-xPy/s1600/blogger-layout-add+a+gadget-how-to.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" width="400" /></a></div>
  7. From the pop-up window, scroll down and select HTML/JavaScript  
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9opozceR2k28Ur6yqpMrdO-IQsI-9_Dv0envDoEwCmiBb5EuiArq1Ph2_aprlfCqyGs16ZnOeeyHaIyJMt5VY2001DZLiSsA0aL3v5oyJSyWREahSGhvT7rv0bgEACwbbMlo1ZO5Af19u/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9opozceR2k28Ur6yqpMrdO-IQsI-9_Dv0envDoEwCmiBb5EuiArq1Ph2_aprlfCqyGs16ZnOeeyHaIyJMt5VY2001DZLiSsA0aL3v5oyJSyWREahSGhvT7rv0bgEACwbbMlo1ZO5Af19u/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" width="320" /></a></div>
 8. Paste the code in the empty HTML box. 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdnhJ3KTTsmraTtDq2dbtwT2rHTekA_gxDTEkL7ITNVKaghZjBgVHgTexyq3n3tJSilSWSueD19XZUa_FQ-rBPareUdvQ1dm0odIZLSL6gk38KwU2UY1mOFAUV_kxhkin5vGGGOSP9ZX55/s1600/add+a+facebook+fan+like+box+gadget+for+blogger.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img border="0" height="289" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdnhJ3KTTsmraTtDq2dbtwT2rHTekA_gxDTEkL7ITNVKaghZjBgVHgTexyq3n3tJSilSWSueD19XZUa_FQ-rBPareUdvQ1dm0odIZLSL6gk38KwU2UY1mOFAUV_kxhkin5vGGGOSP9ZX55/s320/add+a+facebook+fan+like+box+gadget+for+blogger.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" width="320" /></a></div>
 9. Click Save and you're done.</div>

How to add Facebook Like/Fan Box to Blogger

A Facebook Fan Box or Like Box is a great plugin that allows blog visitors to subscribe to your blog updates via their Facebook accounts,...

Add Facebook Like Button Below Post Titles

0 BLOGGER-WIDGETS

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF_251xouyg6ixQEyZXIkEorgLli9dy1WkyLUqjOxlaAcBsXvB8BEStluuS-xk-o5feLKftFsjh4kI_UeX7KOp7ifNEZ1W-wj1gyPtLmfM59uz90vTjRjQ77ZJDcwTRS52x_7Lkl43dwJt/s1600/how+to+add+facebook+like+button+for+blogger+just+under+below+blogger+blogspot+titles.jpg" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img alt="facebook like button, blogger tricks" border="0" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF_251xouyg6ixQEyZXIkEorgLli9dy1WkyLUqjOxlaAcBsXvB8BEStluuS-xk-o5feLKftFsjh4kI_UeX7KOp7ifNEZ1W-wj1gyPtLmfM59uz90vTjRjQ77ZJDcwTRS52x_7Lkl43dwJt/s200/how+to+add+facebook+like+button+for+blogger+just+under+below+blogger+blogspot+titles.jpg" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" title="How to Add Facebook Like Button Below Post Title in Blogger" width="200" /></a></div>
 This <span class="IL_AD" id="IL_AD2" style="background-attachment: scroll !important; background-color: #f9f9f9; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">Facebook Like button allow users to Like your post and share it to their Facebook friends. If you want to add the Facebook Like Button below your blogger post title, then follow these steps: 
<h2 style="background-color: #f9f9f9; border: none; color: #555555; font-family: 'Istok Web', sans-serif; font-size: large; list-style: none; margin: 0px; outline: none; padding: 0px 0px 10px;">
Adding Facebook Like Button Below Post Titles</h2>
Step 1. Go To <a href="https://www.blogger.com/home" style="background-color: #f9f9f9; border: none; color: #0088b2; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Blogger Dashboard</a> > Template > Edit HTML (click on Proceed if needed) 
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
Screenshot </div>
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy26sEdT9XTNfx5-kTPCPkD3cUYsfaQtHsrxsJ-SDIKRTzynlpD49fN42f0hcUGovWdhFTPdT0hShwVL1H3tYLCzf7XQlzZvFqFbOV4tPVu_Cw3CCNjA7l3wHlmriqupH7QhWmxqayx_Yh/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img alt="facebook for blogger, facebook button" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy26sEdT9XTNfx5-kTPCPkD3cUYsfaQtHsrxsJ-SDIKRTzynlpD49fN42f0hcUGovWdhFTPdT0hShwVL1H3tYLCzf7XQlzZvFqFbOV4tPVu_Cw3CCNjA7l3wHlmriqupH7QhWmxqayx_Yh/s320/blogger_blogspot_template_edit_html_tutorial.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" title="facebook like button below blogger post titles" width="320" /></a></div>
 Step 2. Click anywhere inside the code area and search - using CTRL + F keys - for this piece of code: 
<blockquote style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
 <data:post.body/></blockquote>
Note: you might find it more than 3 times, stop to the 2nd one (or 3rd one in case it wont show up after applying the code from step 3) Step 3.  Just above it, paste this code: 
<blockquote style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
 <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/></blockquote>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
Screenshot</div>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
 </div>
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-pKSE5i92VTWTTeCElGNDpflbeBQcCd-e4iRvbn9xZQCH6LHXQnp8CEmrgNUS7EVoE0_NFsltzypLeQ_61Z5nP9sGOFNhxheHwxvZD89DRkdNh9c7My438RO1PeSaSOCcDUXGc_dZi7m/s1600/how-to-add-facebook-button-below-blogger-post-titles.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img alt="facebook button" border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-pKSE5i92VTWTTeCElGNDpflbeBQcCd-e4iRvbn9xZQCH6LHXQnp8CEmrgNUS7EVoE0_NFsltzypLeQ_61Z5nP9sGOFNhxheHwxvZD89DRkdNh9c7My438RO1PeSaSOCcDUXGc_dZi7m/s400/how-to-add-facebook-button-below-blogger-post-titles.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" title="facebook like button for blogger" width="400" /></a></div>
 Step 4.  Save your template and you are done! For any questions you may have, please leave a comment below!</div>

Add Facebook Like Button Below Post Titles

This Facebook Like button allow users to Like your post and share it to their Facebook friends. If you want to add the Facebook Like B...

How To Add Related Posts Widget To Blogger with Thumbnails

0 BLOGGER-WIDGETS

<div dir="ltr" style="text-align: left;" trbidi="on">
Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest. 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
</div>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<div style="text-align: -webkit-auto;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSiXvKCG_FjA1oD7JQjdEygIfGxum8NXCXWaSBuuY6FIM_ziYfJ7WOzwOpfc7UqHwK2fKbqsBD7MLVw4DKMwcbT7mYSj5ocYZf73X0va6maZiNgiYKsySVrZP5c2daCsrJKiZNj_uA2fOK/s1600/related-posts-blogger.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img alt="related post, related posts blogger, blogger widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSiXvKCG_FjA1oD7JQjdEygIfGxum8NXCXWaSBuuY6FIM_ziYfJ7WOzwOpfc7UqHwK2fKbqsBD7MLVw4DKMwcbT7mYSj5ocYZf73X0va6maZiNgiYKsySVrZP5c2daCsrJKiZNj_uA2fOK/s1600/related-posts-blogger.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" title="Related Posts Widget For Blogger" /></a></div>
</div>
</div>
Steps adding the Related Posts Widget to Blogger/Blogspot Step 1. Go To <a href="http://www.blogger.com/home" style="border: none; color: #0b5394; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Blogger Dashboard</a> >> Template >>Edit HTML 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy26sEdT9XTNfx5-kTPCPkD3cUYsfaQtHsrxsJ-SDIKRTzynlpD49fN42f0hcUGovWdhFTPdT0hShwVL1H3tYLCzf7XQlzZvFqFbOV4tPVu_Cw3CCNjA7l3wHlmriqupH7QhWmxqayx_Yh/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img alt="blogger template, edit html" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy26sEdT9XTNfx5-kTPCPkD3cUYsfaQtHsrxsJ-SDIKRTzynlpD49fN42f0hcUGovWdhFTPdT0hShwVL1H3tYLCzf7XQlzZvFqFbOV4tPVu_Cw3CCNjA7l3wHlmriqupH7QhWmxqayx_Yh/s320/blogger_blogspot_template_edit_html_tutorial.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" title="how to add related posts widget to blogger with thumbnails" width="320" /></a></div>
 Step 2. Click anywhere inside the template's code and press the CTRL + F keys Step 3. Search for this piece of code by typing it inside the search box: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
 </head></blockquote>
Step 4. Copy and paste the below code just before/above </head> 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
  <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' /> </b:if> </blockquote>
Note: - to change the width and height of thumbnails, modify the 100px value in red - to change the color and size of related posts titles, change the value in blue - remove the line in violet if you want the related posts to be displayed in homepage too  Step 5. Now find the following code (you might find it twice, stop at the second one): 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
 <div class='post-footer'></blockquote>
Step 6. And just above it, copy and paste the below code: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
  <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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;Related Posts:&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjiBAAyDqcuTWYKyYV8EBfeUvT9l6uNQyL7apwLWEI1nWo5fotgS04vN3tUViv0ny5m64iaa6vBh3zevlHKgIw-H7Eugo-bBq2TsEfcJHhXj35gCuKBfcfBJK-WnhG_c67KK2xMTW1bDyS/s1600/best+blogger+tips.png'/></a> </b:if></b:if></blockquote>
Note: - change the 5 value from max-results=5 with the number of posts you want to be displayed - if you want the related posts to be displayed on homepage too, then remove the lines in violet Step 7. Save the Template Enjoy :)</div>

How To Add Related Posts Widget To Blogger with Thumbnails

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are ...

A Simple Related Posts Widget For Blogger

0 BLOGGER-WIDGETS

<div dir="ltr" style="text-align: left;" trbidi="on">
In the last tutorial, i've been talking about the<a href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" style="background-color: #f9f9f9; border: none; color: #0088b2; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;"> Related Posts widget</a> that shows related posts along with thumbnails just at the end of your blog articles. Some of <span class="IL_AD" id="IL_AD3" style="background-attachment: scroll !important; background-color: #f9f9f9; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So let's begin adding it! 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
</div>
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv_Z7ycWkKNrJX-LV2T4qwgI2Q76-TRnjo5d8RlnNypNf9RDUvV0i_H7EeW6qSEUliu8B6KRrqv-4vY2Ia8uYb7VIzCNE7AcyJvLqzPbFLv2GQKAShadV8vqa9EKT6k5zzdPWULrxyR4Bn/s1600/simple-related-posts-widget-blogger.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;"><img alt="related post, related post blogger, blogger tricks" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv_Z7ycWkKNrJX-LV2T4qwgI2Q76-TRnjo5d8RlnNypNf9RDUvV0i_H7EeW6qSEUliu8B6KRrqv-4vY2Ia8uYb7VIzCNE7AcyJvLqzPbFLv2GQKAShadV8vqa9EKT6k5zzdPWULrxyR4Bn/s1600/simple-related-posts-widget-blogger.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" title="Simple Related Posts Widget For Blogger/Blogspot" /></a></div>
 How to add Related Posts Widget to Blogger Step 1. Go to Template >> Edit HTML and tick the "Expand Widget Templates" checkbox Step 2. Find the below tag 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
 </head></blockquote>
 Step 3. And just above it, paste the following code: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
  <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; margin-top: 20px; } #related-posts .widget{ padding-left:6px; margin-bottom:10px; } #related-posts .widget h2, #related-posts h2{ font-size: 17px; font-weight: normal; color: black; font-family: Arial Narrow; margin-bottom: 0.75em; padding-top: 0em; } #related-posts a{ font-size:16px; color: #555555; font-variant:small-caps; } #related-posts a:hover{ <span class="IL_AD" id="IL_AD4" style="background-attachment: scroll !important; background-color: transparent !important; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">text-decoration: none; color: #ffffff; font-weight: bold; } #related-posts ul{ list-style-type:none; margin:0 0 0px 0; padding:0px; text-decoration:none; text-color:#000000 } #related-posts ul li{ list-style-type: none; border-left: 2px solid #1399CF; border-bottom: 1px dotted #1399CF; margin-bottom: 3px; padding-left: 30px; padding-top:0px; } #related-posts ul li:hover{ background-color: #1399CF; border-left: 2px solid #B3CA3D; border-bottom: 1px dotted #B3CA3D; } </style> <<span class="IL_AD" id="IL_AD2" style="background-attachment: scroll !important; background-color: transparent !important; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">script type='text/javascript'> var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/> </b:if> </blockquote>
 Note: - if you want to change the size and color of 'Related Posts' title, change the bolded values (17 for the font size and black for the color) 
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
-to change the related post title color, replace the value in red; -to change the background color on mouseover, replace the color value in blue; Step 4. Now find (CTRL + F) the below line: <blockquote class="tr_bq" style="background-attachment: scroll; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
     <div class='post-footer'></blockquote>
 Step 5. Just above it, paste the code below: <blockquote class="tr_bq" style="background-attachment: scroll; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
   <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> <script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> </b:if> </blockquote>
 Note: In order to change the number of maximum related posts being displayed for each label, search for the code max-results=5 and change the number "5" to any desired number. <div>
 Step 6. Save Template Enjoy!!!</div>
</div>
</div>

A Simple Related Posts Widget For Blogger

In the last tutorial, i've been talking about the Related Posts widget that shows related posts along with thumbnails just at the end...

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

0 BLOGGER-WIDGETS

<div dir="ltr" style="text-align: left;" trbidi="on">
In this tutorial i will show you how to add a cool floating Facebook like widget for Blogger that slides to the left on mouseover. Demo: You can see a static facebook badge at the right side of this blog 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLT00E0zpQYhULEKsvCI-WIWEQ8uIAGoVBxIF9qYUzwcUz5D0Vq1VLmwxLsEz2XduSZbYUeSm6rPGRHK-iKFYsoqLO-9Zq88VVlMtdFkodOvDlm6t4Xqwe1O-UpgNetrTVZsOfFRMlYcZp/s1600/floating+static+facebook+like+box+widget+for+blogger+blogspot.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLT00E0zpQYhULEKsvCI-WIWEQ8uIAGoVBxIF9qYUzwcUz5D0Vq1VLmwxLsEz2XduSZbYUeSm6rPGRHK-iKFYsoqLO-9Zq88VVlMtdFkodOvDlm6t4Xqwe1O-UpgNetrTVZsOfFRMlYcZp/s1600/floating+static+facebook+like+box+widget+for+blogger+blogspot.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" /></a></div>
 Adding Static Facebook Like widget on blogger Just follow the steps:  1. <span class="IL_AD" id="IL_AD2" style="background-attachment: scroll !important; background-color: #f9f9f9; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">Log in to your Blogger <span class="IL_AD" id="IL_AD1" style="background-attachment: scroll !important; background-color: #f9f9f9; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">Dashboard, go to Design >> Edit HTML 2. Check the "Expand Widget Templates" box 3. Search (CTRL + F) for this tag: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
</head></blockquote>
 4. Add the following code just before/above </head> tag: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></blockquote>
 5. Save the Template. 6. Now go to Design >> Page Elements >> Add a new Gadget >> Choose HTML/JavaScript and in the HTML box, paste the code below: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
<style type="text/css"> /*<![CDATA[*/ #fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;} .fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBjIwS6baujZ5PkoInv06FN5kPiK7igePNARJ6oVL0NoIF3Wcj5al5LwAElroa4xN_v1kirts8RmPk_N7U7Wn9WPLJ0GZwpOq8xpvwQChN8SFukJ6UhliYjCbU-Cas-umjv_bx6ORdm3A/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;} /*]]>*/ </style> <script type="text/javascript"> /*<![CDATA[*/     (function(w2b){         w2b(document).ready(function(){             var $dur = "medium"; // Duration of Animation             w2b("#fbplikebox").css({right: -250, "top" : 100 })             w2b("#fbplikebox").hover(function () {                 w2b(this).stop().animate({                     right: 0                 }, $dur);             }, function () {                 w2b(this).stop().animate({                     right: -250                 }, $dur);             });             w2b("#fbplikebox").show();         });     })(jQuery); /*]]>*/ </script> <div id="fbplikebox" style="display:none;">     <div class="fbplbadge"></div>     <iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe> </div></blockquote>
 7. Replace YOUR-FACEBOOK-PAGE text above with the URL of your facebook fan page. Also replace the : symbol in your URL with %3A and / with %2F For example, <span class="IL_AD" id="IL_AD4" style="background-attachment: scroll !important; background-color: #f9f9f9; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">my facebook fan page is: http://www.facebook.com/pages/Helplogger/120574614736021 After replacing the characters above, your facebook fan page should look like this: http%3A%2F%2Fwww.facebook.com%2Fpages%2FHelplogger%2F120574614736021 Other settings (optional): - to change the width and height of the facebook box, change the bolded values (250) - to change the background color of the facebook fan box, replace #FFFFFF with the hex code of your color (you can <a href="http://helplogger.blogspot.com/2012/02/color-code-generator.html" style="background-color: #f9f9f9; border: none; color: #0b5394; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">choose it from here</a>) - if you want to change the color of the facebook badge (<span class="IL_AD" id="IL_AD3" style="background-attachment: scroll !important; background-color: #f9f9f9; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">facebook button) replace this code #3B5998 with your own. 8. Now you can save your widget. Enjoy!</div>

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

In this tutorial i will show you how to add a cool floating Facebook like widget for Blogger that slides to the left on mouseover. Demo: Yo...

Add a Popular Posts Gallery just above your Blogger posts

0 BLOGGER-WIDGETS

<div dir="ltr" style="text-align: left;" trbidi="on">
The most strong and <span class="IL_AD" id="IL_AD4" style="background-attachment: scroll !important; background-color: #f9f9f9; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usability and engage the user. This widget shows the most popular 10 posts on your blog just above your Blogger posts. You can see the Demo on my blog. 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<img border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBgvEN4RxgoxW0FrdaMPv75KcuVsYF5GCVweHGDdxXmH9RxKoBE_aRtkhPh1oxiVR4M3-tT_7vwx1vnnsGKcjZzjDEq6X615x3oLD6DrN1NewZ6hXKNDEfGLSqNvW67hBK4xXVYA4h3lyb/s640/popular+posts+blogger+blogspot+widget+with+jQuery+effect.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" width="640" /></div>
Let's start adding it Before adding it you should know that this widget is not fully compatible with all templates, so please make a backup before making any changes to your blogger template. Now, follow these steps: 1. <span style="background-color: white; border: none; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 1.5em; list-style: none; margin: 0px; outline: none; padding: 0px;">If you are using the old Blogger interface:  
<ul style="background-color: #f9f9f9; border: none; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;">
<li style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">Go to <span class="IL_AD" id="IL_AD1" style="background-attachment: scroll !important; background-color: transparent !important; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">Dashboard - Design - Edit HTML - (make a backup) Expand Widget Template </li>
</ul>
<span style="background-color: white; border: none; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 1.5em; list-style: none; margin: 0px; outline: none; padding: 0px;">If you are using the new Blogger interface:  
<ul style="background-color: #f9f9f9; border: none; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;">
<li style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">Go to Dashboard - Template - Edit HTML - Proceed - (make a backup) Expand Widget Template</li>
</ul>
2. Search (CTRL + F) for this piece of code: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
]]></b:skin></blockquote>
 3. Just above/before it, add the following code: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff} #gallery .belt{position:absolute;top:0;left:0;list-style-type:none} #gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmPKmpCl6W2rSSeG0vjJ_lEwAaFowo1F_KpIenYEvU5itDahyZH0ibjRlHUPVeGzvbHJzC4ZZv8BThJCGJpw_od9cOZCaDntD6Er7uTeLKoWzWR8tlQYdQRm6M8sie1hU_8nwuJYFSPnTL/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden} #gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px} #gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}</blockquote>
 Note: you can adjust the size of gallery, changing the values in red (590 and 126). 4. Now search for the following piece of code: 
<blockquote style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
</head></blockquote>
 5. Just above/before it, add this code: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ stepcarousel.setup({ galleryid: "gallery", beltclass: "belt", panelclass: "panel", autostep: {enable:true, moveby:1, pause:6000}, panelbehavior: {speed:500, wraparound:true, persist:true}, defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ51rvcC39K5tlmaIA7_r5e1QeiX0ZEiPRLL02SA_z04q5yiQAC2dK3dwZGQM3ZKNK_vJTAJg6a3iCSUXJWCeTeuo8uxbs84ip_xvsmjeJnHRXmB1IGh-oWfDQrzEsvJu7hAwd2Ev1SGqw/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_s3WROBxmqFIp-mYCUruaIaxLHDXBMTfcjPpq4nL3Y-FnnNwqXtAOlHs3nCn6KhvvIODH1WDr5zfryCaAFOid7ECVSEWBauG5w-lJiQBytegQf6T8MSKQf8o5wLjQyou2GiHmuudfuxuv/s1600/next.png", 2, 36]}, contenttype: ["external"] }) //]]> </script></blockquote>
 Next thing to do is to place the widget just above the blogger posts. 6. Search for this code: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
<b:section class='main' id='main' showaddelement='yes'></blockquote>
 ...or if you can'find it, search for this one: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
<b:section class='main' id='main' showaddelement='no'></blockquote>
 7. Just below it, add the following code: 
<blockquote class="tr_bq" style="background-attachment: scroll; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdZ2TcPHG3XqHoGwvXOgfHqv5MunlDf0rbSopVOnOWqGoUgw5qAyuXi38T-qoXjYa7jZxyN3zjOUvL0ThQIaHdLMr1M5R18rWObtCubhyphenhyphenPQMMn-LE1k5z6yfY8sAXvSEMsxvTnpfEO7Au/s1600/blockquote-bg.png); background-position: 50% 0%; background-repeat: repeat repeat; border-left-color: rgb(202, 202, 202); border-left-style: solid; border-left-width: 6px; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; word-wrap: break-word;">
<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>   <div id='gallery'>    <ul class='belt'>     <b:loop values='data:posts' var='post'>      <li class='panel'>       <b:if cond='data:showThumbnails == &quot;false&quot;'>        <b:if cond='data:showSnippets == &quot;false&quot;'>         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>        <b:else/>         <div class='item-title'>          <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>         </div>         <div class='item-snippet'>          <data:post.snippet/>         </div>        </b:if>       <b:else/>        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>         <b:if cond='data:post.thumbnail'>          <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>         <b:else/>          <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_SnpHQcKo7RNeDPCBau6HYhiQvd1u6wUbJJnDz-4H58YIr2NUFc40T3GHu_-Pfsj3Kn1r4tdaWZ3f3yihYB3Bs2uIomZYt6A9QLu7J2atQ5g0Krt5AmT5SshGigKZoTakFNlelLIbu8MJ/s1600/no-image.PNG'/>         </b:if>        </a>       </b:if>      </li>     </b:loop>    </ul>   </div></div></b:if>  </b:includable> </b:widget></blockquote>
 Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also. 8. Preview and if everything is ok, Save the Template.</div>

Add a Popular Posts Gallery just above your Blogger posts

The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels....

Rankwash

Categories

About Us

Social Icons

Recent Posts

Popular Posts

Recent Posts

fan page

Connect With Us

Facebook Fanpage

Awesome Slide Open Heart Bookmarking Gadget For Blogger

How to add Facebook Like/Fan Box to Blogger

Add Facebook Like Button Below Post Titles

How To Add Related Posts Widget To Blogger with Thumbnails

A Simple Related Posts Widget For Blogger

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

Add a Popular Posts Gallery just above your Blogger posts