PreToPro Blogger: Blog Widgets | Turning PreBloggers Into ProBloggers.

Customise Blogger Official Contact Form Gadget by using Dynamic CSS

Kaushal Srivastava 0 Best Gadgets, Best Widgets, Blog Customisation, Blog Gadgets, Blog Widgets, Blogger Official Contact form Gadget, Contact Form 01:32

<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZxJVeTq2gWbsWIacSQRXdIImoOijgc-ctyhBN0RZWQcnzO1I_obnWpMEhy7-EwiQSjq2M0Dw41iW8FBYBW0xHoLeXuAqPzTVFSYSO2LpekijLX1_50kCkCjpP3e9PI_K5D1T5a_AYoi6/s1600/blogger+contact+form1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZxJVeTq2gWbsWIacSQRXdIImoOijgc-ctyhBN0RZWQcnzO1I_obnWpMEhy7-EwiQSjq2M0Dw41iW8FBYBW0xHoLeXuAqPzTVFSYSO2LpekijLX1_50kCkCjpP3e9PI_K5D1T5a_AYoi6/s1600/blogger+contact+form1.png" title="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" width="320" /></a></div>
<br />
<i>Few months ago blogger added the contact form gadget in its gadget list and it got popularized very quick. But the Problem with the official contact form gadget designed by the blogger team is that it has a very simple and plain look. And if you too are bored with the plain look of the gadget and want to add some CSS magic to it this post is for you. Today in this post I am going to share the code developed by TWBLab that will add some CSS magic to the contact form gadget.</i><br />
<div>
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="clear: right; float: right; margin-bottom: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1rp2xd2YK3M8K8Qj5ZJrmRTI6frFLzXSMDpEXrVgM5lH-dc0vQdsWHzpFa1g_a3LVzbzLJY-zHXxnO6ibt2d66wMrGclmpvkoCGgxGFynnbU3dwFQvcgueTAOJIATUqBf959VDK9YtD-i/s1600/blogger+contact+form.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Blogger Official Contact Form Gadget - The old look" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1rp2xd2YK3M8K8Qj5ZJrmRTI6frFLzXSMDpEXrVgM5lH-dc0vQdsWHzpFa1g_a3LVzbzLJY-zHXxnO6ibt2d66wMrGclmpvkoCGgxGFynnbU3dwFQvcgueTAOJIATUqBf959VDK9YtD-i/s1600/blogger+contact+form.png" title="Blogger Official Contact Form Gadget - The old look." width="185" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Blogger Official Contact Form Gadget - The old look .</td></tr>
</tbody></table>
<div>
Here are the simple steps to customize the Blogger Official Contact Form Gadget by using CSS :</div>
<div>
<br /></div>
<div>
1.) First of all, add the official contact form to your blog by following these simple steps :</div>
<div>
<br /></div>
<div>
<br />
<ul style="text-align: left;">
<li>Go To blogger dashboard>>layout.</li>
</ul>
</div>
<div>
<ul style="text-align: left;">
<li>Click on add a gadget link, wherever you want to add the gadget.</li>
</ul>
</div>
<div>
<ul style="text-align: left;">
<li>Now in the gadget lists click on the  <span style="background-color: orange; font-weight: bold;"><span style="color: orange;">||</span></span> <span style="color: orange; font-weight: bold;">More Gadgets </span>tab in the left sidebar. (see the fig. below)</li>
</ul>
</div>
<div>
<ul style="text-align: left;">
<li>Click on the  <span style="background-color: #0b5394; color: white;">+</span><span style="background-color: white; color: white;"> </span><span style="background-color: white;">button next to the contact form to add it.</span></li>
</ul>
</div>
<div>
<ul style="text-align: left;">
<li><span style="background-color: white;">You are done.</span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVHzVxlU1nl6mxs1ZmbJm6BMJrchDc8LLdPWbUjqclVwaoy3UmeUOsXfEg7XKKZ-hz27RtIFdCskNnaRus7vg8HfovmM1N7kEphBzFmjYsNjtNMqgf91Xp74ZtGWAjhBTgjtUB0zPsQfY/s1600/adding+contact+form.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVHzVxlU1nl6mxs1ZmbJm6BMJrchDc8LLdPWbUjqclVwaoy3UmeUOsXfEg7XKKZ-hz27RtIFdCskNnaRus7vg8HfovmM1N7kEphBzFmjYsNjtNMqgf91Xp74ZtGWAjhBTgjtUB0zPsQfY/s1600/adding+contact+form.png" title="Customise Blogger Official Contact Form Gadget by using Dynamic CSS" width="320" /></a></div>
<div>
<br /></div>
<br />
<span style="background-color: white;"><br /></span> <br />
<table>
<tbody style="background-color: #9fc5ee;">
<tr><td><div style="text-align: center;">
<span style="font-family: inherit; padding: 20px;"><b style="background-color: #ea9999;">Note :</b><b style="background-color: #ffe599;"> Skip This Box if you don't want to add the Contact gadget in a static page.</b></span></div>
<span style="background-color: #9fc5e8; font-family: inherit;"><b><br /></b></span>
<span style="background-color: #9fc5e8; font-family: inherit;"><b>But if you want to add the contact widget in a static page follow the above steps and after that follow the steps given below :</b></span><br />
<span style="background-color: #9fc5e8; font-family: inherit;"><br />Now you  have added the contact widget in your blog and want to add it in a static page, firstly you have to hide it from wherever you have added it. For that : </span><br />
<span style="background-color: #9fc5e8; font-family: inherit;"><br /></span>
<br />
<ul>
<li><span style="font-family: inherit;">Go to Blogger dashboard>>template.</span></li>
</ul>
<ul>
<li>Click edit html and find the following code <b></b:skin</b> . You can do so by pressing ctrl+f and typing the code and hitting enter.</li>
</ul>
<ul>
<li>After you find the code add this above the <b></b:skin :</b></li>
</ul>
<br />
<b><br /></b>
<span style="background-color: #9fc5e8; color: white; font-family: Courier New, Courier, monospace;"><span style="line-height: 16.890625px;">#ContactForm1 {</span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">display: none !important;</span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">}</span></span><br />
<span style="background-color: #9fc5e8; font-family: inherit;"><br /></span>
<br />
<ul>
<li><span style="font-family: inherit;">Now save the template and go to the page where you want to add the contact form. Edit the page in the HTML mode and not in the compose mode in blogger post editor. And add the following code between the <div> </div> tags :</span></li>
</ul>
<span style="background-color: #9fc5e8; font-family: inherit;"><br /></span>
<span style="background-color: #9fc5e8;"><span style="color: white; font-family: Courier New, Courier, monospace;"><span style="line-height: 16.890625px;"><form name="contact-form"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email ID" size="30" type="text" value="" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="reset-button" type="reset" value="Clear" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;">    <br /></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><div style="max-width: 222px; text-align: center; width: 100%;"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></div></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></div></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></div></span><br style="line-height: 16.890625px;" /><span style="line-height: 16.890625px;"></form></span></span></span><br />
<span style="background-color: #9fc5e8;"><span style="color: white; font-family: inherit;"><span style="line-height: 16.890625px;"><br /></span></span></span>
<br />
<ul>
<li><span style="line-height: 16.890625px;">Update or Publish the page.</span></li>
</ul>
<ul>
<li><span style="line-height: 16.890625px;">You are done.</span></li>
</ul>
<br />
<span style="line-height: 16.890625px;"><br /></span></td>
</tr>
</tbody></table>
<br />
2.) Now you have added the Contact form gadget in your blog, its time to customize it. To do so,<br />
<br />
<br />
<ul style="text-align: left;">
<li>Go to the Blogger dashboard>> template</li>
</ul>
<ul style="text-align: left;">
<li>Click on Customise Button.</li>
</ul>
<ul style="text-align: left;">
<li>Click on advanced tab in the Template Customize.</li>
</ul>
</div>
<div>
<ul style="text-align: left;">
<li>Click Add CSS and add the following code.</li>
</ul>
<br />
<br />
<span style="font-family: Courier New, Courier, monospace;"><br />.contact-form-name, .contact-form-email, .contact-form-email-message {<br />max-width: 170px;<br />width: 100%;<br />font-weight:bold;<br />}<br /><br />.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {<br />    border: 1px solid rgb(221, 221, 221);<br />    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;<br />}<br />     <br />.contact-form-name {<br />background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsxsnXINT5hYM3AjSy95Po4hRlXDyriphrM6WVLpMn7tyx4ij-ynlayQ9hIjSO1GabRm9O-Lkpc_PYoW_3baJolWPXaA7jUukicSXZb0fJVctZk0PqkNEs3ZesS7VfCC2ByCC-4N2oEII/s1600/privacy-icon.png) no-repeat 7px 8px;<br />background-color: #FFF;<br />border: 1px solid #ddd;<br />box-sizing: border-box;<br />color: #A0A0A0;<br />display: inline-block;<br />font-family: Arial,sans-serif;<br />font-size: 12px;<br />font-weight:bold;<br />height: 24px;<br />margin: 0;<br />margin-top: 5px;<br />padding: 5px 15px 5px 28px;<br />    border-radius: 3px;<br />vertical-align: top;<br />    transition: all 0.2s ease-in-out;<br />    -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */<br />    -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */<br />    -o-transition: all 0.2s ease-in-outs;<br />}<br />     <br />input.contact-form-name:focus {<br />  border: 1px solid rgba(82, 168, 236, 0.8);<br />    outline: 0px none;<br />    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);<br />    border-radius: 3px;<br />}<br /><br />input.contact-form-email:focus {<br />  border: 1px solid rgba(82, 168, 236, 0.8);<br />    outline: 0px none;<br />    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);<br />    border-radius: 3px;<br />}<br /><br />.contact-form-email {<br />background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7jhsor5rFfRkHK9VcsFjENRvjbHbKAYKEb0HDjC9ej81q9bWvbEv1zwVhoaXh3u7H9VxNsT2yEYIJ3sgQPX-DcQGrAZYgK_KhrEwxf5f0lsLKXaMcR8mqwMOu7Ux0FCsYJbRWjKACCXo/s1600/email.png) no-repeat 7px 10px;<br />background-color: #FFF;<br />border: 1px solid #ddd;<br />box-sizing: border-box;<br />color: #A0A0A0;<br />display: inline-block;<br />font-family: Arial,sans-serif;<br />font-size: 12px;<br />font-weight:bold;<br />height: 24px;<br />margin: 0;<br />margin-top: 5px;<br />padding: 5px 15px 5px 28px;<br />    border-radius: 3px;<br />vertical-align: top;<br />    transition: all 0.2s ease-in-out;<br />    -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */<br />    -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */<br />    -o-transition: all 0.2s ease-in-outs;<br />}<br /><br />.contact-form-email-message {<br />background: #FFF;<br />background-color: #FFF;<br />border: 1px solid #ddd;<br />box-sizing: border-box;<br />color: #A0A0A0;<br />display: inline-block;<br />font-family: arial;<br />font-size: 12px;<br />margin: 0;<br />margin-top: 5px;<br />padding: 10px;<br />vertical-align: top;<br />max-width: 210px!important;<br />height: 110px;<br />border-radius:4px;<br />    transition: all 0.2s ease-in-out;<br />    -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */<br />    -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */<br />    -o-transition: all 0.2s ease-in-outs;<br />}<br /><br />  .contact-form-email-message:focus {<br />  border: 1px solid rgba(82, 168, 236, 0.8);<br />    outline: 0px none;<br />    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);<br />  }<br /><br />.contact-form-button {<br />    display: inline-block;<br />    vertical-align: baseline;<br />    margin: 8px 2px 0px;<br />    height: 28px;<br />    outline: medium none;<br />    cursor: pointer;<br />    text-align: center;<br />    text-decoration: none;<br />    font: 14px/100% Arial,Helvetica,sans-serif;<br />    padding: 0.3em 2em 0.55em;<br />    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);<br />    border-radius: 0.5em;<br />    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);<br />    background: none repeat scroll 0% 0% rgb(255, 126, 67);<br />    border: 1px solid rgb(255, 126, 67);<br />    width: 80px;<br />}<br /><br />  input.reset-button {<br />    display: inline-block;<br />    vertical-align: baseline;<br />    margin: 8px 2px 0px;<br />    height: 28px;<br />    outline: medium none;<br />    cursor: pointer;<br />    text-align: center;<br />    text-decoration: none;<br />    font: 14px/100% Arial,Helvetica,sans-serif;<br />    padding: 0.3em 2em 0.55em;<br />    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);<br />    border-radius: 0.5em;<br />    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);<br />    background: none repeat scroll 0% 0% rgb(255, 126, 67);<br />    border: 1px solid rgb(255, 126, 67);<br />    width: 80px;<br />    color: #FFF;<br />}<br />  input.reset-button:hover {<br />text-decoration: none;<br />    border: 1px solid #ff8942;<br />    background: #ff8942;<br />}<br />  input.reset-button:active {<br />position: relative;<br />top: 1px;<br />}<br /><br />.contact-form-button:hover {<br />text-decoration: none;<br />    border: 1px solid #ff8942;<br />    background: #ff8942;<br />}<br />.contact-form-button:active {<br />position: relative;<br />top: 1px;<br />    border: 1px solid #ff8942;<br />}<br /><br />.contact-form-button-submit:focus, .contact-form-button-submit.focus {<br />    border: 1px solid rgb(255, 137, 66);<br />    background: none repeat scroll 0% 0% rgb(255, 137, 66);<br />  }<br /><br />.contact-form-button-submit:focus:hover, .contact-form-button-submit.focus:hover {<br />    border: 1px solid rgb(255, 137, 66);<br />    background: none repeat scroll 0% 0% rgb(255, 137, 66);<br />    box-shadow: 0px 0px 0px 1px #ff8942 inset, 0px 1px 1px rgba(0, 0, 0, 0.1);<br />}<br /><br />/*for FireFox*/<br />    input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner<br />    {   <br />        border : 0px;<br />    } <br />/*for IE8 */<br />    input[type="reset"]:focus, input[type="button"]:focus<br />    {     <br />        outline : none; <br />    }</span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<div>
3.) Finally Save the changes and View you blog to see the Customization. (See the figure below)</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiS5HkKOvN_zkZA0TKloiuwHQ2CozQo_boZZ3YRpCazfiAV2IY1wlQja-iyuBU-UUmfc-S9hp1iuNYfFZTJd0MT3f0MFe5ZEQfwEwOG75CJMXAZBU_4_4IjTxNBq1xVZASb6vdooDeLLC/s1600/blogger+contact+form2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="The New Look. Much better than the old one." border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiS5HkKOvN_zkZA0TKloiuwHQ2CozQo_boZZ3YRpCazfiAV2IY1wlQja-iyuBU-UUmfc-S9hp1iuNYfFZTJd0MT3f0MFe5ZEQfwEwOG75CJMXAZBU_4_4IjTxNBq1xVZASb6vdooDeLLC/s1600/blogger+contact+form2.png" title="The New Look. Much better than the old one." width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The New Look. Much better than the old one.</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
<span style="color: #b45f06;">Features of this Dynamic CSS :</span></h3>
<div>
<ol style="text-align: left;">
<li>Original Contact form gadget contains no clear/reset button. But these will have.</li>
<li>The <b>:focus</b> styling adds more beauty to it.</li>
<li><b>placeholder</b> is included making it easy for the visitors to understand whether they are inputting right or not.</li>
<li>No ugly dotted lines at the border are formed on the buttons after clicking them but in the official gadget there were ugly dotted lines created at the border after clicking the button.</li>
<li>The width and height of the text-area is fully controllable.</li>
</ol>
</div>
<div>
<i><br /></i></div>
<div>
<i>Having any Problems? Let me know via comments section.</i></div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>

