Rankwash

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

<div dir="ltr" style="text-align: left;" trbidi="on">
Alright, this time, we are going to make a stylish and simple jQuery <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;">drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text. Steps Adding the jQuery Drop-Down menu Step 1. Go to <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;">Dashboard - Template - Edit HTML - Proceed 
<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/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" 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;" /></a></div>
 Step 2. Expand Widget Template (make a backup) 
<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;"></ul>
<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/AVvXsEjwYO-BBZygymhI3gHDXF5aHT53kDVDWqx-JcQ9mhscsIZW8L4DwBngiSiZ5aMA9Lst7JkQQGFudUrGIHwc1fxpZTei2FlqifQ0s33l2Rhg2GFqhW7ATXcMb4q1RGVDhEMB11IAb-A977Ng/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 alt="jquery drop-dowm menu" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwYO-BBZygymhI3gHDXF5aHT53kDVDWqx-JcQ9mhscsIZW8L4DwBngiSiZ5aMA9Lst7JkQQGFudUrGIHwc1fxpZTei2FlqifQ0s33l2Rhg2GFqhW7ATXcMb4q1RGVDhEMB11IAb-A977Ng/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;" title="expand widget templates" width="320" /></a></div>
 Step 3. Search for 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:skin></blockquote>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
 </div>
Step 4. Add the following CSS code before/above it: 
<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;">
 #jsddm { height: 40px; margin: 0; overflow: visible; z-index: 2; padding: 15px; position:relative; } #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; } #jsddm li a { display: block; white-space: nowrap; margin:1px 3px; border: 1px solid #AAAAAA; background: #cccccc; background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc)); background: -moz-linear-gradient(top, #ebebeb, #cccccc); padding: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: #ffffff 0 1px 0; color: #363636; font-size: 15px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } #jsddm li a:hover { background: #C8C8C8; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; } #jsddm li ul li { float: none; display: inline; } #jsddm li ul li a { width: auto; background: #CAE8FA; } #jsddm li ul li a:hover { background: #A3CEE5; }</blockquote>
 Step 5. Now find 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;">
 </head></blockquote>
 Step 6. Add this code immediately before/ABOVE it: 
<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.2.6/jquery.js' type='text/javascript'/>   <script type='text/javascript'>   //<![CDATA[ var timeout    = 500;   var closetimer = 0;   var ddmenuitem = 0; function jsddm_open()   {  jsddm_canceltimer();   jsddm_close();   ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close()   {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer()   {  closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer()   {  if(closetimer)   {  window.clearTimeout(closetimer);   closetimer = null;}} $(document).ready(function()   {  $('#jsddm > li').bind('mouseover', jsddm_open)   $('#jsddm > li').bind('mouseout',  jsddm_timer)}); document.onclick = jsddm_close;   //]]>   </script></blockquote>
 Step 7. Click on Save Template button. Step 8. Go to Layout > click on "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/AVvXsEjAiK0CAvHa3uTQpG_PUgaSz8Rtls5Y2MneOZMPwfS9APZDlXnYc_3sAyRfh812rq-Hn8Utsb_hqW_rej-wDn-4kDyUGzQbrWje1esnbf0wjOlrhwM9FH0DRcW94aZt3kEniLtCu7WEkE88/s1600/add-a-gadget-blogger-layout.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="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAiK0CAvHa3uTQpG_PUgaSz8Rtls5Y2MneOZMPwfS9APZDlXnYc_3sAyRfh812rq-Hn8Utsb_hqW_rej-wDn-4kDyUGzQbrWje1esnbf0wjOlrhwM9FH0DRcW94aZt3kEniLtCu7WEkE88/s1600/add-a-gadget-blogger-layout.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" /></a></div>
 Step 9. Choose HTML/JavaScript from the pop-up window  
<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/AVvXsEivTUWNYB1eAGk6AnwWwJVNinhBLOwcNzTbQznHMaZE9Je46gXPRaehhgiJAHCP6Gc6kPWE8sWOfvz6TxBGLwMkcQZ0cPD9ysYAPVvJ0hOHU8_QwO_BRXG8hwhzlNDlRNR8TAxMjJtEC3u7/s1600/html-javascript-blogger-gadgets-widgets.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/AVvXsEivTUWNYB1eAGk6AnwWwJVNinhBLOwcNzTbQznHMaZE9Je46gXPRaehhgiJAHCP6Gc6kPWE8sWOfvz6TxBGLwMkcQZ0cPD9ysYAPVvJ0hOHU8_QwO_BRXG8hwhzlNDlRNR8TAxMjJtEC3u7/s1600/html-javascript-blogger-gadgets-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;" /></a></div>
 Step 10. Paste the following code in the empty 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;">
 <ul id="jsddm">   <li><a href="#">Home</a>   <li><a href="#"><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;">Link 1</a>   <ul>   <li><a href="#">Drop 1-1</a></li>   <li><a href="#">Drop 1-2</a></li>   <li><a href="#">Drop 1-3</a></li>   </ul>   </li>  <li><a href="#"><span class="IL_AD" id="IL_AD3" 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;">Link 2</a>   <ul>   <li><a href="#">Drop 2-1</a></li>   <li><a href="#">Drop 2-2</a></li>   </ul>   </li>  <li><a href="#">Link 3</a>   <ul>   <li><a href="#">Drop 3-1</a></li>   <li><a href="#">Drop 3-2</a></li>   <li><a href="#">Drop 3-3</a></li>   <li><a href="#">Drop 3-4</a></li>   </ul>   </li>  <li><a href="#">Link 4</a></li>   <li><a href="#">Link 5</a></li>   <li><a href="#">Link 6</a></li>   </li></ul></blockquote>
 Note : You must change links titles and replace the # symbol with the URL address of each of your links Step 11. Click on Save 
<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/AVvXsEhshH2Fwr9htx9zLobQLMtG89BT_7Ildxv3ovpCcSRo3IJIHLeu2z1-525GCTm9_efE3HBKujXv6Da2oTp8Yr2fHosLt5ImcH5UUsErcs0vEeLhcMvhMs8z0T1H5TZs4DwLb6AX6UWXenB5/s1600/save-html-javascript-blogger-widget.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/AVvXsEhshH2Fwr9htx9zLobQLMtG89BT_7Ildxv3ovpCcSRo3IJIHLeu2z1-525GCTm9_efE3HBKujXv6Da2oTp8Yr2fHosLt5ImcH5UUsErcs0vEeLhcMvhMs8z0T1H5TZs4DwLb6AX6UWXenB5/s1600/save-html-javascript-blogger-widget.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>
Important: - if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again. - if drop down links are not showing, do the following: Go back to Template > Edit HTML and search (CTRL + F) 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='header' id='header' maxwidgets='1' showaddelement='no'></blockquote>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
 </div>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
You should change 1 with 3 and no with yes like this:</div>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
 </div>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
<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:section class='header' id='header' maxwidgets='3' showaddelement='yes'></blockquote>
</div>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
 </div>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
Save the Template. Next thing to do is to go to Layout and drag your menu immediately below your header <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgINxzkkcgc13_I2nozfyGKVMBz85laNkaQfdVrh5gofY0IVwRM7CLgV-DJ4Vp4aA0GMVGMU-dHXrFZscbFTw1iIB9cTA3E6h59thTY5Hswln_CkC4QSgq15Xk-7534-UKl3MNTcqAq-v_H/s1600/drag-widget-below-blogger-header-jquery-drop-down-menu.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="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgINxzkkcgc13_I2nozfyGKVMBz85laNkaQfdVrh5gofY0IVwRM7CLgV-DJ4Vp4aA0GMVGMU-dHXrFZscbFTw1iIB9cTA3E6h59thTY5Hswln_CkC4QSgq15Xk-7534-UKl3MNTcqAq-v_H/s1600/drag-widget-below-blogger-header-jquery-drop-down-menu.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" /></a></div>
 Then click on Save Arrangement <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKEI20nIZNVwU8PafZ9-8XDcPbzA6FDaTnUDXhg8FxroSMIr92ldzsKa1fvxpvmyyL6Jl7WRwqlQ0wWqclkuLMjsI0JwYcHtaJAvy-DPysEZ7JGHxEhauyrXdwbsp50c8Jw2Sl9LWf7UnK/s1600/save-arrangement-blogger-widgets-page-elements.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="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKEI20nIZNVwU8PafZ9-8XDcPbzA6FDaTnUDXhg8FxroSMIr92ldzsKa1fvxpvmyyL6Jl7WRwqlQ0wWqclkuLMjsI0JwYcHtaJAvy-DPysEZ7JGHxEhauyrXdwbsp50c8Jw2Sl9LWf7UnK/s1600/save-arrangement-blogger-widgets-page-elements.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>
 Here you can see the <a href="http://drop-down-menu1.blogspot.com/" style="border: none; color: #0088b2; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">DEMO</a>. Enjoy! :)</div>