Customise Blogger Official Contact Form Gadget by using Dynamic CSS

Few months ago blogger added the contact form gadget in its gadget list and it got popularized very quick. But the Problem with the of...

How To Add Related Post Widget By LinkWithin in Your Blog

Kaushal Srivastava 1 Best Gadgets, Best Widgets, Blog Gadgets, Blog Widgets 23:35

<div dir="ltr" style="text-align: left;" trbidi="on">
<i><br /></i>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7doDB2SHs7eSR0Jgf9no8PpmY6JkU35DdX8pMIwnyq6UCIVBiPddZOGNKTsrmclgq29RypCrlk_qtXuUz3SmyYZUvIRjDJt5WyzTsMqabE_D8ZUfsUHpH_aYpzsOjLwpqoRpmEyaebX0f/s1600/LinkWithin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Related Post Widget By LinkWithin in Your Blog" border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7doDB2SHs7eSR0Jgf9no8PpmY6JkU35DdX8pMIwnyq6UCIVBiPddZOGNKTsrmclgq29RypCrlk_qtXuUz3SmyYZUvIRjDJt5WyzTsMqabE_D8ZUfsUHpH_aYpzsOjLwpqoRpmEyaebX0f/s320/LinkWithin.png" title="How To Add Related Post Widget By LinkWithin in Your Blog" width="320" /></a></div>
<i><br /></i>
<i><br /></i>
<i>When we talk about must-have widgets for a blog, related posts widget is among the ones that come to our mind. The related posts widget keeps your visitors engaged with your content by showing them some extra posts of the same type as of the post they are reading. So, today I going to show you how to add the Related Posts widget made by LinkWithin. LinkWithin is a website that provides related posts widget with thumbnails. It is used by many bloggers in the blogosphere due to its simplicity and easy procedure to Install.</i><br />
<i><br /></i>
<i><b><span style="font-family: Courier New, Courier, monospace;"><br /></span></b></i>
<i><b><span style="font-family: Courier New, Courier, monospace;">Also Read: </span></b></i><a href="http://pretoproblogger.blogspot.com/2013/11/how-to-add-cool-social-sharing-widget.html" target="_blank"><span style="font-family: Courier New, Courier, monospace;">How To Add Cool Social Sharing Widget with hover Effect?</span></a><br />
<br />
<h3 style="text-align: left;">
Why Choose LinkWithin related posts widget?</h3>
<br />
<b>The question may come to your mind. There are plenty of related posts widgets in the web that have more features than LinkWithin's one, that have cool design, etc. etc. So why choose LinkWithin? </b><br />
<br />
As I said earlier many people choose it because it is easy to install and has lots of plus points:<br />
<br /><blockquote class="tr_bq">
<ul style="text-align: left;">
<li>They retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.</li>
</ul>
<br /><ul style="text-align: left;">
<li>The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic.</li>
</ul>
<br /><ul style="text-align: left;">
<li>Their widget is minimally styled and blends in with your site design.</li>
</ul>
</blockquote>
<h3 style="text-align: left;">
<br /></h3>
<div style="text-align: left;">
Recommended : </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<a class="GHUY-LPPB" href="http://pretoproblogger.blogspot.com/2013/09/how-to-add-commentluv-comments-to-your.html" style="border: 0px; color: #1155cc; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0px 10px 0px 0px; max-width: 100%; overflow: hidden; padding: 0px; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; width: auto;" target="_blank">How To add CommentLuv Comments to Your Blogger Blog (Blogspot)</a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<a class="GHUY-LPPB" href="http://pretoproblogger.blogspot.com/2013/10/how-to-add-floating-navigation-bar-in.html" style="border: 0px; color: #1155cc; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0px 10px 0px 0px; max-width: 100%; overflow: hidden; padding: 0px; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; width: auto;" target="_blank">How to add a floating navigation bar in blogger blog?</a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<a class="GHUY-LPPB" href="http://pretoproblogger.blogspot.com/2013/08/all-in-one-subscription-widget-for.html" style="border: 0px; color: #1155cc; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0px 10px 0px 0px; max-width: 100%; overflow: hidden; padding: 0px; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; width: auto;" target="_blank">All in one subscription widget for bloggers</a></div>
<h3 style="text-align: left;">
<br />Steps To Install The LinkWithin Related Posts Widget:</h3>
<div>
<ul style="text-align: left;">
<li>Go To <a href="http://www.linkwithin.com/" target="_blank">LinkWithin</a></li>
</ul>
</div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Fill Your Details in the blue box as shown in the fig. below.</li>
</ul>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJS75ATh44M8voSyP9KWA22wqY3BWtk-GSH2YLY5137b9pquErZf7mzxvRBfmSBCXwi1o-804-Iznt1TjEqJFUoDIYsFSrXUbpxt14BBvMSeOXdV-82n0PeOphyphenhyphenSlfw67E1ln-LDJvviT/s1600/related+posts+widget+by+linkwithin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Related Post Widget By LinkWithin in Your Blog" border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJS75ATh44M8voSyP9KWA22wqY3BWtk-GSH2YLY5137b9pquErZf7mzxvRBfmSBCXwi1o-804-Iznt1TjEqJFUoDIYsFSrXUbpxt14BBvMSeOXdV-82n0PeOphyphenhyphenSlfw67E1ln-LDJvviT/s320/related+posts+widget+by+linkwithin.png" title="How To Add Related Post Widget By LinkWithin in Your Blog" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li>Now Click On <b>Get Widget!</b> Button.</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li>After Clicking You will be Directed to the page having Instructions to install the Widget. The Instruction page  for different platforms are different so choose your platform carefully.</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li>Now follow the steps on the Instruction Page to Install the LinkWithin Related Posts Widget to your blog.</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li>You are Done.</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<i>Have Problems/feedback? Let me know through comments.. Also if you found the article useful Subscribe to our blog we have lots of interesting stuffs for you.</i></div>
<div>
<div>
<br /></div>
</div>
</div>