</div>

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Alright, this time, we are going to make a stylish and simple jQuery drop down menu . The main objective is to make it as simple as possib...

Google Translate Widget with Flags For Blogger

0 BLOGGER-WIDGETS

<div dir="ltr" style="text-align: left;" trbidi="on">
The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language.  This widget also auto-detect your blog language and then translate it to the readers chosen language. It supports 12 different languages: English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Korean, Arabic And Chinese. 
<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/AVvXsEg3su6x9OPHF3-kf4GBKftgXIlhBo8hS5JBQkGo-kaBD5TVZjijhWp18T9xZjiA5qpoVgyVeUZtH0y2gLJD-X1P4ZeuQMwQYWSftVag8pFYnuaRTNdi57rxw_iiBbNeft5FPlHMvEpZPRhn/s1600/google+translate+widget.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img alt="google translate for blogger, blogger gadgets, blogger tricks" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3su6x9OPHF3-kf4GBKftgXIlhBo8hS5JBQkGo-kaBD5TVZjijhWp18T9xZjiA5qpoVgyVeUZtH0y2gLJD-X1P4ZeuQMwQYWSftVag8pFYnuaRTNdi57rxw_iiBbNeft5FPlHMvEpZPRhn/s1600/google+translate+widget.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="Google Translate Widget/Gadget for Blogger" /></a></div>
 How To Add The Google Translate Widget To Blogger Step 1. Go to your Blogger <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;">Dashboard >> Layout and click on "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="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0VdWVSny7GszaWbwjfUg-tIgK0y12-CDhjQeQL-d6SwHxQ6xXD2YxxtOV7ZQyuOJLkZPRk4rKCY1oV1NmanJR7Y1_BZf0CIU5jW_IebZfe6X5RWgZEPVYcMQk88h-d3Ka7QEm0u8-xPy/s640/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="640" /></a></div>
 Step 2. From the pop-up window, scroll down and choose 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="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9opozceR2k28Ur6yqpMrdO-IQsI-9_Dv0envDoEwCmiBb5EuiArq1Ph2_aprlfCqyGs16ZnOeeyHaIyJMt5VY2001DZLiSsA0aL3v5oyJSyWREahSGhvT7rv0bgEACwbbMlo1ZO5Af19u/s400/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="400" /></a></div>
  Step 3. Paste the code below in the empty box: 
<div class="code1" style="-webkit-transition: all 0.3s ease-in-out; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpvRfoG5qtfvnK8qTcGCyWGBYfIcQ0dKgztuSjFuGP8IvuPoQFe3qdNTRtkmzy4SxdL7IoBLrs58lqQGBRbCVee5muS3HaAcS8IwO3pD9bcL5YZAQtrIuM1buDPiIFWze0awOXaOE8_6dO/s1600/teacher.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; border-top-left-radius: 23px; border-top-right-radius: 20px; border: 1px solid rgb(255, 255, 255); clear: both; color: white; font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 14px; height: 260px; list-style-type: none; margin: 15px 35px 15px 15px; overflow: auto; padding: 15px 5px 10px 165px; transition: all 0.3s ease-in-out; width: 250px;">
<<span class="IL_AD" id="IL_AD3" 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"> function showHide(shID) {     if (document.getElementById(shID)) {         if (document.getElementById(shID+'-show').style.display != 'none') {             document.getElementById(shID+'-show').style.display = 'none';             document.getElementById(shID).style.display = 'block';         }         else {             document.getElementById(shID+'-show').style.display = 'inline';             document.getElementById(shID).style.display = 'none';         }     } } </script> <style>  .google_translate img { margin: 10px 20px 0px 20px;     height: 24px;     width: 24px;         }         .google_translate:hover img { filter:alpha(opacity=0.30);         -moz-opacity: 0.30;         opacity: 0.30;         border:0;         } .more {     display: none; a.showLink, a.hideLink {     text-decoration: none;     color: #0880C4;     padding-left: 18px;     background: transparent('down.gif') no-repeat left; } a.hideLink {     background: transparent url('up.gif') no-repeat left; color: #0880C4;} a.showLink:hover, a.hideLink:hover { color: #0880C4;  }  </style>  <div>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5AjO4L57tIrf86dPpdOcH1_KMmsfsG0YnSXkOKev6L0OT6z0HvmfrBjmYO2k6xFZqwAJoQ7b2b-HsXkrHriASFx8gltyg9DL9tDy5IliEXqo3HggOWt357lC4q8OIw3LyD2GegMYkDLMn/s1600/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-3K0loZWfDsaL1Wyp3qma14k0HHIqTw4uZ6X8fePNCvTBZ94wfy8YeZxh0-HWB9oYcdcpxxgG-IfdKyO0Ve-xSpwtdO3gS41pOSzX0p10x0yFVGbDCuv0ITMCFJVpfLao3gXVa5vn6wmR/s1600/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge8GNlgm4aJ9mbD_rumF-i2w3orbfSrdTxEJohFPWwgLODQQMqXYh4maR3GaVxbc5j3UO0augryaDyEyV8xq4yEMh1APKWgnLedE6jGCFauFJXF6tSNT2b0B8rW4UbsOQbkg5aFykQZmPc/s1600/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS9KzLWjW7SwWC6S7n9OCRIRsID0ot1HD-mNgjXHsiURYjAtOFcFgveB3xMXzyiD-jJHm3af7V0vXeCspmmirg5J3urzQg2LO4SSazAMT1KRecYH8Tkez6uR84c7uPIlupeJcbf42RXRO7/s1600/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">More</a> <div id="example" class="more">  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhw6NlkgRmApjfgc_i6gj9i9AdWuJ3axOhW3fDevB18Q4kaWr6e6JxRKU-xDD_sKYGInTBIeSJXMIzRxNbcISHy1MoTXrydUSW1yovc6lEd3PRGQUkIz6VmiM5qlT3UYzdFY52XNkashFW/s1600/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsQetfrRtQ19l5_WHmQtnBhsGwEYKSS-RYq0NkRXDEhAXKpZQkaHZmzKJBIklSqM24MU6vh7XV3i_0NH98xncR20LR6DS5BfO977Sf-b_Wvt1dnsi_TEaD7BWP1GP1hzaj0U6lkCgyxbzS/s1600/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>       <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVVhOC7wrlEVf181deVGWkRXGg1a-H3DE1t1THKAXl-TdxEmCj_Ey242v5EDvBNDhzERWo2qGolfuDx_M37N6YhvZcm7mPPn2j30Af4SCiTDzg2SwbxIAqHNuxbvXipwdFZFzsHvBZoOq3/s1600/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QbCOMTkCY_dOalIl82P3IpqwVYGk-p_6-1x5pSJeLWKPbnZ1VnRM1FHeHLp7ldDpM_asqioT_riiZXjB8hJNdMgWHAxuUcvlKv8KEXXVroi75AcSOsxF4CNelEOOlReWp_of5dYAAmP/s1600/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjj68HMglOfqANqIcwsrEHNRJmp4IBWmO5SayN4NK3_S1EqNOyFab_CxRlqQ_qYFc2lVVjdImeMwa9DFeUgLPGQVzlokE1BrMI2rSCDzqV8pkzRGS301vfhZina9lnxjDu49pFxKzF2s38/s1600/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyC_Fcxl-_UxrfjCVPIssS-2M-7nEq-8gBDF1t8VEcX0yV7k3a-3KmKtmQZlih6ZMNNs5fCYpyZq2TnzI5rp_3kFuW-tbbIbE9OHJyUxkp5qSHAqA8DlSeZNose1CBoPO4s2m_0FmRm-bb/s1600/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_MjtgWXGAo0QLQpf-av8N-h1S2-63VITD5HyFioZVI6a3fQ51bCAXswuoToi2GO-dO4xt7HlNilLbm9IKIUojilzy43VJptwZGeP8quooqXy-R_eTes5tsr5AuV0Ygl-iJ_cjIibwhCXL/s1600/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2pwM3Iq_RAUwngOcJIDqrusGhmv20CBN44q_b_uPnsxmxu3GK55FxWVhE-_G3hVd2MsIS1clF2y-W0IdPrS6sndZDuT_pCiYwbCb_8LGRr3vm5TXy9P-9P4vKOpWdndcSmQEonpV0FYS7/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>     <a href="#" id="example-hide" class="hideLink"     onclick="showHide('example');return false;">Hide / </a><a href="http://helplogger.blogspot.com">Get this widget</a> </div>      </div></div>
 Step 4. Now click on Save</div>