How To Add Related Post Widget By LinkWithin in Your Blog

When we talk about must-have widgets for a blog, related posts widget is among the ones that come to our mind. The related posts widge...

How To Remove Blogger Attribution (Powered By Blogger) Gadget

Kaushal Srivastava 6 Blog Customisation, Blog Gadgets, Blog Tricks, Blog Widgets, Blogger Tricks, PreToPro Blogger 23:52

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSPfBg0DpIi9BJUnUftUTsu4qB1OFdNDvCbNhmsSWQOW3G1ub_MMHa4tfE4IeZCIpnGtVDE8bV7rBrv6qmL7avpwFdQxmmbDhMSBlZjkoDPHdKt3UCprmQI-mDFSUCt7vy0ffP7l5EWAB/s1600/Remove+bloggers+attribution+gadget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSPfBg0DpIi9BJUnUftUTsu4qB1OFdNDvCbNhmsSWQOW3G1ub_MMHa4tfE4IeZCIpnGtVDE8bV7rBrv6qmL7avpwFdQxmmbDhMSBlZjkoDPHdKt3UCprmQI-mDFSUCt7vy0ffP7l5EWAB/s320/Remove+bloggers+attribution+gadget.png" width="320" /></a></div>
<br />
<br />
The blogger attribution gadget is a gadget at the footer of any blogger blog stating "Powered By Blogger". Well many bloggers don't like it and want to remove it. To remove it they first use the typical method by going to <span style="color: #444444;">Dashboard>>layout>></span> and click on edit of the attribution widget.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSPMGuDCTSAiLRH6IA_1Sznohd1bd_8P7DmGthwpVGwD4dbFdaFD8qhhMyy05G3oZuYK8hDQ4_2OI4LhgEF7r1seM_wlLAK72wGV_qFrcpmGLCEmc6Vj11e37PEhYAru8tVqvwiX2ivPE9/s1600/how-to-remove-powered-by-blogger-attribution-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSPMGuDCTSAiLRH6IA_1Sznohd1bd_8P7DmGthwpVGwD4dbFdaFD8qhhMyy05G3oZuYK8hDQ4_2OI4LhgEF7r1seM_wlLAK72wGV_qFrcpmGLCEmc6Vj11e37PEhYAru8tVqvwiX2ivPE9/s400/how-to-remove-powered-by-blogger-attribution-widget.png" width="400" /></a></div>
<br />
<br />
 But what do they find ? There is no remove button ! What to do now? Well don't worry here is the very simple procedure to delete the attribution link :-<br />
<br />
<blockquote class="tr_bq">
<span style="color: #990000;">MUST KNOW</span><br />
<br />
<b>Do removing this blogger attribution gadget Violate the terms and condition of Google's Blogger?</b><br />
<span style="color: #444444;">The answer is no! You don't violate the terms and conditions of blogger.com as there is no user agreement or any message stating that you don't have rights to modify your template or the modification of blogger template code is restricted and the attribution gadget is a part of the template. So, according to their Terms & Conditions Google have no rights to take any action against you & your blog for removing the blogger's attribution Gadget.</span></blockquote>
<br />
<br />
<h3 style="text-align: left;">
Here are the Steps to remove the attribution gadget:</h3>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Go to Your Blog's <span style="color: #444444;">Dashboard>>Template</span>.</li>
<li>Now click on edit html.</li>
<li>Tick the Expand Widget Templates.</li>
<li>Press Ctrl+f and in the find box type Attribution1</li>
<li>You will find the code given below with Attribution1 highlighted.</li>
</ul>
</div>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
<b><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><span style="color: #38761d;"><b:section class='foot' id='footer-3' showaddelement='no'> --->Do not remove this... only remove the code below..</span></span></span></b><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><b:widget id='</span></span><b><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;">Attribution1</span></span></b><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;">' locked='true' title='' type='Attribution'></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><b:includable id='main'></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><div class='widget-content' style='text-align: center;'></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><b:if cond='data:attribution != &quot;&quot;'></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><data:attribution/></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"></b:if> </span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"></div></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><br /></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"><b:include name='quickedit'/></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"></b:includable></span></span></span><span style="color: #8e7cc3;"><span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: x-small;"></b:widget></span></span></span></blockquote>
</div>
<div>
<ul style="text-align: left;">
<li>Now delete the code in blue given above. </li>
</ul>
</div>
<div>
<br /></div>
<div>
<span style="color: red;"><b>Warning:</b></span> <i>Do not remove the code in Green or else your template will not work. Also keep a backup of your template before editing.</i></div>
<div>
<i><br /></i></div>
<div>
<ul style="text-align: left;">
<li>You are done. </li>
<li>Save the changes and view your blog now.</li>
</ul>
<div>
<br /></div>
</div>
<div>
<i>Having problems?? feel free to ask me...</i></div>
</div>

How To Remove Blogger Attribution (Powered By Blogger) Gadget

The blogger attribution gadget is a gadget at the footer of any blogger blog stating "Powered By Blogger". Well many blogger...

How To Add Cool Social Sharing Widget with hover Effect?