Google Translate Widget with Flags For Blogger

The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language. This widget also auto-de...

Add Facemoods Emoticons To Your Blogger Comments

0 BLOGGER-WIDGETS

<div dir="ltr" style="text-align: left;" trbidi="on">
Here are some amazingly funny emoticons compatible with your Blogger comments - also with threaded commenting system! If you want to know how to add them, just follow <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;">the next steps: 
<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/AVvXsEhf5cPZghvQGZAf2kE8ZcTJDL110GKOfM5_dfwVuTsSTrLbxTCzyIfy0izpb7lHzEJkMIOX9_g_PsSHPGx3y43BDyGtS2-ioiD6dlGvaNRR7i9Pb0abH6vrjKzFnoPki8v7_a4tCO41PWFy/s1600/add+facemood+smileys+emoticons+to+blogger+comments.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img alt="emoticons, smileys, blogger, tricks" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5cPZghvQGZAf2kE8ZcTJDL110GKOfM5_dfwVuTsSTrLbxTCzyIfy0izpb7lHzEJkMIOX9_g_PsSHPGx3y43BDyGtS2-ioiD6dlGvaNRR7i9Pb0abH6vrjKzFnoPki8v7_a4tCO41PWFy/s400/add+facemood+smileys+emoticons+to+blogger+comments.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="facemoods emoticons for blogger blogspot comments" width="400" /></a></div>
<div style="background-color: #f9f9f9; color: #0b5394; font-family: 'Istok Web', sans-serif; font-size: 14px; text-align: center;">
<a href="http://facemoods-emoticons.blogspot.com/2012/05/lorem-ipsum.html#comment-form" style="border: none; color: #0088b2; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">DEMO</a></div>
 Step 1. Go to <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;">Dashboard - Template - Edit HTML - Proceed 
<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/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;" width="320" /></a></div>
 ...and select Expand Widget Template (don't forget to make a backup) 
<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;"></ul>
<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/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;" width="320" /></a></div>
 Step 2. Search (using CTRL + F) for this code: 
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
 <ul style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">
<li style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">For previous commenting system: </li>
</ul>
<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;">
 <h4 id='comment-post-message'><data:postCommentMsg/></h4></blockquote>
<ul style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">
<li style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">For threaded comments:</li>
</ul>
<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-line post-footer-line-3'></blockquote>
 Step 3. Add the below code just above it (for threaded comments, add the code after): <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 == "item"'> <div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpM-50fmY5Gd8qm8l_KCacc8ptlLN5rnikb4alVZM8TipbbmGKq5w-dDFqVeiO90D2uSZwnbxmwl55OaU61ICElEx0JyuWePvXUmlbQ6Q0-Wcj6MWr6mHtgeiq464-YGPprfsGvEE6Z33u/s1600/helplogger.blogspot.com(1).gif'/> :a &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZkedtuW8G21YRps3Bssw6HEFZNNRoVGLSdzw3m99VlOliv60Ztq7mfsTm0E_tAGWfEVxRBFZ8QljqduREaVSejv_Q6ICvI6Sj9PITair9PTLASKdbCVU_WylqCP0o65S4yoYYG9tGhrp-/s1600/helplogger.blogspot.com+(2).gif'/> :b &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8UjVLA_PC0u3tkVSkcTr2HfpT1nJQWMR8Yju2CXAuftTMoh2dr63Dj_wsz5O5hyXufdpTKWVt3uJp6huPMJSWQGzg1TJcy7Q1hdm1_L55WfUiyb1EmUtUe0N0z7_Y7r3Gf5BKmt8XAMZK/s1600/helplogger.blogspot.com(3).gif'/> :c &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfthCYh073tjekUVI6-xtABWDnULocZaTkAcSNE_0FtB87mB6zhWjRmr22qAdat_aiWQs6GIhmDW0VTVcFRTJgJcL_erqYaRSxQ-eD-P_HMT2yVrv6o29wyGCAmQIwdlPyRaqDqpaWSxmE/s1600/helplogger.blogspot.com(4).gif'/> :d &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggCR_yTmjBom4J-rGT2o7EZfZHh0NltqgFiRMcHKw_hzySTcD8VnRSlUNNefiwjFSiKzMvK0C0R8N0PN_-jqH5t3gi1pR750HKxxIOEU3TPchnewP-Jw6pdQ80ZMCU2xRhezjBLdjYXMUR/s1600/helplogger.blogspot.com(5).gif'/> :e &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE8AMkQc_1LimKkn8Ji1BZElWgQe1PaueZLV6pU2P-Nd96Zey_BVHrK6HMOnCTtYaEdocjGhwYF-kcxgLJJFs9EQT1medVubWx9KlqcBi72CYUBKJy1mQU53ok2LLztY8M8by4CMfOX-gX/s1600/helplogger.blogspot.com(6).gif'/> :f &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIzdV8v1NK6CauW1vzxid_xdwjmB8HU5pYLPJ3udu66ExvBQ25b8QvH815JrLFp4eelh_vsYV43UtoRYTUfhZcu_ZynelP3fn79_5_VboY2wvos-3YlgxpTRZ6RV4EpxVQQWStFVv-0FTO/s1600/helplogger.blogspot.com(7).gif'/> :g &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43xLdhJ3p2EFXF_UQASWKYRQBUwd07qgskBTt_TIJVhj7FwvE64TONNp6pZnYS5we7cQNhWBtW6s8N3ZJXwFECH2wq7iB9W1JnXA-EnGacHd_srUKep87GXkqhmyyqTU7bVK7vEZ1iPD4/s1600/helplogger.blogspot.com(8).gif'/> :h &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQPe3UD2mlCeYLj-LULhdRjDvjvFRuyeZjfGpQmHRM8tKzMxcbCoANWkOH3KUw2XCNWCTTEPBH4x3Lv5FXPER_dXkzoynZZUZEaTpjzY7apRfzYFoAS2TXZy0MYIIoB46IPsm_foipdEKu/s1600/helplogger.blogspot.com(9).gif'/> :i &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JBqAFuIqTgp_7QA1ndI1qgif5IEB0b_iBpuBkyc4Yj55TZTUoeHigrIPYQEhC4axZ3BBuZumjMXD1OfAqpiXLybdlRQPATWStw9nxQtW6N8iJ7EqAa-kFSDAIQTby6QSDjFelFkdl0JE/s1600/helplogger.blogspot.com(10).gif'/> :j &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8D_cPLHCn9mId-TC-ZlboXbcDwGsfcZxTsK7zCZBACYBOVM4BDEKzjt0BRD8h_pceUKW-_AhP9xOZbRvj0hLNxZGH1EdITko4oMsSpFBXzSus_bHw9egpJhoe6sSL2ARhZisfsGkiSNVi/s1600/helplogger.blogspot.com(11).gif'/> :k &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIkCGPahFKAD2RbxnxUcS_vy02OdVvI1OCXPe_1i7fhkgCurgRibIDrD6QzgeHyfdhQi393u7nVtLslXDWHNAdMiTfyDmsaI86nHpRZb466VjU5KRvsL_lZFc5UV05Jx9KOyBZA5DFcuGS/s1600/helplogger.blogspot.com(12).gif'/> :l &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbcXRtx2wD_0ejN3Xhgn-0rgAoc1gHTcxcrDoAIsCxoTmMaVZOaVPtYJ8DpH9DqWi21YXaq8lV7Jw8WSso3FO_t5ECRK59Y-iOnkDA51ssSRt_ocs_q6Fi6-QuIIuNHAAorcwhucxdCOM2/s1600/helplogger.blogspot.com(13).gif'/> :m &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizIdrkg6fExaUb8A2jxbbH6wEGDLodanEEVjwNlhsF_iP2y3_i5oDJh92SyOx1YByN68RTkCn652U_0NEMCiW85OdA1rLFCg9ZtyBZ_NuIBR3GxyBshyphenhyphenUkDfO8bPr1Q4M9OCVSL7bHGaFk/s1600/helplogger.blogspot.com(15).gif'/> :n &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2r2L-KYj5fp9XciADiy_mytJ1E3uy_p1FUpZS8junD85hJ46A1noi7SLK2Wb4NKuCc-QODqwCJ7cScpgm7eKH021pY74OyMRs94Ij3CLpGwcs_ylUeMqYe8pUI2wxLyHFTb9RJpEmfZhN/s1600/helplogger.blogspot.com(16).gif'/> :o &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOi-SKBcEwVW12yCPuqWmQw8o0Xv2k4vGaa_txHH_9t7jxr01h89YHR8tWx5WvavxCceQOgOQNnVOLIm5rGBP0mOqAFdFuT1fHsq5tYKKvz-6ZMwgxkkyNp7rq2GVd2w8qtzuQNArKr1Ul/s1600/helplogger.blogspot.com(14).gif'/> :p &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwA7_gKqSYt-Uq8_4z9klybnlWv6YoMFi_En7dXIuuDsI8qaw5_Kve87pA8fbSLUbyGVtQirhU2qpKr6_SSWO8ZzEbCCAx22Q5z48ThqvVvTTlOT-ytsZ85OsZL4RlmyXdjKXllHrat5zH/s1600/helplogger.blogspot.com(17).gif'/> :q &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwhqDX7XziZqR41N2_EqSgTe9t7QzviL8OWyH4vDINpmWKrX_ATlHmym9-xBu1dXWSl0sMbz4Z9_e3I7ieLhAV6RiHrcxA9LweiESuVXJ41NjPREVn952VVoG0gYk0wHN_dkcGGadLSvo/s1600/helplogger.blogspot.com(18).gif'/> :r &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgSU3CMlzRcnUECDUJcP4Fxq7s7P-56SttO4XxqllD8ayDNW5GIGxtKIvhgF_T9acR8Djrp7SBRW765kftdDX7_BFHZuXAnjraCM9QQXRi3QLrmsdrV6DLh1tILh3eKKOX101_S7pYIoGx/s1600/helplogger.blogspot.com(19).gif'/> :s &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUKRmj2hbuILo2RC8gynIEoS4w1ezhFX80mMZyLCBLYvgy_QJwQMyuMAFZm_EvMBfn_UIwGiLk0g78nWd_DDUPRPHYTaYs9jJcitfCvel2bsxy97lcepNMAfxsLjbe-hV7_MZy5FDK12vB/s1600/helplogger.blogspot.com(20).gif'/> :t   <a href='http://helplogger.blogspot.com/2012/05/add-facemoods-emoticons-to-your-blogger.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a> </div></b:if></blockquote>
 Step 4. Now search for this piece of code: <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;">
 </body></blockquote>
 Step 5. And add the following code immediately above it: <ul style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">
<li style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">For previous commenting system:</li>
</ul>
<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;">
 <script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons.js"/></blockquote>
<ul style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">
<li style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">For threaded comments: </li>
</ul>
<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;">
 <script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons threaded.js"/></blockquote>
 Step 6. Save the Template. Now, enjoy your comments!</div>
</div>

Add Facemoods Emoticons To Your Blogger Comments

Here are some amazingly funny emoticons compatible with your Blogger comments - also with threaded commenting system! If you want to know h...

Add Floating Social Media Sharing Buttons To Blogger

0 BLOGGER-WIDGETS

<div dir="ltr" style="text-align: left;" trbidi="on">
The Floating Social Media Sharing is a very popular widget on all the top blogs, being a very good way to increase the number of times your posts get shared on Twitter, Facebook and other social networks. It has some of the following functions: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and RSS Feed Icon and each of them comes with a live counter. You can add more sharing <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;">buttons or social bookmarking icons later if you wish. 
<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/AVvXsEhfogMdxZy_0jBNJCpRhUuSPXe7L1nWhZtcEEPanXMFvNhyphenhyphenv7_-r94N5HKdInsPuOIHOdL2DuIrzkVWDg0GY2k4X_UEzfJ4GjOB0qL7YSwulr3Ypi007UPiwVJI4VgjaFuFBC0T9RhPnSSZ/s1600/01-06-2012+01-27-30.png" imageanchor="1" style="border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;"><img alt="Blogger, WordPress, Facebook, Share" border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfogMdxZy_0jBNJCpRhUuSPXe7L1nWhZtcEEPanXMFvNhyphenhyphenv7_-r94N5HKdInsPuOIHOdL2DuIrzkVWDg0GY2k4X_UEzfJ4GjOB0qL7YSwulr3Ypi007UPiwVJI4VgjaFuFBC0T9RhPnSSZ/s320/01-06-2012+01-27-30.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="floating social bookmarking buttons" width="320" /></a></div>
 
<h4 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;">
How to add the scrolling social bookmarking bar</h4>
<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;"><ol>
<li style="border: none; list-style: decimal; margin: 0px; outline: none; padding: 0px 0px 0px 4px;">Go to <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAiK0CAvHa3uTQpG_PUgaSz8Rtls5Y2MneOZMPwfS9APZDlXnYc_3sAyRfh812rq-Hn8Utsb_hqW_rej-wDn-4kDyUGzQbrWje1esnbf0wjOlrhwM9FH0DRcW94aZt3kEniLtCu7WEkE88/s1600/add-a-gadget-blogger-layout.png" style="border: none; color: #0088b2; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Layout</a></li>
<li style="border: none; list-style: decimal; margin: 0px; outline: none; padding: 0px 0px 0px 4px;">Click on <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAiK0CAvHa3uTQpG_PUgaSz8Rtls5Y2MneOZMPwfS9APZDlXnYc_3sAyRfh812rq-Hn8Utsb_hqW_rej-wDn-4kDyUGzQbrWje1esnbf0wjOlrhwM9FH0DRcW94aZt3kEniLtCu7WEkE88/s1600/add-a-gadget-blogger-layout.png" style="border: none; color: #0088b2; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Add A Gadget</a> link</li>
<li style="border: none; list-style: decimal; margin: 0px; outline: none; padding: 0px 0px 0px 4px;">From the pop-up window, scroll down and select <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTUWNYB1eAGk6AnwWwJVNinhBLOwcNzTbQznHMaZE9Je46gXPRaehhgiJAHCP6Gc6kPWE8sWOfvz6TxBGLwMkcQZ0cPD9ysYAPVvJ0hOHU8_QwO_BRXG8hwhzlNDlRNR8TAxMjJtEC3u7/s1600/html-javascript-blogger-gadgets-widgets.png" style="border: none; color: #0088b2; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">HTML/Javascript</a></li>
<li style="border: none; list-style: decimal; margin: 0px; outline: none; padding: 0px 0px 0px 4px;">Copy the code below and paste it inside the empty box.</li>
<li style="border: none; list-style: decimal; margin: 0px; outline: none; padding: 0px 0px 0px 4px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhshH2Fwr9htx9zLobQLMtG89BT_7Ildxv3ovpCcSRo3IJIHLeu2z1-525GCTm9_efE3HBKujXv6Da2oTp8Yr2fHosLt5ImcH5UUsErcs0vEeLhcMvhMs8z0T1H5TZs4DwLb6AX6UWXenB5/s1600/save-html-javascript-blogger-widget.png" style="border: none; color: #0088b2; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Save</a> the gadget.</li>
</ol>
</ul>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
 The code to copy-paste (updated!): <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;">
  <style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from Helpblogger.com"> <div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div> <div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='Helplogger' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script> <div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div> <a href='http://feeds.feedburner.com/helplogger' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtL9Z9q3-xdYbknlndMNU88Tpr4MnWO9s8SYdcu4EKu3XIImT4yXOKSj0A4Crh0aVPe5zq8psheFbYlLyk3-THc4riyVyoJ4ZqXgUp0WLhWWpzhRbXAczqWXeccbmbUPhrH3aIr3IifeAY/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://helplogger.blogspot.com/">widget</a></div> </div> </div></blockquote>
 Customization:</div>
<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;">Vertical alignment - Change the value of bottom in code line 3. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.</li>
<li style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">Horizontal alignment - Change the value in red of margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.</li>
<li style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">Twitter setting - Replace Helplogger with your Twitter username</li>
<li style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code: <div class='sbutton'> BUTTON CODE HERE </div></li>
<li style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">RSS Feed - Change the text in blue with the url address of your RSS feed.</li>
</ul>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
Enjoy :)</div>
</div>

Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs, being a very good way to increase the number of times your...

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Google Translate Widget with Flags For Blogger

Recent Posts Widget with Thumbnails for Blogger/Blogspot

Add Facemoods Emoticons To Your Blogger Comments

Add Floating Social Media Sharing Buttons To Blogger