Kaushal Srivastava 2 Blog Gadgets, Blog Widgets, Floating Gadget, Floating Widget, PreToPro Blogger, Social Buttons, Social Widgets 04:26

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxkM1-AhZii01YKazzVuN3vl_MBZOyBMuFgboR3nZH5pVZXqlXnIoSR1c57eDf0CVKAGmGpx-rsZldIKSjU3ln_Ba2-5EAoBsWiNoEKJuRz82cJWYkVr1b7d7Yg-ASK06QNBo8mQzcC4j/s1600/floating+social+bar+top.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxkM1-AhZii01YKazzVuN3vl_MBZOyBMuFgboR3nZH5pVZXqlXnIoSR1c57eDf0CVKAGmGpx-rsZldIKSjU3ln_Ba2-5EAoBsWiNoEKJuRz82cJWYkVr1b7d7Yg-ASK06QNBo8mQzcC4j/s320/floating+social+bar+top.JPG" width="278" /></a></div>
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQsz5N9D6MPYJSM3bfuBw-Ii7xNEptcbpyDpCh4l20LG4u9lqy5Q7WgGwNSDx7GB2kPx8wWBic2Zrwu6fyMlhR8DWVwfEU7DUXPwx4BnRfuA5U90il1bcubofC10hKnwGdRslcHqLScBH/s1600/floating+social+bar.JPG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" padding="10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQsz5N9D6MPYJSM3bfuBw-Ii7xNEptcbpyDpCh4l20LG4u9lqy5Q7WgGwNSDx7GB2kPx8wWBic2Zrwu6fyMlhR8DWVwfEU7DUXPwx4BnRfuA5U90il1bcubofC10hKnwGdRslcHqLScBH/s320/floating+social+bar.JPG" width="62" /></a>Today I am going to show you how to add a cool Social sharing widget with a nice hover effect (See the figure at the right) in your blogger blog. Social sharing widget is really important for any blog as it helps a blog to be socially active thus bringing you high traffic to your blog. This widget is very clean, sleek and has cool hover effect. It is well-coded and uses simple CSS and javascript coding and will also not slow your blog loading speed (<b>Recommended</b> : <a href="http://pretoproblogger.blogspot.com/2013/08/10-tips-to-increase-your-blog-loading.html" target="_blank">10 Tips To Increase your Blog loading speed.</a>)<br />
<div class="post-body entry-content" id="post-body-7556505276072292084" itemprop="description articleBody" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 1.6em; margin: 0px 0px 0.75em;">
</div>
It Contains five social buttons:<br />
<ul style="text-align: left;">
<li>Twitter</li>
</ul>
<ul style="text-align: left;">
<li>Google+</li>
</ul>
<ul style="text-align: left;">
<li>Facebook</li>
</ul>
<ul style="text-align: left;">
<li>Rss</li>
</ul>
<ul style="text-align: left;">
<li>Pinterest</li>
</ul>
<br />
For adding this widget just follow the simple steps given below-<br />
<br />
<b>Recommended</b> :<br />
<br />
<ul style="text-align: left;">
<li><a href="http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html" target="_blank">How to add the best floating social media buttons gadget in blogger (3 Designs To Choose)</a></li>
<li><a href="http://pretoproblogger.blogspot.com/2013/10/how-to-add-floating-navigation-bar-in.html" target="_blank">How to add a floating navigation bar in blogger blog?</a></li>
</ul>
<br />
<div>
<h3>
<span style="font-family: inherit;">How To Add this </span>Social Sharing Widget <span style="font-family: inherit;">:</span></h3>
</div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Go to your <b>blogger dashboard</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Select your blogger blog</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Layout </b>from Drop Down menu (shown in picture)</span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-color: white; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<span style="font-family: inherit;"><br /></span>
<br />
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">A new Window appear</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Add gadget</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">And select <b>HTML/JavaScript</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b>(shown in picture)</b></span></li>
</ul>
</div>
<div style="text-align: center;">
<span style="font-family: inherit;"><b style="background-color: white; font-size: 13px; line-height: 18px;">    </b></span><br />
<div class="separator" style="background-color: white; clear: both; font-size: 13px; line-height: 18px;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></b></div>
<span style="font-family: inherit;"><b style="background-color: white; font-size: 13px; line-height: 18px;"></b><span style="background-color: white; font-size: 13px; line-height: 18px;"></span><br style="background-color: white; font-size: 13px; line-height: 18px;" /></span>
<br />
<div style="background-color: white; font-size: 13px; line-height: 18px; text-align: left;">
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Now the box of HTML/JavaScript will appear when you click on the box.</span></li>
</ul>
</div>
<div class="separator" style="background-color: white; clear: both; font-size: 13px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></div>
<div style="text-align: left;">
<ul style="background-color: white; font-size: 13px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Now <b>paste the following code to install the gadget</b> to your blog.</span></li>
</ul>
<div style="background-color: white;">
<span style="font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
<div style="background-color: white; font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div>
<blockquote class="tr_bq" style="font-size: 13px; line-height: 18px;">
<blockquote>
<span style="background-color: white;"><style type="text/css"></span><br />
<span style="background-color: white;">ul#social {</span><br />
<span style="background-color: white;">    position: fixed;</span><br />
<span style="background-color: white;">    margin: 0px;</span><br />
<span style="background-color: white;">    padding: 0px;</span><br />
<span style="background-color: white;">    top: 10px;</span><br />
<span style="background-color: white;">    left: 0px;</span><br />
<span style="background-color: white;">    list-style: none;</span><br />
<span style="background-color: white;">    z-index:9999;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social li {</span><br />
<span style="background-color: white;">    width: 100px;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social li a {</span><br />
<span style="background-color: white;">    display: block;</span><br />
<span style="background-color: white;">    margin-left: -2px;</span><br />
<span style="background-color: white;">    width: 100px;</span><br />
<span style="background-color: white;">    height: 70px;</span><br />
<span style="background-color: white;">    background-color:#fff;</span><br />
<span style="background-color: white;">    background-repeat:no-repeat;</span><br />
<span style="background-color: white;">    background-position:center center;</span><br />
<span style="background-color: white;">    border:1px solid #AFAFAF;</span><br />
<span style="background-color: white;">    -moz-border-radius:0px 10px 10px 0px;</span><br />
<span style="background-color: white;">    -webkit-border-bottom-right-radius: 10px;</span><br />
<span style="background-color: white;">    -webkit-border-top-right-radius: 10px;</span><br />
<span style="background-color: white;">    -khtml-border-bottom-right-radius: 10px;</span><br />
<span style="background-color: white;">    -khtml-border-top-right-radius: 10px;</span><br />
<span style="background-color: white;">    -moz-box-shadow: 0px 4px 3px #000;</span><br />
<span style="background-color: white;">    -webkit-box-shadow: 0px 4px 3px #000;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social .twitter a{</span><br />
<span style="background-color: white;">     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg3LfXgl6ZjCj9Qy1-xa18z5gVVppTNBomcxZbOBQYhZ-9gQ0qyVSmSI9Jld7eoKgrTG5af5hOwB6Mn3yfpZsCIwq87Kq88uD75VGJwchCYss9-FrisdoAA4Ee0zYcrhau_9sBp4BA0Rk/s1600/Twitter.png)no-repeat;</span><br />
<span style="background-color: white;">background-position:center center;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social .googleplus a      {</span><br />
<span style="background-color: white;">    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMh_4ZBofpG_IU7WIx0MWd4Hu1MqSdUh0rU-cvsorHnaBKjkehp_6jZGaQvGPBzkIxA6wtlC__80WadJYNt_F6mUD80Wum6pnP71QI_H-GkO2U94J4_VKCCVvEWT0Xf3ixXMI89c2J3OQ/s1600/GOOGLE+PLus.png)no-repeat;</span><br />
<span style="background-color: white;">background-position:center center;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social .facebook a      {</span><br />
<span style="background-color: white;">    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9jKVu979veqCYDoY_63q-N4wHkZpomddlqZV3B_N5kISo-BtU4wV4eQh4BjxYa_hEdwjJXv-i6W0l4ry7vzo2I23MHxXu8_Y0eA9s449n1vM4Uk0XDNSQxtWqdTE1s8wANb0XNlzr8WI/s1600/Facebook.png)no-repeat;</span><br />
<span style="background-color: white;">background-position:center center;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social .rss a      {</span><br />
<span style="background-color: white;">    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsku2BlsiS-iPM1gF5TNACPsjWiLqFUKK_KDpFOCDBcTH9HbgPNE_w9I31R7WpEHHw0IIzlbGwvnnZhSZCXaC36a5vVtT_RPfwVFf9iWKh4d9anOB4JoihpQdrEXmI1OFM9T4V2oNnjQU/s1600/rss.png)no-repeat;</span><br />
<span style="background-color: white;">background-position:center center;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social .pinterest a   {</span><br />
<span style="background-color: white;">    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEq3fRFBgVZYNcBEhGrAMfma-rRPeFBXIV4Ki1_cQLJuJbhiGDQ244av-46_XeGBQnxdzZguuMoza84WienSUIqeABlCaQe0rA57uc7iV2zjQ9ZlDBIM-ibCYsisgLFHl7Sd2MEj94pg/s1600/Pinterest.png)no-repeat;</span><br />
<span style="background-color: white;">background-position:center center;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;"></style></span><br />
<code style="color: #333333; font-family: 'Courier New', monospace; margin: 0px; padding: 0px;"><span style="background-color: #ffd966;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></span></code><span style="background-color: white;"><script type='text/javascript'></span><br />
<span style="background-color: white;">$(function () {</span><br />
<span style="background-color: white;">    $('#social a').stop().animate({</span><br />
<span style="background-color: white;">        'marginLeft': '-85px'</span><br />
<span style="background-color: white;">    }, 1000);</span><br />
<span style="background-color: white;">    $('#social > li').hover(</span><br />
<span style="background-color: white;">        function () {</span><br />
<span style="background-color: white;">            $('a', $(this)).stop().animate({</span><br />
<span style="background-color: white;">                'marginLeft': '-2px'</span><br />
<span style="background-color: white;">            }, 200);</span><br />
<span style="background-color: white;">        },</span><br />
<span style="background-color: white;">        function () {</span><br />
<span style="background-color: white;">            $('a', $(this)).stop().animate({</span><br />
<span style="background-color: white;">                'marginLeft': '-85px'</span><br />
<span style="background-color: white;">            }, 200);</span><br />
<span style="background-color: white;">        }</span><br />
<span style="background-color: white;">    );</span><br />
<span style="background-color: white;">});</span><br />
<span style="background-color: white;"></script></span><br />
<span style="background-color: white;"><ul id='social'></span><br />
<span style="background-color: white;"> <li class='twitter'><a href='</span><span style="background-color: #e1704b; margin: 0px; padding: 0px;">#</span><span style="background-color: white;">' title='Twitter'></a></li></span><br />
<span style="background-color: white;"> <li class='googleplus'><a href='</span><span style="background-color: #e1704b; margin: 0px; padding: 0px;">#</span><span style="background-color: white;">' title='Google Plus'></a></li></span><br />
<span style="background-color: white;"> <li class='facebook'><a href='</span><span style="background-color: #e1704b; margin: 0px; padding: 0px;">#</span><span style="background-color: white;">' title='Facebook'></a></li></span><br />
<span style="background-color: white;"> <li class='rss'><a href='</span><span style="background-color: #e1704b; margin: 0px; padding: 0px;">#</span><span style="background-color: white;">' title='Rss'></a></li></span><br />
<span style="background-color: white;"> <li class='pinterest'><a href='</span><span style="background-color: #e1704b; margin: 0px; padding: 0px;">#</span><span style="background-color: white;">' title='Pinterest'></a></li></span><br />
<span style="background-color: white;"></ul></span></blockquote>
</blockquote>
<div style="background-color: white; font-size: 13px; line-height: 18px;">
<br /></div>
<div style="font-size: 13px; line-height: 18px;">
<span style="background-color: white;">Now you are almost done, just replace the Highlighted  </span><span style="background-color: #e1704b;">#</span><span style="background-color: white;">  with your social handles. Also if you have jquery plugin already in your blog template, delete the code highlighted in yellow (</span><span style="background-color: #ffd966; color: #333333; font-family: 'Courier New', monospace;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></span><span style="background-color: white;">) . </span></div>
<div style="font-size: 13px; line-height: 18px;">
<span style="background-color: white;"><br /></span></div>
You are done. Now Just Save Your changes.</div>
<div>
<br /></div>
<div>
<i>Having problems? Feel free to ask to me through comments section.</i></div>
</div>
</div>
</div>
</div>

How To Add Cool Social Sharing Widget with hover Effect?

Today I am going to show you how to add a cool Social sharing widget with a nice hover effect (See the figure at the right) in your bl...

How to add a floating navigation bar in blogger blog?

Kaushal Srivastava 2 Blog Gadgets, Blog tools, Blog Widgets, Navigation Bar, PreToPro Blogger 05:33

<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilb7kF00kSDe6FhdbKhLOd8NV-EWX3fxeFG_DXSadpHO0kCZmLY6B6UWrnIbbGhlb73Zeq0R3KymTsEYUzx-ZqsSaVkCCQQCzAVibYGQwngqa9mnljhVG6qOL1AWHrm7kZOedIeGYhgOTB/s1600/floating+navigation+bar1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilb7kF00kSDe6FhdbKhLOd8NV-EWX3fxeFG_DXSadpHO0kCZmLY6B6UWrnIbbGhlb73Zeq0R3KymTsEYUzx-ZqsSaVkCCQQCzAVibYGQwngqa9mnljhVG6qOL1AWHrm7kZOedIeGYhgOTB/s1600/floating+navigation+bar1.JPG" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<i>Today I am Going to post about a cool and small but useful widget. It contains five useful buttons for navigation-</i> <div>
<br /><div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV-JFo-IiyPTMxSBMbRiKnT3LWCBVTYWF9a0n3MgC5Ko_b3EhOoL_s95Uh36T_rudcw14O7NCS5f-TEfQq2kbR3NycOv9sg0rpsDJKRJCPfm-0DaS9emevEtHRMUjcxXK7IESZ5lL98Dv/s1600/floating+navigation+bar.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV-JFo-IiyPTMxSBMbRiKnT3LWCBVTYWF9a0n3MgC5Ko_b3EhOoL_s95Uh36T_rudcw14O7NCS5f-TEfQq2kbR3NycOv9sg0rpsDJKRJCPfm-0DaS9emevEtHRMUjcxXK7IESZ5lL98Dv/s200/floating+navigation+bar.png" width="78" /></a><div>
<br /></div>
<span style="color: #666666;">1.Older Posts</span></div>
<div>
<span style="color: #666666;"><br />2. Newer Posts</span></div>
<div>
<span style="color: #666666;"><br />3. Reload Page</span></div>
<div>
<span style="color: #666666;"><br />4. Home</span></div>
<div>
<span style="color: #666666;"><br />5. Back to top</span></div>
</div>
<div>
<br /></div>
<h3 style="text-align: left;">
<br />Steps to add This widget:</h3>
<div>
<br /></div>
<h3 style="text-align: left;">
<span style="font-weight: normal;">Step 1. Go to Blogger Dashboard >> Design >> Edit html and find the tag below</span></h3>
<br /><blockquote class="tr_bq">
]]></b:skin></blockquote>
<div>
<br /></div>
<div>
<h3 style="text-align: left;">
<span style="font-weight: normal;">Step 2. Paste before/above the following code:</span></h3>
<br /><blockquote class="tr_bq">
#float-menu{position:fixed;top:20%;left:0;border-top:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #CCC;background:#EEE}<br />#float-menu ul{padding:0}<br />#float-menu li{margin:5px;list-style-type:none}<br />#float-menu li,#float-menu li a{width:24px;height:24px}<br />#float-menu li a{float:left}<br />#float-menu #menu-right,#float-menu #menu-left,#float-menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQ0Za5SQAGezKsa4qNrOTcACT8xCM6HGRmRB2-GykLhfa28IsgyUXt8guj-rMiUKaKS2ofcMhDS0qR0ZMdm83CmkO1ZdPMrLNuHVxzH6VnHXkE3b853bPQQBBDxkS5ycLM7okDu2jA4Kx/s1600/float+menu.png)}<br />#float-menu #menu-right a{background-position:0 -120px}<br />#float-menu #menu-right a:hover,#float-menu #menu-right{background-position:-24px -120px}<br />#float-menu #menu-left a{background-position:0 -24px}<br />#float-menu #menu-left a:hover,#float-menu #menu-left{background-position:-24px -24px}<br />#float-menu #menu-random a{background-position:0 -48px}<br />#float-menu #menu-random a:hover{background-position:-24px -48px}<br />#float-menu #menu-home a{background-position:0 -72px}<br />#float-menu #menu-home a:hover{background-position:-24px -72px}<br />#float-menu #menu-top a{background-position:0 -96px}<br />#float-menu #menu-top a:hover{background-position:-24px -96px}</blockquote>
<div>
<br /></div>
<h3 style="text-align: left;">
<span style="font-weight: normal;">Step 3. Now find this tag:</span></h3>
<div>
<span style="font-weight: normal;"><br /></span></div>
<blockquote class="tr_bq">
<b:includable id='main' var='top'></blockquote>
<div>
<br /></div>
<h3 style="text-align: left;">
<span style="font-weight: normal;">Step 4. Just after it, add the code below:</span></h3>
<br /><br /><blockquote>
<div id='float-menu'><br /> <ul><br /><li id='menu-right'><br /><b:if cond='data:olderPageUrl'><br /><b:if cond='data:olderPageUrl != data:blog.url'><br /><a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a><br /></b:if><br /></b:if><br /></li><br /><li id='menu-left'><br /><b:if cond='data:newerPageUrl'><br /><b:if cond='data:newerPageUrl != data:blog.url'><br /><a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a><br /></b:if><br /></b:if><br /></li><br /><li id='menu-random'><br /><script type='text/javaScript'>//<![CDATA[<br />var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};<br />//]]></script><br /><script type='text/javaScript'>//<![CDATA[<br />function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'" title="Reload" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>');<br />//]]></script><br /></li><br /><li id='menu-home'><br /><a expr:href='data:blog.homepageUrl' title='Home'/><br /></li><br /><li id='menu-top'><br /><a href='#' title='Back to top' rel="nofollow"/><br /></li><br /></ul><br /></div></blockquote>
<i>Comment if you like the template... </i></div>
</div>

How to add a floating navigation bar in blogger blog?

Today I am Going to post about a cool and small but useful widget. It contains five useful buttons for navigation- 1.Older Po...

All in one subscription widget for bloggers

Kaushal Srivastava 2 Best Gadgets, Blog Gadgets, Blog Widgets, PreToPro Blogger, Social Buttons 23:13

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggzcAXWUg4tEjXyJyUgQ9MX8ZmRUh4kkpO-bRm0tQruBqY-7TyGH6TRhQqrUpH6SevZJ7HTmdL0XGKa3f_kmE_obDPSpZ8yKsc9oGvOYzVaB43o6ErypQs06lJrv0pTfKOTD1tCzrir3vI/s1600/all-in-one-subscription-box-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggzcAXWUg4tEjXyJyUgQ9MX8ZmRUh4kkpO-bRm0tQruBqY-7TyGH6TRhQqrUpH6SevZJ7HTmdL0XGKa3f_kmE_obDPSpZ8yKsc9oGvOYzVaB43o6ErypQs06lJrv0pTfKOTD1tCzrir3vI/s320/all-in-one-subscription-box-for-blogger.png" width="305" /></a></div>
<i><br /></i>
<i>Hey guys today I going to share all in one subscription box for blogger. I myself have added it in this blog. Every blogger knows that a subscription box is important as helps the visitors to stay connected to your blog. If you create a new post on your blog the visitor who have subscribed will get an email that your blog has new content and then the visitor will visit if he/she is interested. Thus it also increases your visits and makes your visitor a<a href="http://pretoproblogger.blogspot.in/2013/07/increasing-your-blog-readers.html" target="_blank"> reader of your blog.</a> And so blogger must add convincing content and subscription box so that visitors might end up subscribing your blog. And if the subscription box will have a little bit social touch it will be much better. Rather than adding social buttons and subscription box as different widgets we can add a Hybrid subscription box. Here is a good subscription box by <a href="http://windroidclub.com/" rel="nofollow" target="_blank">windroid club</a>:</i><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: left;">
Steps to add this widget:</h3>
<div>
<br /></div>
<div>
<ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Go to your <b style="box-sizing: border-box;">blogger dashboard</b></span></span></li>
</ul>
<ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Select your blogger blog</span></li>
</ul>
<ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Click on <b style="box-sizing: border-box;">Layout </b>from Drop Down menu (<b>shown in picture</b>)</span></li>
</ul>
<div>
<br /></div>
<div style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-align: center; text-decoration: none; transition: all 0.4s ease-in-out;">
<div style="text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" width="400" /></span></a></div>
</div>
<span style="font-family: inherit;"><br style="box-sizing: border-box;" /></span>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">A new Window appear</span></li>
</ul>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Click on <b style="box-sizing: border-box;">Add gadget</b></span></span></li>
</ul>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">And select <b style="box-sizing: border-box;">HTML/JavaScript</b></span></span></li>
</ul>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b style="box-sizing: border-box;">(shown in picture)</b></span></span></li>
</ul>
<span style="font-family: inherit;"><span style="box-sizing: border-box;"><b style="box-sizing: border-box; line-height: 18px;">   </b></span></span><br />
<div style="text-align: center;">
<span style="font-family: inherit;"><span style="box-sizing: border-box;"><b style="box-sizing: border-box; line-height: 18px;"><b style="box-sizing: border-box;"><a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img alt="http://pretoproblogger.blogspot.com" border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" title="http://pretoproblogger.blogspot.com" width="400" /></span></a></b></b></span></span></div>
<span style="font-family: inherit;"><b style="box-sizing: border-box; line-height: 18px;"></b></span><span style="font-family: inherit;"><br style="box-sizing: border-box;" /></span>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Now the box of HTML/JavaScript will appear when you click on the box.</span></li>
</ul>
<div>
<br /></div>
<div style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-align: center; text-decoration: none; transition: all 0.4s ease-in-out;">
<div style="text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img alt="http://pretoproblogger.blogspot.com" border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" title="http://pretoproblogger.blogspot.com" width="400" /></span></a></div>
</div>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Now <b style="box-sizing: border-box;">paste the following code to add the All in one subscription widget</b> on your blog.</span></li>
</ul>
<blockquote class="tr_bq">
<style type="text/css"><br /> #wcsub-box<br />{<br />box-shadow:1px 1px 4px  #dcdcdc;<br />-moz-box-box-shadow:1px 1px 4px  #dcdcdc;<br />-web-kit-box-shadow:1px 1px 4px  #dcdcdc;<br />-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;<br />margin-bottom:70px;<br />height:264px;<br />}<br />#wc-socico<br />{<br />height:33px;<br />border-bottom:1px solid #dcdcdc;<br />border-left:1px solid #dcdcdc;<br />border-right:1px solid #dcdcdc;<br />padding:2px;<br />background:#ffffff;<br />}<br />#wc-socicoimg<br />{<br />height:28px;<br />width:28px;<br />}<br />#wc-socico table<br />{<br />border:none;<br />}<br />#wc-rscount<br />{<br />margin-top:2px;<br />margin-right:-25px;<br />}<br /><br />#wcsub-box .wcsub-fblike { border-bottom: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 5px; background:#fff;}<br />    #wcsub-box .wcsub-email {border: 1px solid #dcdcdc; background: #f8f8f8; padding:11px;}<br />        #wcsub-box .wcsub-email h4{color: #444;font-family: Arial;font-size: 12px; margin: 0 0 10px;}<br />        #wcsub-box .wcsub-email .txt,#wcsub-box .wcsub-email .txt:focus{background:#fff; float:left; color:#777777; border:1px solid #dcdcdc; border-radius: 3px; padding: 7px 10px 8px; width: 140px;}<br />        #wcsub-box .wcsub-email .wcsub-button,#wcsub-box .wcsub-email .wcsub-button:focus{background:#222222; border:1px solid #222222; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding:7px 3px; }<br />            #wcsub-box .wcsub-email<br /> input, textarea {<br />font-family: Georgia, "Times New Roman", Times; font-size: 1em;}<br /></style><br /><br /><div id="wcsub-box"><br /><div class="wcsub-email"><br /><h4>Get FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">pretoproblogger</span>" target="_blank" style="color:#3b5998;">Email</a> | <a href="http://feeds.feedburner.com/<span style="color: red;">pretoproblogger</span>" target="_blank" style="color:orange;">RSS</a></h4><br /><form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">pretoproblogger</span>', 'popupwindow',<br /> 'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"><br /><input name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address')<br />{this.value = '';}" value="Enter your email address" class="txt" /><br /><input type="hidden" name="uri" value="<span style="color: red;">Pretoproblogger</span>" /><br /><input type="hidden" value="en_US" name="loc" /><br /><input type="submit" value="Subscribe" class="wcsub-button" /><br /><div style="clear:both;"></div><br /></form><br />    </div><br /><br /><br /><br /><div id="wc-socico"><br /><table border="0" cellspacing="0" cellpadding="0" width="298"><br /><tbody><br /><tr><br /><td valign="top" ><a href='http://feeds.feedburner.com/<span style="color: red;">pretoproblogger</span>' target='_blank' rel=nofollow' ><img id="wc-socicoimg" src="http://3.bp.blogspot.com/-KjMedajdI2w/UTtUCEg5_zI/AAAAAAAABcQ/K3qUhvOTNrA/s1600/feed.png" alt="Subcribe to our RSS feeds" /></a></td><br /><br /><td valign="top" ><a href='http://www.facebook.com/<span style="color: red;">Pretoproblogger</span>' target='_blank' rel='nofollow'><img id="wc-socicoimg" src="http://2.bp.blogspot.com/-7_3aMhrvLq4/UTtUB9H5ZyI/AAAAAAAABcM/JjZGcP7r3_I/s1600/fbb.png" alt="Join Us on Facebook" /></a></td><br /><br /><td valign="top" ><a href='<span style="color: red;">https://plus.google.com/102731179322289098765</span>' target='_blank' rel='nofollow'><img src="http://4.bp.blogspot.com/-vnYX9pKHZCU/UTtUCWa3-HI/AAAAAAAABcU/Xi7l4YF136U/s1600/gpp.png" alt="Add to Circles" id="wc-socicoimg" /></a></td><br /><br /><td valign="top" ><a href='https://twitter.com/<span style="color: red;">pretoproblogger</span>' target='_blank' rel='nofollow'><img id="wc-socicoimg" src="http://2.bp.blogspot.com/-VXfOkCT43uI/UTtUEItlzyI/AAAAAAAABck/cvROEjW1Vx8/s1600/tww.png" alt="Follow us on Twitter" /></a></td><br /><br /><td valign="top" ><p id="wc-rscount"><a href="http://feeds.feedburner.com/<span style="color: red;">PretoproBlogger</span>"><img src="http://feeds.feedburner.com/~fc/<span style="color: red;">PretoproBlogger</span>?bg=000000&amp;fg=ffffff&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p></td><br /></tr></tbody></table><br /></div><br /><br /><br /><br /><div class="wcsub-fblike"><br /><iframe src="//www.facebook.com/plugins/like.php? href=https://www.facebook.com/<span style="color: red;">Pretoproblogger</span>?fref=ts &send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href=" https://www.facebook.com/<span style="color: red;">Pretoproblogger</span>" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 16px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div><br />    </div><br /><br /><br /><br /> <a href="https://twitter.com/<span style="color: red;">pretoproblogger</span>" class="twitter-follow-button" data-show-count="true" data-lang="en-gb">Follow <span style="color: red;">@PreToProBlogger</span></a><br /><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><br /><br /><br /><br /><div class="wcgplus"><br />    <div class="g-plus" data-href="<span style="color: red;">https://plus.google.com/102731179322289098765</span>" data-width="290" data-height="131" data-theme="light"></div><br /></div><br />    </div></blockquote>
<div>
</div>
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<ul>
<li>Change all the social ids/addresses highlighted in red with your social ids/addresses</li>
</ul>
<ul>
<li>Leave the widget title blank.</li>
</ul>
<ul>
<li>Click <b>save</b></li>
</ul>
</div>
<div>
<span style="line-height: 22px;"><i>You are done now.</i></span><br />
<span style="line-height: 22px;"><i><br /></i></span>
<blockquote class="tr_bq">
<span style="line-height: 22px;"><i>Comment if you liked the subscription box...</i></span></blockquote>
</div>
</div>

All in one subscription widget for bloggers

Hey guys today I going to share all in one subscription box for blogger. I myself have added it in this blog. Every blogger knows that a...

How To Add Infinite Scrolling in Blogger

Kaushal Srivastava 5 Blog Gadgets, Blog Tips, Blog Tricks, Blog Widgets, PreToPro Blogger 09:40

<div dir="ltr" style="text-align: left;" trbidi="on">
<i><br /></i>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTiC1LxhR4cEEzn2hSJKzIwh76YYdnrM4eIHDvDH-Ct1V5iixmOE4-905Bd1za4ouh2xEmwqRXnDSy0PvPJvTN8gicjlrn8AAWKIneBCsgdJtIaGev0PZ198BopSM6V8mSpiXd1hA_SzL/s1600/load+more+post+infinite+scrolling+in+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTiC1LxhR4cEEzn2hSJKzIwh76YYdnrM4eIHDvDH-Ct1V5iixmOE4-905Bd1za4ouh2xEmwqRXnDSy0PvPJvTN8gicjlrn8AAWKIneBCsgdJtIaGev0PZ198BopSM6V8mSpiXd1hA_SzL/s400/load+more+post+infinite+scrolling+in+blogger.jpg" width="400" /></a></div>
<i><br /></i>
<i><br /></i>
<i>Infinite scrolling refers to loading contents of blog without actually refreshing the blog page. When the user scrolls down the blog older posts are loaded. It is a very good method to decrease your blog bounce rate as the visitor does not have to leave the page. </i><br />
<i><br /></i>
<b><a href="http://flatui.blogspot.in/" target="_blank">View Infinite Scrolling Demo :</a></b> <a href="http://flatui.blogspot.in/">http://flatui.blogspot.in/</a><br />
<br />
Here are the steps for adding a code in blogger for infinite scrolling:<br />
<br />
<ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Go to your <b style="box-sizing: border-box;">blogger dashboard</b></span></span></li>
</ul>
<ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Select your blogger blog</span></li>
</ul>
<ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Click on <b style="box-sizing: border-box;">Layout </b>from Drop Down menu (<b>shown in picture</b>)</span></li>
</ul>
<div>
<br /></div>
<div style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-align: center; text-decoration: none; transition: all 0.4s ease-in-out;">
<div style="text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" width="400" /></span></a></div>
</div>
<span style="font-family: inherit;"><br style="box-sizing: border-box;" /></span>
<br />
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">A new Window appear</span></li>
</ul>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Click on <b style="box-sizing: border-box;">Add gadget</b></span></span></li>
</ul>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">And select <b style="box-sizing: border-box;">HTML/JavaScript</b></span></span></li>
</ul>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b style="box-sizing: border-box;">(shown in picture)</b></span></span></li>
</ul>
<span style="font-family: inherit;"><span style="box-sizing: border-box;"><b style="box-sizing: border-box; line-height: 18px;">   </b></span></span><br />
<div style="text-align: center;">
<span style="font-family: inherit;"><span style="box-sizing: border-box;"><b style="box-sizing: border-box; line-height: 18px;"><b style="box-sizing: border-box;"><a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img alt="http://pretoproblogger.blogspot.com" border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" title="http://pretoproblogger.blogspot.com" width="400" /></span></a></b></b></span></span></div>
<span style="font-family: inherit;"><b style="box-sizing: border-box; line-height: 18px;"></b></span><span style="font-family: inherit;"><br style="box-sizing: border-box;" /></span>
<br />
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Now the box of HTML/JavaScript will appear when you click on the box.</span></li>
</ul>
<div>
<br /></div>
<div style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-align: center; text-decoration: none; transition: all 0.4s ease-in-out;">
<div style="text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img alt="http://pretoproblogger.blogspot.com" border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" title="http://pretoproblogger.blogspot.com" width="400" /></span></a></div>
</div>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Now <b style="box-sizing: border-box;">paste the following code to add the Infinite Scrolling Feature</b> on your blog.</span></li>
</ul>
<div>
<br />
<blockquote class="tr_bq">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><br />
<script type='text/javascript'><br />
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");<br />
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();150>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=<br />
a('<a href="javascript:;">Load more posts</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkzEjjWCL-sMidgVLjbzbO267XlJw1meYUzcHiy5lssehE3Ih3ZZT9OcMPgwjHd-ING1AA1idxjRDST9BrgaOJXTlNYekHzzow3L0T_b2kyliOyH7dYoSnSk4tODjQVAn4ywbDMIhUavi/s32/ajax-loader.gif" style="display: none;">');f.scroll(k);b=a('<div style="text-align: center; font-size: 150%;"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);<br />
 </script></blockquote>
</div>
<div>
<br />
<ul style="text-align: left;">
<li>Leave the widget title blank.</li>
</ul>
<ul style="text-align: left;">
<li>Click <b>save</b></li>
</ul>
</div>
<div>
<span style="line-height: 22px;"><i>You are done now.</i></span></div>
<br />
<br /></div>

How To Add Infinite Scrolling in Blogger

Infinite scrolling refers to loading contents of blog without actually refreshing the blog page. When the user scrolls down the blog o...

How to add the best floating social media buttons gadget in blogger (3 Designs To Choose)

Kaushal Srivastava 207 Blog Gadgets, Blog Widgets, Floating Gadget, PreToPro Blogger, Social Buttons 07:41

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xh-p7uS_J_syubNud57za-RiR4oxXji2qZ3xGs4D4CtxpU7w04K0vu7sqz8vjV_lefnhsWaGcdsad3DgOJfk43Mq_juSXNiGFfimzXnkaUT_RfS0HBdB6u5eQbT2j7fXJX6uAQuKNDbj/s1600/social.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xh-p7uS_J_syubNud57za-RiR4oxXji2qZ3xGs4D4CtxpU7w04K0vu7sqz8vjV_lefnhsWaGcdsad3DgOJfk43Mq_juSXNiGFfimzXnkaUT_RfS0HBdB6u5eQbT2j7fXJX6uAQuKNDbj/s400/social.jpg" width="400" /></span></a></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<i><span style="font-family: inherit;">Here is the best (for me) floating social media buttons gadget that have a clean and simple design. Many Professional blogger too use this gadget..</span></i><br />
<div>
<span style="font-family: inherit;"><br /></span></div>
<h2 style="text-align: left;">
<i><span style="font-family: inherit;">Design 1: </span></i></h2>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsV8rOsW_3X6I-qrwUR6JSAs_jnqEKXGYFmtho4Ne_Mm0txCajni8AoyvSy7DbtA-RTHrXR2Dyjyknjw7L8AffhZ2nAuk3PQq4bp_pDQs8_8Ahm8PGddhyphenhyphenqLsTrA-U5Dt_KqYcBvK26Isg/s1600/social+gadget+design+1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsV8rOsW_3X6I-qrwUR6JSAs_jnqEKXGYFmtho4Ne_Mm0txCajni8AoyvSy7DbtA-RTHrXR2Dyjyknjw7L8AffhZ2nAuk3PQq4bp_pDQs8_8Ahm8PGddhyphenhyphenqLsTrA-U5Dt_KqYcBvK26Isg/s200/social+gadget+design+1.jpg" width="63" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit;">Click to Enlarge</span></td></tr>
</tbody></table>
<span style="font-family: inherit;"><br /></span>
<br />
<div>
<h3 style="text-align: left;">
<span style="font-family: inherit;">How To Add It:</span></h3>
</div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Go to your <b>blogger dashboard</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Select your blogger blog</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Layout </b>from Drop Down menu (shown in picture)</span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<span style="font-family: inherit;"><br /></span>
<br />
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">A new Window appear</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Add gadget</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">And select <b>HTML/JavaScript</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b>(shown in picture)</b></span></li>
</ul>
</div>
<div style="text-align: center;">
<span style="font-family: inherit;"><b style="background-color: white; font-size: 13px; line-height: 18px;">    </b></span><br />
<div class="separator" style="background-color: white; clear: both; font-size: 13px; line-height: 18px;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></b></div>
<span style="font-family: inherit;"><b style="background-color: white; font-size: 13px; line-height: 18px;"></b><span style="background-color: white; font-size: 13px; line-height: 18px;"></span><br style="background-color: white; font-size: 13px; line-height: 18px;" /></span>
<br />
<div style="background-color: white; font-size: 13px; line-height: 18px; text-align: left;">
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Now the box of HTML/JavaScript will appear when you click on the box.</span></li>
</ul>
</div>
<div class="separator" style="background-color: white; clear: both; font-size: 13px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></div>
<div style="background-color: white; text-align: left;">
<ul style="font-size: 13px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Now <b>paste the following code to install the gadget</b> to your blog.</span></li>
</ul>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div style="font-size: 13px; line-height: 18px;">
<h3 style="text-align: left;">
<span style="font-family: inherit;">Code For Design 1:</span></h3>
</div>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div style="font-size: 13px; line-height: 18px;">
<blockquote class="tr_bq">
<span style="font-family: inherit;"><br /><div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;"><br /><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a><br /><a class="addthis_button_tweet" tw:count="vertical"></a><br /><a class="addthis_button_google_plusone" g:plusone:size="tall"></a><br /><a class="addthis_counter"></a><a href="</span>http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html<span style="font-family: inherit;">">Widget</a><br /></div><br /><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script><br /> </span></blockquote>
</div>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<h2 style="text-align: left;">
<i><span style="font-family: inherit;">Design 2:</span></i></h2>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="font-size: 13px; line-height: 18px; margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3mzl_Luo12T0PWNPUyrY5ajCV-_dbE_SO-BalJ6_VFPdL6r4QHPM8pjngblT5xjMNQeY6V5jMU2mhGuzfopcAJs2Giw-HMtYt3drdKlph-DfHo9Z7EEcyMWSMz5e6MztKCWkkl03vv0T/s1600/social+gadget+design+2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3mzl_Luo12T0PWNPUyrY5ajCV-_dbE_SO-BalJ6_VFPdL6r4QHPM8pjngblT5xjMNQeY6V5jMU2mhGuzfopcAJs2Giw-HMtYt3drdKlph-DfHo9Z7EEcyMWSMz5e6MztKCWkkl03vv0T/s200/social+gadget+design+2.jpg" width="63" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit;">Click to Enlarge</span></td></tr>
</tbody></table>
<h3 style="text-align: left;">
<span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">How To Add It:</span></h3>
<div>
<div style="font-size: medium; line-height: normal;">
<span style="font-family: inherit;"><br /></span></div>
<div>
<ul style="font-size: medium; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Go to your <b>blogger dashboard</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Select your blogger blog</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Layout </b>from Drop Down menu (shown in picture)</span></li>
</ul>
<div class="separator" style="clear: both; font-size: medium; line-height: normal; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></div>
<div class="separator" style="clear: both; font-size: medium; line-height: normal; text-align: center;">
</div>
<div style="font-size: medium; line-height: normal;">
<span style="font-family: inherit;"><br /></span>
<br />
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">A new Window appear</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Add gadget</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">And select <b>HTML/JavaScript</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b>(shown in picture)</b></span></li>
</ul>
</div>
<div style="text-align: center;">
<span style="font-family: inherit;"><b style="font-size: 13px; line-height: 18px;">    </b></span><br />
<div class="separator" style="clear: both; font-size: 13px; line-height: 18px;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></b></div>
<span style="font-family: inherit;"><b style="font-size: 13px; line-height: 18px;"></b><span style="font-size: 13px; line-height: 18px;"></span><br style="font-size: 13px; line-height: 18px;" /></span>
<br />
<div style="font-size: 13px; line-height: 18px; text-align: left;">
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Now the box of HTML/JavaScript will appear when you click on the box.</span></li>
</ul>
</div>
<div class="separator" style="clear: both; font-size: 13px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></div>
<div style="text-align: left;">
<ul style="font-size: 13px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Now <b>paste the following code to install the gadget</b> to your blog.</span></li>
</ul>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
<div>
<h3 style="text-align: left;">
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;">Code For Design 2:</span></span></h3>
</div>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"></span></span><br />
<blockquote class="tr_bq">
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;"></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_facebook"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_twitter"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_delicious"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_pinterest_share"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_digg"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_orkut"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_google_plusone_share"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_myspace"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_compact"></a><h6></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a href="http://</span></span><span style="font-size: 13px; line-height: 18px;">http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html</span><span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;">">Widget</a></h6></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"></div></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"> </span></span></blockquote>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;">
</span></span></div>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
<h2 style="text-align: left;">
<span style="font-family: inherit; font-size: large;"><span style="line-height: 18px;"><i>Design 3 :</i></span></span></h2>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8usf48TJsRv2xWOXNmmTpo5_gPAunZm8vdl-WuNTwMlYysL_i4oaBR64A1YwGDbsPuZrbeU8HAPxqXT9uV1jWLnwfLdp7amJsGD6dWji-aEotPk-HcMuILXSsT8xxeCfty4daLUZrxll/s1600/social+gadget+design+3.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8usf48TJsRv2xWOXNmmTpo5_gPAunZm8vdl-WuNTwMlYysL_i4oaBR64A1YwGDbsPuZrbeU8HAPxqXT9uV1jWLnwfLdp7amJsGD6dWji-aEotPk-HcMuILXSsT8xxeCfty4daLUZrxll/s200/social+gadget+design+3.jpg" width="63" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit;">Click to Enlarge</span></td></tr>
</tbody></table>
<span style="font-family: inherit;"><br /></span>
<br />
<div>
<div>
<h3 style="text-align: left;">
<span style="font-family: inherit;">How To Add It:</span></h3>
</div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Go to your <b>blogger dashboard</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Select your blogger blog</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Layout </b>from Drop Down menu (shown in picture)</span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<span style="font-family: inherit;"><br /></span>
<br />
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">A new Window appear</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Add gadget</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">And select <b>HTML/JavaScript</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b>(shown in picture)</b></span></li>
</ul>
</div>
<div style="text-align: center;">
<span style="font-family: inherit;"><b style="font-size: 13px; line-height: 18px;">    </b></span><br />
<div class="separator" style="clear: both; font-size: 13px; line-height: 18px;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></b></div>
<span style="font-family: inherit;"><b style="font-size: 13px; line-height: 18px;"></b><span style="font-size: 13px; line-height: 18px;"></span><br style="font-size: 13px; line-height: 18px;" /></span>
<br />
<div style="font-size: 13px; line-height: 18px; text-align: left;">
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Now the box of HTML/JavaScript will appear when you click on the box.</span></li>
</ul>
</div>
<div class="separator" style="clear: both; font-size: 13px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></div>
<div style="text-align: left;">
<ul style="font-size: 13px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Now <b>paste the following code to install the gadget</b> to your blog.</span></li>
</ul>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div style="font-size: 13px; line-height: 18px;">
<h3 style="text-align: left;">
<span style="font-family: inherit;">Code for Design 3:</span></h3>
</div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<blockquote class="tr_bq">
<span style="font-size: x-small;"><span style="font-family: inherit;"><br /><div class="addthis_toolbox addthis_floating_style addthis_16x16_style" style="left:50px;top:50px;"><br /><a class="addthis_button_facebook"></a><br /><a class="addthis_button_twitter"></a><br /><a class="addthis_button_delicious"></a><br /><a class="addthis_button_pinterest_share"></a><br /><a class="addthis_button_digg"></a><br /><a class="addthis_button_orkut"></a><br /><a class="addthis_button_google_plusone_share"></a><br /><a class="addthis_button_myspace"></a><br /><a class="addthis_button_compact"></a><h6><br /><a href="</span><span style="line-height: 18px;">http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html</span><span style="font-family: inherit;">">Widget</a></h6><br /></div><br /><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script><br /> </span></span></blockquote>
</div>
</div>
</div>
</div>
</div>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
</div>
</div>
</div>
</div>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">
<br /></div>
</div>
</div>
</div>
</div>
<br />
<script type="text/javascript">
ch_fluidH = 1;
ch_nump = "3";
ch_client = "pretoproblogger";
ch_width = 600;
ch_height = "auto";
ch_type = "mpu";
ch_sid = "Chitika Default";
ch_color_site_link = "000000";
ch_color_title = "000000";
ch_color_border = "FFFFFF";
ch_color_text = "000000";
ch_color_bg = "FFFFFF";
</script>
<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
</script></div>

How to add the best floating social media buttons gadget in blogger (3 Designs To Choose)

Here is the best (for me) floating social media buttons gadget that have a clean and simple design. Many Professional blogger too use ...

Advertise Here

Customise Blogger Official Contact Form Gadget by using Dynamic CSS

How To Add Related Post Widget By LinkWithin in Your Blog

How To Remove Blogger Attribution (Powered By Blogger) Gadget

How To Add Cool Social Sharing Widget with hover Effect?

How to add a floating navigation bar in blogger blog?

All in one subscription widget for bloggers

How To Add Infinite Scrolling in Blogger

How to add the best floating social media buttons gadget in blogger (3 Designs To Choose)

Get FREE updates on your Email | RSS

Popular Posts

Comments

Blog Archive