Helper Bloggerss

Some Important Scripts URL's Update Notice

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoOj6DsZSOqHOJyzb8jsmabmOC_NED75YiZpI0rh9Qculz1hv82EJLzwpBFGU9dwqsO5f9KLnhrcgmmLqVzhMbAV_bPveTVXCeaxlt-pGJ46SKmqksERjM9NBvm5voygCQQBdp6-x5DH8/s1600/update.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoOj6DsZSOqHOJyzb8jsmabmOC_NED75YiZpI0rh9Qculz1hv82EJLzwpBFGU9dwqsO5f9KLnhrcgmmLqVzhMbAV_bPveTVXCeaxlt-pGJ46SKmqksERjM9NBvm5voygCQQBdp6-x5DH8/s1600/update.png" /></a>I have to update my some of scrips URL's because of some hosting reason,I have used up the montlhy bandwidth provided by the hosting provider that's why I can't get access to my scripts.First of all <b>I want to say SORRY :( to all my readers or gadgets users who are facing problems because of this</b>,I promise you that it will not happen again in the future at least for 2 years,because I have finally signed up for hosting plan for 2 years  :) Beacuse of this I also was in tension from last 2 days because I have to update my nearly 20 to 25 scripts and demo URL,s :( Below I am giving update notice for all that widgets/gadgets/drop down menus and pop up widget which has been updated,check them below weather you are using any one of them or not,If you are using then simply follow my simple steps and your widget/gadget will work again (It takes 2-5 min).I hope all of you will support me :)</div>
<br />
<h4>
Update For "Popup Email Subscribe Box"</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0q0fjvd58u7pDqzrg_gcnAc7m4ANXHqYcIPjUZMxR5_iBJvMBBCki9QBfxPGGEq3BiOF-HxxLeg6gVXUXyYY6CnLs6D2BEkYKhZviXyJTR8GOoCvj-dhOEGZvO5w74-hvjC_0c7zi9h8/s320/jquery-email-subscribe-box-pop-up-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0q0fjvd58u7pDqzrg_gcnAc7m4ANXHqYcIPjUZMxR5_iBJvMBBCki9QBfxPGGEq3BiOF-HxxLeg6gVXUXyYY6CnLs6D2BEkYKhZviXyJTR8GOoCvj-dhOEGZvO5w74-hvjC_0c7zi9h8/s320/jquery-email-subscribe-box-pop-up-for-blogger.png" /></a></div>
<br />
<br />
<ol style="text-align: left;">
<li>First go to <a href="http://helperbloggerss.blogspot.com/2012/05/add-pop-up-email-subscribe-box-with.html" target="_blank">original post</a>. (I have already updated)</li>
<li>Simply copy all the code from that tutorial</li>
<li>Now go to <b>Blogger Dashboard > Layout</b></li>
<li>Click on <b>Edit Icon (Small Wrench Icon)</b> of the tab where you have added this gadget</li>
<li>Paste the code and save it. (Don't forgot to replace my username with yours)</li>
</ol>
</div>
<br />
<h4>
Update For "Related Post With Image Thumbnail"</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9B569YXW639ho5TvzpMIf-bxVhie3ReVomoyqLYxAu8pMAUEt2D9y2j5yA_NO9ZNE6PBfXdI09ta7Zm6-RODfQWlfUegfjQA6gaAc-VB6VVGOSQAfvDzIoTqk6S27mUWqrYOz6jpA_cg/s1600/related-posts-with-image-thumbnail-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9B569YXW639ho5TvzpMIf-bxVhie3ReVomoyqLYxAu8pMAUEt2D9y2j5yA_NO9ZNE6PBfXdI09ta7Zm6-RODfQWlfUegfjQA6gaAc-VB6VVGOSQAfvDzIoTqk6S27mUWqrYOz6jpA_cg/s400/related-posts-with-image-thumbnail-for-blogger.png" width="400" /></a></div>
<br />
<br />
<ol style="text-align: left;">
<li>Go to <b>Blogger Dashboard > Template</b></li>
<li>Click on<b> Edit HTML</b></li>
<li>Hit <b>Proceed</b></li>
<li>Find below code in your template,</li>
</ol>
<br />
<br />
<blockquote>
<script src='http://helperblogger.webs.com/files/hb-related-posts.js' type='text/javascript'/></script></blockquote>
<br />
carefully replace it with below code<br />
<br />
<blockquote>
<script src='http://code.helperblogger.com/hb-related-posts.js' type='text/javascript'/></script></blockquote>
<br />
Now save your template and you are done.</div>
<br />
<h4>
Update For "Smooth Multi Level Drop Down Menu - V2"</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIX9VnB592ttc1ptyhJFLH7HBVCw7oRyc45mWOAK-G49rBQ7vZOC4VkLANHZw3Ko_-gukjk2kdSqYy8gN6XQ9k5xDnYvP69U2Fa5UM1oa8y0wsvHfdHsEJyIir5OSoy5BYuh9BZcqsL_c/s1600/smooth-jquery-multilevel-drop-down-menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIX9VnB592ttc1ptyhJFLH7HBVCw7oRyc45mWOAK-G49rBQ7vZOC4VkLANHZw3Ko_-gukjk2kdSqYy8gN6XQ9k5xDnYvP69U2Fa5UM1oa8y0wsvHfdHsEJyIir5OSoy5BYuh9BZcqsL_c/s400/smooth-jquery-multilevel-drop-down-menu.jpg" width="400" /></a></div>
<br />
<ol style="text-align: left;">
<li>Now go to <b>Blogger Dashboard > Layout</b></li>
<li>Click on <b>Edit Icon (Small Wrench Icon)</b> of the tab where you have added this menu</li>
<li>Now find below code in it,</li>
</ol>
<br />
<blockquote>
<script type="text/javascript" src="http://helperblogger.webs.com/files/hb-smooth-menu.js"><br />
</script></blockquote>
<br />
carefully replace the above all code with below code,<br />
<br />
<blockquote>
<script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"><br />
</script></blockquote>
<br />
Now find below image URL<br />
<br />
<blockquote>
http://helperblogger.webs.com/images/menu-bg.png</blockquote>
<br />
carefully replace above all image URL with below image URL,<br />
<br />
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwfpnRgY-EqpEoiuU_V67kc5un77cN4zkJh5vFM5TvtewRxMtNd0u6Df8BXR7AdS-I_sodKlDsE8g-_VigMbAawGW2HCzgSa7ErLV3GJ8MaCxaztaSPVMYOv9GrYz6KEuuenoIghP2Od0/s1600/menu-bg.png</blockquote>
<br />
Now click on Save button and you are done.<br />
<br />
<h4>
Update For "jQuery Popup For Mashable Style Widget (V2)"</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAEbK5he1Bu20w_I-WdW-FOoBuVKe8UZivjl31j8kpFJ5S1TzpHR2KAHn-NB3Yz2oKCsXask8LrU84MU0Tn6vpjdU9BB1SSXvUo5dKd4zfioHFLAn9zySX4sgASrm9TSKrXS_cU2bfHdU/s400/jQuery-popup-for-mashable-style-widget-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAEbK5he1Bu20w_I-WdW-FOoBuVKe8UZivjl31j8kpFJ5S1TzpHR2KAHn-NB3Yz2oKCsXask8LrU84MU0Tn6vpjdU9BB1SSXvUo5dKd4zfioHFLAn9zySX4sgASrm9TSKrXS_cU2bfHdU/s320/jQuery-popup-for-mashable-style-widget-for-blogger.png" width="320" /></a></div>
<br />
<ol style="text-align: left;">
<li>Now go to <b>Blogger Dashboard > Layout</b></li>
<li>Click on  <b>Edit Icon (Small Wrench Icon)</b>  of the tab where you have added this gadget</li>
<li>Now find below code in it,</li>
</ol>
</div>
<br />
<blockquote>
<link rel="stylesheet" href="http://helperblogger.webs.com/colorbox-css-code-helperblogger.css"/></blockquote>
<br />
replace it with below code,<br />
<br />
<blockquote>
<link rel="stylesheet" href="http://code.helperblogger.com/colorbox-css-code-helperblogger.css"/></blockquote>
<br />
Now find below code,<br />
<br />
<blockquote>
<script src="http://helperblogger.webs.com/files/jquery.colorbox.js"></script> </blockquote>
<br />
replace above all code with below,<br />
<br />
<blockquote>
<script src="http://code.helperblogger.com/jquery.colorbox.js"></script> </blockquote>
<br />
Now save your gadget and you are done. <b>(This gadget set cookies in your browser that's why it will not appear on your blog when you visit,just clear your browser cookies and caches and visit your blog)</b><br />
<br />
<h4>
Update For "Cute Custom Facebook Like Box"</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2udpYg2tAKmXla0DEIQx4Eohfrn7aS5M436uv5dxwCwtbVRdX2NanNGkfpzVSB0nGeloU1NZsWcG-r9gijkjHAppeEsc_ORK5b-ZOAaUVVWqqIQI9Z8pM1-2gH7-qL8xxCWh9_gBQg8/s1600/cute-custom-facebook-like-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2udpYg2tAKmXla0DEIQx4Eohfrn7aS5M436uv5dxwCwtbVRdX2NanNGkfpzVSB0nGeloU1NZsWcG-r9gijkjHAppeEsc_ORK5b-ZOAaUVVWqqIQI9Z8pM1-2gH7-qL8xxCWh9_gBQg8/s1600/cute-custom-facebook-like-box.png" /></a></div>
<br />
<br />
<ol style="text-align: left;">
<li>Go to <b>Blogger Dashboard > Layout</b></li>
<li>Click on <b>Edit Icon (Small Wrench Icon)</b> on the tab where you have added this gadget</li>
<li>Find below code in it,</li>
</ol>
<br />
<br />
<blockquote>
http://code.helperblogger.com/fb-like-box-helperblogger.css</blockquote>
<br />
carefully replace all above URL with below one<br />
<br />
<blockquote>
http://code.helperblogger.com/fb-like-box-helperblogger.css</blockquote>
<br />
save your gadget and you are done</div>
<br />
<h4>
Update For "Awesome jQuery Popup For Facebook Like Box - V5"</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcTagm1kEIRuxnrNjdhI6DQ27VAviSA19cQFIIhpWBnpDmF98QPpTHCW1Y6dn4_tHP6b3SjPP6plOVK0Pxrb4bRgsVijaftnd4r7z3Pl3RgGJAabNmgQOtFyYufLdn-EsmMJibh1i3Mpc/s400/facebook-pop-up-from-helper-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcTagm1kEIRuxnrNjdhI6DQ27VAviSA19cQFIIhpWBnpDmF98QPpTHCW1Y6dn4_tHP6b3SjPP6plOVK0Pxrb4bRgsVijaftnd4r7z3Pl3RgGJAabNmgQOtFyYufLdn-EsmMJibh1i3Mpc/s320/facebook-pop-up-from-helper-blogger.jpg" width="298" /></a></div>
<br />
<ol style="text-align: left;">
<li>Go to <b>Blogger Dashboard > Layout</b></li>
<li>Click on <b>Edit Icon (Small Wrench Icon)</b> on the tab where you have added this gadget</li>
<li>Find below code in it,</li>
</ol>
<br />
<blockquote>
<script src="http://helperblogger.webs.com/files/jquery.colorbox.js"></script> </blockquote>
<br />
replace above code with below code<br />
<br />
<blockquote>
<script src="http://code.helperblogger.com/jquery.colorbox.js"></script> </blockquote>
<br />
Save your gadget and you are done.</div>
<br />
<h4>
Update For "Scrolling/Ticker Recent Post Gadget"</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KaViFw_CJdQblTEqzrTlCK0EhO5MpfgpxTgYbMfh8zUY-2moIqbN9s_nJMGEarlYRuEOqtARBEhpTzQ9mWF-YjSrp75rfCfl9bToqW7aPw36UlxemWyys_-FYOW8gigkbuaPgxS2n10/s1600/scrolling-recent-posts-widget-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KaViFw_CJdQblTEqzrTlCK0EhO5MpfgpxTgYbMfh8zUY-2moIqbN9s_nJMGEarlYRuEOqtARBEhpTzQ9mWF-YjSrp75rfCfl9bToqW7aPw36UlxemWyys_-FYOW8gigkbuaPgxS2n10/s1600/scrolling-recent-posts-widget-for-blogger.png" /></a></div>
<br />
<ol style="text-align: left;">
<li>Go to <b>Blogger Dashboard > Layout</b></li>
<li>Click on <b>Edit Icon (Small Wrench Icon)</b> on the tab where you have added this gadget</li>
<li>Find below code in it,</li>
</ol>
<br />
<blockquote>
<script style='text/javascript' src='http://helperblogger.webs.com/Files/hb-jquery-ticker.js'></script></blockquote>
<br />
replace it with below code,<br />
<br />
<blockquote>
<script style='text/javascript' src='http://code.helperblogger.com/hb-jquery-ticker.js'></script></blockquote>
<br />
now find below code<br />
<br />
<blockquote>
<script style='text/javascript' src='http://helperblogger.webs.com/Files/hb-recentposts.js'></script></blockquote>
<br />
replace it with below code,<br />
<br />
<blockquote>
<script style='text/javascript' src='http://code.helperblogger.com/hb-recentposts.js'></script></blockquote>
<br />
Now save your gadget and you are done.<br />
<br />
<h4>
Sorry About That :(</h4>
<i><b><span style="font-family: inherit;">If you have faced any problem because of this then again Sorry :( Also if you have noticed same problem (in script or in any demo) then please immediately contact me,I hope all of you will support me.</span></b></i></div>

Some Important Scripts URL's Update Notice

I have to update my some of scrips URL's because of some hosting reason,I have used up the montlhy bandwidth provided by the host...

Add Beautiful Social Sharing Widget Just Below Of Blogger Posts

Unknown 0 Blogger Widgets, Social Media 00:05

<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;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidgwavaIhFd33WyCUEix4NqEYnP1r7A61M5GKcVrUcP_RgyySo_SqO5t3XwOlQl_Dyh3ce8UwGOL-Yg1pttSI2FSGd51wWgl27PXXc-FDOCZBOs77ecPxiwh9Hk9r84o0k-2zG1vyO5J0/s1600/beautiful-social-sharing-widget-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidgwavaIhFd33WyCUEix4NqEYnP1r7A61M5GKcVrUcP_RgyySo_SqO5t3XwOlQl_Dyh3ce8UwGOL-Yg1pttSI2FSGd51wWgl27PXXc-FDOCZBOs77ecPxiwh9Hk9r84o0k-2zG1vyO5J0/s1600/beautiful-social-sharing-widget-for-blogger.png" /></a></div>
<br />
Social bookmarking gadgets are the easiest ways to boost traffic on your blog and earn more money.Till today we have shared many kind social sharing and bookmarking widgets but this one is little different from all of them because each button has a different background.This button contains a<a href="http://helperbloggerss.blogspot.com/2012/04/add-twitter-tweet-button-just-below-of.html" target="_blank"> twitter tweet button</a>,<a href="http://www.helperblogger.com/2012/05/add-facebook-like-button-to-blogger.html" target="_blank">facebook like button </a>and google +1 button also the installation of the widget is one step installation you just have to add some piece of code in your template.If you want to see the demo of widget then scroll down,you will find the demo at the bottom of the post,also don't forgot to use them :) Now without waiting anymore let's see how to add it to blogger blog.</div>
<br />
<h3>
How to Add This Widget To Blogger?</h3>
<div>
<br />
<ol style="text-align: left;">
<li>Go to <b>Blogger Dashboard > Template</b></li>
<li><b>Take a backup of your template</b></li>
<li>Click on <b>Edit HTML</b></li>
<li>Hit <b>Proceed</b> button</li>
<li><b>Check Expand Widget Template checkbox.</b></li>
<li>Find below code in your template,</li>
</ol>
</div>
<br />
<pre class="brush:html"><div class='post-footer-line post-footer-line-1'/></pre>
<br />
add below piece of code just above it,<br />
<br />
<pre class="brush: css,html"><b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqi3zime9EMeW2IUVJrt2MHX8HJ2UyyDliRvwp3Dp-hL-Nt5AZ-CutW5JkeIHmd19hSGmdvyadXIIvBRfPMAa7bybh7qEbwkHOzFdI_yQudhTKnkXuwE65YlwlyTlWvHf_gGq6xI1K88o/s1600/helperblogger.com-sharing-widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;
}

.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;
}

.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;
}

.promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
    <div class='promote_post_bg'>
        <div class='promote_twitter'>
            <a class='twitter-share-button' data-via='helperblogger' href='https://twitter.com/share'>Tweet</a>
            <script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
            </script>
        </div>
        <div class='promote_facebook'>
       <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'
                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>
            <div>
                <b:if cond='data:post.isFirstPost'>
                    <script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                    </script>
                </b:if>
                            </div>
        </div>
        <div class='promote_google'>
            <g:plusone annotation="none" size='medium'></g:plusone>
            <script type='text/javascript'>
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
            </script>
        </div>
    </div>
</b:if></pre>
<br />
<div>
</div>
<br />
Now save your template and you are done.<br />
<br />
I hope all of you will surely like this widget.Enjoy Buddies :) hAvE a NiCe DaY....<br />
<br />
                                                                     <span style="font-family: Georgia, 'Times New Roman', serif; font-size: large;"><b><i>Demo ?</i></b></span><br />
<br />
<style>.promote_post_bg {     height: 103px;     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqi3zime9EMeW2IUVJrt2MHX8HJ2UyyDliRvwp3Dp-hL-Nt5AZ-CutW5JkeIHmd19hSGmdvyadXIIvBRfPMAa7bybh7qEbwkHOzFdI_yQudhTKnkXuwE65YlwlyTlWvHf_gGq6xI1K88o/s1600/helperblogger.com-sharing-widget.png) 0 -7px no-repeat;     width: 500px;     margin-left: 65px; }   .promote_twitter {     width: 130px;     height: 38px;     float: left;     margin: 0 39px 0 0;     padding: 65px 0 0 13px;     text-align: center; }   .promote_facebook {     width: 115px;     height: 40px;     float: left;     margin: 0 39px 0 0;     padding: 63px 0 0 28px;     text-align: center; }   .promote_google {     width: 65px;     height: 40px;     float: left;     margin: 0 39px 0 0;     padding: 65px 0 0 28px;     text-align: center; } </style><br />
<div class="promote_post_bg">
<div class="promote_twitter">
<a class="twitter-share-button" data-via="helperblogger" href="https://twitter.com/share">Tweet</a><br />
<script>                !                 function (d, s, id) {                     var js, fjs = d.getElementsByTagName(s)[0];                     if (!d.getElementById(id)) {                         js = d.createElement(s);                         js.id = id;                         js.src = "//platform.twitter.com/widgets.js";                         fjs.parentNode.insertBefore(js, fjs);                     }                 }(document, "script", "twitter-wjs");              </script></div>
<div class="promote_facebook">
<fb:like action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></fb:like><br />
<div>
<b:if cond="data:post.isFirstPost"><br /><script>                        (function (d) {                             var js, id = 'facebook-jssdk';                             if (d.getElementById(id)) {                                 return;                             }                             js = d.createElement('script');                             js.id = id;                             js.async = true;                             js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";                             d.getElementsByTagName('head')[0].appendChild(js);                         }(document));                      </script></b:if></div>
</div>
<div class="promote_google">
<g:plusone annotation="none" size="medium"></g:plusone><br />
<script type="text/javascript">                (function () {                     var po = document.createElement('script');                     po.type = 'text/javascript';                     po.async = true;                     po.src = 'https://apis.google.com/js/plusone.js';                     var s = document.getElementsByTagName('script')[0];                     s.parentNode.insertBefore(po, s);                 })();              </script></div>
</div>
</div>

Add Beautiful Social Sharing Widget Just Below Of Blogger Posts

Social bookmarking gadgets are the easiest ways to boost traffic on your blog and earn more money.Till today we have shared many kind...

Feedburner Feedcount Widget Generator Tool For Blogger

Unknown 0 Blogger Widgets 06:13

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEh6HPrI0OA8T6lPG3MjMIy34N5jxVHIuFWjRw5VAHNQsBR0rPxeb8g8Lp1NZHcteFlfmHTE_YQ9TO_lsdTlfamFxx8WTqGpUwmIIXwimhepZ75GrjGafN5URTm83cpLMj5Qgbz9qVBUoUk/s1600/feedburner-feedcount-widget-for-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6HPrI0OA8T6lPG3MjMIy34N5jxVHIuFWjRw5VAHNQsBR0rPxeb8g8Lp1NZHcteFlfmHTE_YQ9TO_lsdTlfamFxx8WTqGpUwmIIXwimhepZ75GrjGafN5URTm83cpLMj5Qgbz9qVBUoUk/s1600/feedburner-feedcount-widget-for-blogger.jpg" /></a></div>
<br />
<br />
Feedburner feedcount widget is a best widget to show number of your subscribers.It is a pretty small animated button which shows number of your feedburner subscriber in a small button.Feedburner has given us a ability to customize this gadget as you wish but they don't offered many color which suits to your blog that why I have a created a small feedcount widget generator tool with unlimited color combination options :) With using this tool you can add gadget with only one click.If you want to change your feedcount gadget background color and font color then you don't need to go to your feedburner account you can directly use this tool.Now lets see how to use this tools.<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrzEE53_2aLTOt0atQPgaSEkspdjehvhl-BIPcZRGgp77aBtagytz-duzmzixXv2QxEBrgmCwNJlHMEjaesbt48A1yb1d_8jTW_ZAJ_FriWeOUHWhKntwK936IsN2BkKA8MCEOKHVlpiI/s1600/feedcount-widget-for-blogger1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrzEE53_2aLTOt0atQPgaSEkspdjehvhl-BIPcZRGgp77aBtagytz-duzmzixXv2QxEBrgmCwNJlHMEjaesbt48A1yb1d_8jTW_ZAJ_FriWeOUHWhKntwK936IsN2BkKA8MCEOKHVlpiI/s320/feedcount-widget-for-blogger1.png" width="320" /></a></div>
<br /></div>
<br />
<h3>
How To Use This Tool</h3>
<ol style="text-align: left;">
<li><b>First login to your Blogger account,them come to this tool.</b></li>
<li>In first textarea enter your <b>FeedBurner Username</b></li>
<li>In second text area you can change background color of your feedcount widget using colorpicker.Select the color using color picker and click small button at the below right corner of color picker.</li>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_E-zapXrjKWSTK-f9Zo8NAlPHInctxhDnbfqoKSBhfb6umroP0xozduz2P3rQ7YD6t7_nDtBGApuNvB6aXr-gZKNeuHxuixfPbIRI561gzZ52LzbaHlzF7JifhT2npvs0fOI6DzTv2lA/s1600/color-picker.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_E-zapXrjKWSTK-f9Zo8NAlPHInctxhDnbfqoKSBhfb6umroP0xozduz2P3rQ7YD6t7_nDtBGApuNvB6aXr-gZKNeuHxuixfPbIRI561gzZ52LzbaHlzF7JifhT2npvs0fOI6DzTv2lA/s1600/color-picker.png" /></a></div>
<li>In third text area you can change font color,follow above step to change font color.</li>
</ol>
<div>
</div>
</div>
<br />
<h3>
<center>
FeedCount Widget Generator Tool</center>
</h3>
<br />
<iframe frameborder="0" height="365" scrolling="no" src="http://widgets.helperblogger.com/feedcount-generator.html" width="100%"></iframe></div>
<br />
I hope all of you will like this little tool.<br />
<br />
Enjoy Buddies !</div>

Feedburner Feedcount Widget Generator Tool For Blogger

Feedburner feedcount widget is a best widget to show number of your subscribers.It is a pretty small animated button which shows num...

Add a CSS3 Drop Down Menu To Blogger

Unknown 0 CSS 06:18

<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEgkSWNw3iHZWWePe57GGaIb2fCICpJT1DzP7odO8KIjUEGwJIaQ5XrysCKpoZsOUE05aKmA_RbWZAUZRHQXn0aTdLgcEh15PgGullR9Lv05mR6etQsi_5C4SbJI6-M0hEECQmx1KeBrcv8/s1600/css3-drop-down-menu-for-blogger.png.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkSWNw3iHZWWePe57GGaIb2fCICpJT1DzP7odO8KIjUEGwJIaQ5XrysCKpoZsOUE05aKmA_RbWZAUZRHQXn0aTdLgcEh15PgGullR9Lv05mR6etQsi_5C4SbJI6-M0hEECQmx1KeBrcv8/s400/css3-drop-down-menu-for-blogger.png.jpg" width="400" /></a></div>
<div style="text-align: left;">
<br /></div>
<br />
CSS3 Menus is the best way to arrange your blog's important links neatly and suitably.They also helps your readers to navigate through blog easily and rapidly.Adding a beautiful drop down menu to your blog also increases beauty of your blog that why Navigation Menus plays an important role in improving your blog SEO or traffic in little amount.I have shared many drop down menus but this one is little different from them also the biggest advantage of this menu is it is made from pure CSS3 and only two small images are used in this menu so that this menu will not affect on your blog's loading time.Now let's see how to add it to blogger blog ?See the demo of menu first.<br />
<br />
<div style="text-align: center;">
<span style="font-family: Georgia, 'Times New Roman', serif; font-size: large;"><b><i>Demo ?</i></b></span></div>
<br />
<div style="border: 2px dashed green;">
<iframe frameborder="0" height="280px" scrolling="no" src="http://helperblogger.x10.mx/demo/red-css3-menu.html" width="100%"></iframe></div>
</div>
<br />
<h3>
How To Add CSS3 Drop Down Menu To Blogger</h3>
<br />
<br />
<ol style="text-align: left;">
<li>Go to Blogger Dashboard > Layout.</li>
<li>Click on Add a Gadget link present at just below of header</li>
<li>Paste the code after replacing links with your links</li>
<li>Finally save your menu</li>
</ol>
</div>
<br />
<pre class="brush:css,html"><style> /*Start Css Menu*/
.menu {
    border: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-family: verdana,geneva,arial,helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: 8e8e8e;
}

.menu ul {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdRgfkpCIsc1hN3mU4JLSxigP2EwN6Pyzeu5Mu1zx27xsLcjYIXzalZ049M2e7gNBqA7BJJMy0t_wY7ZM5ZmdkWGic6-VyLPwujOmOsSPS8B7exwQ9QbRh93s4SUZGYzkb6N4UxwV8GNw/s1600/helperblogger.com-menu-bg.gif) top left repeat-x;
    height: 43px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    float: left;
    padding: 0px 8px 0px 8px;
}

.menu li a {
    color: #666666;
    display: block;
    font-weight: bold;
    line-height: 43px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
}

.menu li a:hover {
    color: #000000;
    text-decoration: none;
}

.menu li ul {
    background: #e0e0e0;
    border-left: 2px solid #a80329;
    border-right: 2px solid #a80329;
    border-bottom: 2px solid #a80329;
    display: none;
    height: auto;
    filter: alpha(opacity=95);
    opacity: 0.95;
    position: absolute;
    width: 225px;
    z-index: 200;
/*top:1em;
/*left:0;*/
}

.menu li:hover ul {
    display: block;
}

.menu li li {
    display: block;
    float: none;
    padding: 0px;
    width: 225px;
}

.menu li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    padding: 0px 10px 0px 15px;
    text-align: left;
}

.menu li ul a:hover {
    background: #949494;
    color: #000000;
    opacity: 1.0;
    filter: alpha(opacity=100);
}

.menu p {
    clear: left;
}

.menu #current {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx2X0QNbrHhL2QHaUQLmSqTcQO9JWA1tkessYaWdvhzGJuYsCEDA-T1Y3nyZV6mQ1nEo9GVQSzvxOVm1HA_7AUDMY7wecWn06zioytBLHBLF5MW-YdKsp2X0IwVhR4MSslV0yYOxH-FSQ/s1600/helperblogger.com-current-bg.gif) top left repeat-x;
    color: #ffffff;
}

/*End Css Menu from http://www.helperblogger.com/*/ 
</style>

<div class="menu">
 <ul>
  <li><a href="#" id="current">Home</a></li>
  <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Drop Down CSS Menus</a></li>
   <li><a href="#">Horizontal CSS Menus</a></li>
   <li><a href="#">Vertical CSS Menus</a></li>
   <li><a href="#">Dreamweaver Menus</a></li>
  </ul>
  </li>
  <li><a href="#">FAQ</a>
  <ul>
   <li><a href="#">Drop Down CSS Menus</a></li>
   <li><a href="#">Horizontal CSS Menus</a></li>
   <li><a href="#">Vertical CSS Menus</a></li>
   <li><a href="#">Dreamweaver Menus</a></li>
  </ul>
  </li>
  <li><a href="#">Contact</a></li>
  <li><a href="http://www.helperblogger.com/">Create This</a></li>
 </ul>
</div></pre>
<br />
Now replace <b>#</b> with your own links and replace the texts with your texts with your own text which you want to appear on menu.<br />
<br />
<h3>
Customizations</h3>
Note - I highly recommend you to use our <a href="http://www.editor-btsnts.blogspot.in/" target="_blank">HTML Editor</a> to make your changes.You can see a live preview of your menu with using <a href="http://www.editor-btsnts.blogspot.in/" target="_blank">HTML Editor</a>.Copy all of the above code and paste it into editor.<br />
<br />
<h3>
Further Help?</h3>
Many newbies bloggers gets the problem while adding links and texts.If you are getting the same problem then simply provide a tree menu of your menu,I will build the HTML part for you.Also feel free to ask  your any little query...</div>

Add a CSS3 Drop Down Menu To Blogger

CSS3 Menus is the best way to arrange your blog's important links neatly and suitably.They also helps your readers to navigate t...

Add A Comment Bubble Just Next To Blogger Post Titles

Unknown 0 Blogger Tricks 03:44

<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEjIod7J2Db91DrT2rIhJFTayRIEYpJrMGqkmX8jKI8Ej73KuDpiIzv4z3T7XoaEY33vVvo-95yJRFfn4dCjwpb9M6YKBZBL3s9071WiwDVo7POi7_KwjjcPe7ISf6G85_nah6MwnTGrb98/s1600/add-comment-bubble-next-to-blogger-post-titles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIod7J2Db91DrT2rIhJFTayRIEYpJrMGqkmX8jKI8Ej73KuDpiIzv4z3T7XoaEY33vVvo-95yJRFfn4dCjwpb9M6YKBZBL3s9071WiwDVo7POi7_KwjjcPe7ISf6G85_nah6MwnTGrb98/s320/add-comment-bubble-next-to-blogger-post-titles.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
If you want to show the number of comments just next to your blog post tiles then comment-bubble is a best way to show number of comments to that particular post in a small bubble icon.This little bubble will also increase the number of comments on your blog,because by clicking on the bubble your readers can directly access the comment-form of that post.Also you can add this in two easiest ways,just follow below steps carefully and you will easily add this to your blog.</div>
<br />
<h3>
How To Add Comment Bubble Just Next To Post Title?</h3>
<div>
<br /></div>
<div style="text-align: left;">
<ol style="text-align: left;">
<li>Go to <b>Blogger Dashboard > Template</b></li>
<li><b>Take a backup of your template</b></li>
<li>Click On <b>Edit HTML</b></li>
<li>Hit <b>Proceed</b></li>
<li><b>Check Expand Widget Templates chechbox.</b></li>
<li>Find below code in your template</li>
</ol>
</div>
</div>
<br />
<pre><code>]]></b:skin></code></pre>
<br />
<br />
add below code just above it<br />
<br />
<pre><code>.comment-bubble {
    float: right;
    width: 48px;
    height: 48px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU1A8t7tFkAUJgE9nhRppXlZUtwDqP83TE0RB_JOQFWIwcVJ85NBPq43pYXpJ2vgmByTvVVd2LK4CHMjRDWCYx7kokYVS7h7qnRoIPN9TemCp5yVxQKa_WfOe1IOOoHw-IretzWCp_2Uvh/s1600/helperblogger.com-commentbubble.png) no-repeat;
    font-size: 18px;
    float: right;
    margin-top: -15px;
    margin-right: 2px;
    text-align: center;
    position: float;
    text-align: center;
}</code></pre>
<br />
<br />
Now find for below code in your template<br />
<br />
<pre><code><b:if cond='data:post.link'></code></pre>
<br />
<br />
replace it with below piece of code,<br />
<br />
<pre><code><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'></code></pre>
<br />
Now take a preview of your template,if you want to adjust the position of comment bubble then you can change the above CSS values as you need.When you feel that everything is ok then save your template.You can also replace the bubble with your own bubble,just replace the URL of bubble with your own bubble URL.</div>

Add A Comment Bubble Just Next To Blogger Post Titles

If you want to show the number of comments just next to your blog post tiles then comment-bubble is a best way to show number of comm...

Slide Out Social Bookmarking Gadget With jQuery For Blogger

Unknown 0 Blogger Widgets, Social Media, Social Sharing Widgets 22:11

Slide Out Social Bookmarking Gadget With jQuery For Blogger

Social Bookmarking Gadgets plays important role in boosting blog traffic.Thats why you may found social bookmarking gadgets almost on ...

How To Change/Replace Blogger Blog Favicon?

Unknown 0 Blogger Tricks, Blogger Tutorials 07:03

<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/AVvXsEjdi2iNqgVyt4YpV25YdYHGfuHtvx1kbBmWqJpZQk_vPWqVtGrneKLmsOep1UcrlX4irO5GlcU53o-5K-H6rZMMr5CkGJ_iQfT_p8OiE_BV5BENs-WiqguKuhxBBIcA0eTaFYPriwyGUOg/s1600/favicons.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdi2iNqgVyt4YpV25YdYHGfuHtvx1kbBmWqJpZQk_vPWqVtGrneKLmsOep1UcrlX4irO5GlcU53o-5K-H6rZMMr5CkGJ_iQfT_p8OiE_BV5BENs-WiqguKuhxBBIcA0eTaFYPriwyGUOg/s1600/favicons.jpeg" /></a></div>
<br />
Favicon is small icon which is present besides any blog's/websites title in browsers tab.Blogger comes with a default B icon in orange color which looks very ugly.Here in this post I am sharing a simple tricks to add/change or replace blogger blog favicon.To change your favicon you don't need to edit any code in your template,it can be done from "favicon tab" present in page elements page.Now lets see how to chnage blogger blog favicon ?<br />
<br />
<h3>
How To Change Blogger Blog Favicon?</h3>
<br />
<ul>
<li>Go to Blogger Dashboard > Page Elements</li>
<li>Click on the favicon tab</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaEFSMTZgCets6fQ1b9J4dqg2lJw7BNSEnAeyUTSgpX5zo8NClt7M6rXR2bBGd7Slaa76nmq-Gw0R025gt1cFSyluFFhcxStS-xhI9tbBpex_5aU0tIUBnHInzY1uS3LDA35-gfQMMtIw/s1600/change-replace-blogger-favicon1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaEFSMTZgCets6fQ1b9J4dqg2lJw7BNSEnAeyUTSgpX5zo8NClt7M6rXR2bBGd7Slaa76nmq-Gw0R025gt1cFSyluFFhcxStS-xhI9tbBpex_5aU0tIUBnHInzY1uS3LDA35-gfQMMtIw/s1600/change-replace-blogger-favicon1.png" /></a></div>
<div>
<br /></div>
<ul>
<li>Now hit "Choose File" button.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaoH9UzM_jGUlMojHKoToWReum_MTqESlEff8wYxz80i_9ZFj7o3zYQixLabDK_etuSdtZA8qlzWeHmyv23QUgZH9coeVAONyvM2KYKwU3_bmKpIxhvwi4UxI-LwGthtOIDsmwaYHhvMs/s1600/change-replace-blogger-favicon2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaoH9UzM_jGUlMojHKoToWReum_MTqESlEff8wYxz80i_9ZFj7o3zYQixLabDK_etuSdtZA8qlzWeHmyv23QUgZH9coeVAONyvM2KYKwU3_bmKpIxhvwi4UxI-LwGthtOIDsmwaYHhvMs/s1600/change-replace-blogger-favicon2.png" /></a></div>
<div>
<br /></div>
<ul>
<li>Browse for your own image(should be less than 100 KB) and select it.</li>
<li>Blogger will automatically re-size it,and finally hit the "Save" button.</li>
</ul>
Now refrsh your blog you will see your new favicon,If you can't then delete browsers cookies and caches then visit your blog.</div>
<br />
<h4>
Another Way To Change Blogger Blog Favicon</h4>
<br />
Here is another simple way to change your blog's favicon.<br />
<ol style="text-align: left;">
<li>Go to Blogger Dashboard > Template</li>
<li>Click <b>Edit HTML</b></li>
<li>Hit <b>Proceed</b> button</li>
<li>Now find for below code in your template</li>
</ol>
<br />
<br />
<blockquote>
<title><data:blog.pageTitle/></title></blockquote>
<br />
add below code immediately after of above code<br />
<br />
<blockquote>
<link rel="shortcut icon" href="<span style="background-color: #ea9999;">URL OF YOUR ICON FILE</span>"/></blockquote>
<br />
Replace <span style="background-color: #ea9999;">URL OF YOUR ICON FILE</span> with your own icon.<br />
Now save your template and you are done..</div>

How To Change/Replace Blogger Blog Favicon?

Favicon is small icon which is present besides any blog's/websites title in browsers tab.Blogger comes with a default B icon in ora...

Social Media Widget With Counter For Blogger - V2

Unknown 0 Blogger Widgets, Facebook, Feedburner, Twitter 11:15

Social Media Widget With Counter For Blogger - V2

Previously we shared wordpress style social media widget with counter for blogger and many of you found that great widget.But one of m...

Add Shareaholic Sassy Bookmarks To Blogger

Unknown 0 Blogger Widgets, Social Media, Social Sharing Widgets 00:07

<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEg1IEE09JkJs9G6wot-AahS5iNKvcwDen-m-fobwR_SWwQmBojWTHa6x6zIhlq9lHm_spaQzmtl1ppSdEeBLghGMMAnC7o42XnLStdelp2CYMIeHVl-81zhEAIs2tH6vOPEZDF6SbsrOKg/s1600/share-aholic-sassly-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1IEE09JkJs9G6wot-AahS5iNKvcwDen-m-fobwR_SWwQmBojWTHa6x6zIhlq9lHm_spaQzmtl1ppSdEeBLghGMMAnC7o42XnLStdelp2CYMIeHVl-81zhEAIs2tH6vOPEZDF6SbsrOKg/s1600/share-aholic-sassly-widget.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<a href="http://www.shareaholic.com/" target="_blank">Shareaholic</a> is always famous for their <a href="http://helperbloggerss.blogspot.com/search/label/Social%20Media" target="_blank">Social Bookmarking Widgets</a>.Recently we shared their <a href="http://helperbloggerss.blogspot.com//2012/04/cool-shareaholic-social-sharing-widget.html" target="_blank">Sexy Bookmarks Gagdet</a> for blogger and this time we are sharing Sassy Bookmarks.This is another cool gadget by Shareaholic,it floats botttom left corner of your blog and when any user hovers mouse on it,some icons pop outs.Also the installation of this gadget is one step installation so that you can easily add to your blog.Now let's see how to add it.Click on the button below to see live demo.</div>
<br />
<br />
<center>
<div class="but1">
<a href="http://hb-demo05.blogspot.in/" target="_blank">Gadget Demo</a></div>
</center>
<br />
<br />
<h3>
How To Add Shareaholic Sassy Bookmarks To Blogger?</h3>
<br />
<ol style="text-align: left;">
<li>Go to Blogger Dashboard > Template</li>
<li>Take a backup of your template.</li>
<li>Now find for below code in your template</li>
</ol>
<br />
<br />
<pre><code></body></code></pre>
<br />
<br />
add below piece of code just <b>above/before</b> of above code.<br />
<br />
<pre><code>
<div class="shr_ss shr_publisher">

</div>


<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>


<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

</code></pre>
<br /></div>
<br />
Now save your template and you are done<br />
<br />
I hope you will like this gadget.</div>

Add Shareaholic Sassy Bookmarks To Blogger

Shareaholic is always famous for their Social Bookmarking Widgets .Recently we shared their Sexy Bookmarks Gagdet for blogger and t...

Easily Display Your Profile Picture In Google Search Results

Unknown 0 Blogger Tricks, Blogger Tutorials 09:58

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEj7N79Cr59ZJZyDbCVR-94q1s2UR7mQl78E27uh7EoA7lvY3tk__F1Sz2pnGovArD-FBz8OTHOJMan2E3w3Hiq24rEtNGz4BDbTZcCck8DY19nWEKkOgc3adeuWqWx76QGe4W1pB-pmFuA/s1600/display-profile-pic-on-search-results.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7N79Cr59ZJZyDbCVR-94q1s2UR7mQl78E27uh7EoA7lvY3tk__F1Sz2pnGovArD-FBz8OTHOJMan2E3w3Hiq24rEtNGz4BDbTZcCck8DY19nWEKkOgc3adeuWqWx76QGe4W1pB-pmFuA/s1600/display-profile-pic-on-search-results.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Every blogger want's to display his own profile picture in Google search results.I was also trying for same thing from last few months and finally just yesterday I saw my own profile pic. in Google search results for my blog search results.If any user search for any content on google and if your blog have similar content then result for your blog will little different from other results.Google will show your profile pic. of (44 by 44pixels) with your name and which will linked to your Google+ profile.Here in this post I am revealing all that steps that helps me to display my profile pic. in <a href="http://www.google.co.in/search?q=helper+blogger" target="_blank">Google search result</a>.Just follow my steps carefully and correctly.</div>
<br />
<h3>
How To Display Profile Pic. In Google Search Results?</h3>
<br />
For better understanding I am dividing this tutorial in below steps just follow them carefully.<br />
<br />
<ol style="text-align: left;">
<li>Replacing Blogger Profile With Google+ Profile</li>
<li>Adding Your Google+ Profile Link In Your Template</li>
<li>Adding Google+ Profile Link In About Us Page</li>
<li>Testing Your Settings</li>
</ol>
<br />
<br />
<h4>
<b>Step 1:</b> Replacing Blogger Profile With Google+ Profile</h4>
First you have to add your blog links in your Google+ about page.This can be done by replacing your blogger profile with your Google+ profile.To replace your blogger profile with your Google+ profile follow below steps.<br />
<ul style="text-align: left;">
<li>First go to <a href="http://www.blogger.com/switch-profile.g" target="_blank">this page</a></li>
<li>Now scroll down and accept their terms and conditions by ticking on the check box</li>
<li>Hit the Switch Now button and you redirect to another page</li>
</ul>
<ol></ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFUvCs9scITBmpPUh9r5-ADXQyOntb4rRUsj33wy8ah2Xt0Er5kIztPEFW4ITLfvornNePL28ut9l-qJ_VHTkElzOXe5f_Vdxj3fl_Vf86NBVHSwXqCMpDZQWqTzWuAjK-n1Hkcr2NiI/s1600/display-profile-pic-on-search-results4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFUvCs9scITBmpPUh9r5-ADXQyOntb4rRUsj33wy8ah2Xt0Er5kIztPEFW4ITLfvornNePL28ut9l-qJ_VHTkElzOXe5f_Vdxj3fl_Vf86NBVHSwXqCMpDZQWqTzWuAjK-n1Hkcr2NiI/s1600/display-profile-pic-on-search-results4.png" /></a></div>
<div>
<br /></div>
<ul style="text-align: left;">
<li>Here you have to select the blogs to add to Google+ about page,select your main blogs and finally hit the ADD BLOGS buttons.</li>
</ul>
<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/AVvXsEhXeKvR5W7qMOXbjzDjhwXsFKf1-3yMvyo-Zv_Gf34buqNx5PlYF3oghUo8P_6-U4eEEXCHeoNQa2FZQ4osfrIj_GZQ8eN_MvedbFFmbsaLU9NkmVs7XNEGvRZCGjD7qNEBV9ZqayB8etI/s1600/display-profile-pic-on-search-results3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXeKvR5W7qMOXbjzDjhwXsFKf1-3yMvyo-Zv_Gf34buqNx5PlYF3oghUo8P_6-U4eEEXCHeoNQa2FZQ4osfrIj_GZQ8eN_MvedbFFmbsaLU9NkmVs7XNEGvRZCGjD7qNEBV9ZqayB8etI/s320/display-profile-pic-on-search-results3.png" width="318" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Click On Image To Enlarge</td></tr>
</tbody></table>
<div>
</div>
</div>
Now you have completed this step,let's go to next step.<br />
<br />
<h4>
Step 2: Adding Your Google+ Profile Link In Your Template</h4>
Now in this step you have to tell Google that I am author of this blog.For this you have to add a link to your Google + profile in your template,follow below steps<br />
<br />
<br />
<ul style="text-align: left;">
<li>Go to Blogger Dashboard > Template</li>
<li>Now find for below tag in your template</li>
</ul>
<br />
<br />
<blockquote>
<head></blockquote>
<br />
<br />
add below code just below of above code<br />
<br />
<br />
<blockquote>
<link href='https://plus.google.com/<span style="background-color: #b6d7a8;">106527290580119996124</span>' rel='author'/></blockquote>
<br />
<br />
replace <span style="background-color: #b6d7a8;">106527290580119996124</span> with your Google + profile ID.<br />
<br />
<br />
<h4>
Step 3: Adding Google+ Profile Link In About Us Page</h4>
<br />
Now add below link in your about us page.<br />
<br />
<br />
<blockquote>
<a href="https://plus.google.com/<span style="background-color: #ea9999;">106527290580119996124</span>" rel="author" target="_blank">Follow Me On Google+</a></blockquote>
<br />
<br />
replace <span style="background-color: #ea9999;">106527290580119996124</span> with your Google + profile ID.<br />
<br />
<br />
<h4>
Step 5: Testing Your Settings</h4>
<br />
<ul style="text-align: left;">
<li>Now go to Rich Snippets Tool page.</li>
<li>Enter your blog URL and hit the Preview button.</li>
<li>You will see something like this on your rich snippets tool</li>
</ul>
<br />
<br />
<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/AVvXsEgIsVnFsMrub_gWNnFV2nId7yvwHtZP_owqeft456h5npiYSpvMPSgQivhdMbfrN55icTDZy6pZivIZUtE7yREw9fDB73bnYKug9XoKupS3tusOEpE1I_WNAYuDk7jh55OcP2wSIka8y9U/s1600/rich-snippet-tools.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIsVnFsMrub_gWNnFV2nId7yvwHtZP_owqeft456h5npiYSpvMPSgQivhdMbfrN55icTDZy6pZivIZUtE7yREw9fDB73bnYKug9XoKupS3tusOEpE1I_WNAYuDk7jh55OcP2wSIka8y9U/s400/rich-snippet-tools.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Click On Image To Enlarge</td></tr>
</tbody></table>
</div>
<br />
All the lines in Green color indicates that your Authorship and Publisher markup has been verified. <br />
<br />
Now allow 48 hours or more for Google web-crawlers to crawl your pages again, so that the your profile pic. start appearing.It can also take even more than 48 hours sometimes.<br />
<br />
I hope you will enjoyed this tutorial.<br />
<br />
Best Of Luck....</div>

Easily Display Your Profile Picture In Google Search Results

Every blogger want's to display his own profile picture in Google search results.I was also trying for same thing from last few ...

Update Mashable Style Widget : Pinterest Pin It And Follow Button Added

Unknown 0 Blogger Widgets, Facebook, Feedburner, Social Media, Twitter 05:36

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEiQGoGDSNVblWK-dKRlwq08VjxsHRismqosGfoHiiBBj_RE7MX0K1rtiElePMU_H31sSAjw8q5G690ECtWHgZcT_V5ZHGg3PWnAjaR1zAx3-iK0MSnF-ZXeWIr-0kygxkBqlwKx8HgBlEg/s1600/mashable-style-widget-for-blogger.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQGoGDSNVblWK-dKRlwq08VjxsHRismqosGfoHiiBBj_RE7MX0K1rtiElePMU_H31sSAjw8q5G690ECtWHgZcT_V5ZHGg3PWnAjaR1zAx3-iK0MSnF-ZXeWIr-0kygxkBqlwKx8HgBlEg/s1600/mashable-style-widget-for-blogger.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gadget Preview</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Mashable style widgets are pretty cool widgets which comes with many subscription options and they are becoming very popular now days.It contains Facebook like box,Twitter Follow button,Google + Badge,Goofle +1 Button,Feedburner email subscription form and some little icons with links to other social profiles.We recently shared two versions mashable style widgets (<a href="http://helperbloggerss.blogspot.com/2012/01/awesome-all-in-one-social-media-sharing_28.html" target="_blank">Version 1</a> | <a href="http://helperbloggerss.blogspot.com/2012/03/quick-addmashable-style-social.html" target="_blank">Version 2</a>) and lots of our reader found this great widget,but some of my loyal readers asked me for <a href="http://helperbloggerss.blogspot.com/2012/03/how-to-add-pinterest-pin-it-button-with.html" target="_blank">pinterest pin it</a> and <a href="http://helperbloggerss.blogspot.com/2012/03/how-to-add-pinterest-follow-button-to.html" target="_blank">follow buttons</a> so I kept my word and bringing this updated version of mashable style widgets.Here I am providing a widget generator for this gadget so that you can easily add this gadget without any errors and very easily.Let's start adding this gadget :)</div>
</div>
<br />
<h3>
How To Add Updated Mashable Style Widget To Blogger?</h3>
<br />
As mentioned above I am providing a widget generator for this gadget,just follow below steps carefully.<br />
<br />
<br />
<ol style="text-align: left;">
<li>Below in widget generator <b>only enter your social profiles/pages usernames not whole URL</b>.</li>
<li>One you enter all of your usernames check them again if all are correct then hit the Add to Blogger button.</li>
<li>Now you will redirect to blogger "Add Widget" page,select the blog on which you want to add this gadget and finally hit the Add Widget button</li>
<li>Drag your widget as you wish,I recommend <b>top of your sidebar but below of search bar</b>.</li>
</ol>
</div>
<br />
<h3>
<center>
Widget Generator</center>
</h3>
<br />
<iframe frameborder="0" height="460" scrolling="no" src="http://widgets.helperblogger.com/mashable-style-updated.html" width="100%"></iframe><br />
<br />
I hope you will like this gadget.<br />
Happy Blogging....</div>

Update Mashable Style Widget : Pinterest Pin It And Follow Button Added

Gadget Preview Mashable style widgets are pretty cool widgets which comes with many subscription options and they are becoming ver...

Add Spinning Hover Effect To Blogger's Popular Posts Widget

Unknown 0 Blogger Tricks, HTML And CSS Tricks 05:55

#PopularPosts1 dd {
    float: left;
    border-bottom: none;
    margin: 8px 8px 0 8px;
    background: none;
    display: block;
    padding: 0
}

#PopularPosts1 img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}</code></pre>
<br />
<b>Now be careful in this step.</b><br />
<br />
Find below piece of code in your template<br />
<br />
<pre><code><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
.
.
.
.
</b:widget></code></pre>
<br />
<br />
replace above piece of code with below one<br />
<br />
<pre><code><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
        <b:if cond='data:title'>
            <h2>
                <data:title/>
            </h2>
        </b:if>
        <div class='widget-content popular-posts'>
            <ul>
                <b:loop values='data:posts' var='post'>
                    <dd>
                        <b:if cond='data:showThumbnails == &quot;false&quot;'>
                            <b:if cond='data:showSnippets == &quot;false&quot;'>
                                
                                <a expr:href='data:post.href'><data:post.title/></a>
                                <b:else/>
                                
                                <div class='item-title'>
                                    <a expr:href='data:post.href'><data:post.title/></a>
                                </div>
                                <div class='item-snippet'>
                                    <data:post.snippet/>
                                </div>
                            </b:if>
                            <b:else/>
                            <b:if cond='data:showSnippets == &quot;false&quot;'>
                                
                                <div class='item-thumbnail-only'>
                                    <b:if cond='data:post.thumbnail'>
                                        <div class='item-thumbnail'>
                                            <a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
                                        </div>
                                    </b:if>
                                    <div class='item-title'>
                                        <a expr:href='data:post.href'><data:post.title/></a>
                                    </div>
                                </div>
                                <div style='clear: both;' />
                                <b:else/>
                                
                                <b:if cond='data:post.thumbnail'>
                                    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
                                    <b:else/>
                                    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixtZdLUdnjrFtH-Zf55o3VIzIndl9IdD0cL2UiipDq7sgCKqMvP3CllY-4TN4Jr3Y_NF_Bz6TNteoIkSvfQ8oVjBcFQSFHpAYukzlq-t8xesrYzukSRlgyHb-uYrRslPAVGG-0cS-dcBg/s1600/helperblogger-default-image.jpg' width='60px'/></a>
                                </b:if>
                            </b:if>
                        </b:if>
                    </dd>
                </b:loop>
            </ul>
            <div class='clear' />
            <b:include name='quickedit' />
        </div>
    </b:includable>
</b:widget></code></pre>
<br /></div>
<br />
Now save your template and you are done... :)<br />
<br />
If you have any queries then feel free to ask me.I will reply to your questions as soon as time allows.

Add Spinning Hover Effect To Blogger's Popular Posts Widget

Popular posts is a widget provided by blogger which shows a list of most viewed posts from your blog.We have already shared three hack...

Pop Up Email Subscription Form With jQuery For Blogger

Unknown 0 Blogger Widgets, Feedburner, Jquery Plugins 08:57

#subscribe-widget {
    display: none;
}
    /* Overlay */
#hb-overlay {
    background-color: #000;
}
    /* Container */
#hb-container {
    min-height: 350px;
    min-width: 500px;
    color: #222;
    background-color: #fff;
    border: 4px solid #ddd;
}

#hb-container .hb-data {
    padding: 8px;
}

#hb-container a.hbCloseImg {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFuMr7RukwUWkJRT1BluZHr3es6yYe12D8qarC5cdseJ1ErSkPU-kWWYDiilzi7g8-5RDOaYQ9stSnDlbgHrPQjqxEkVDTBuM8JfW4tWyH03wGQRIlwPpRVH3d0TjVkeuJjshfs1hRNqwx/s1600/hb-close-button.png) no-repeat;
    width: 25px;
    height: 29px;
    display: inline;
    z-index: 3200;
    position: absolute;
    top: -15px;
    right: -16px;
    cursor: pointer;
}

#description {
    color: #AAAAAA;
    font-family: times New Roman;
    font-size: 25px;
    font-style: italic;
}

#description img {
    float: left;
    height: 80px;
    padding: 0 25px 0 10px;
    width: 80px;
}

#hbfollowForm {
    padding: 15px;
}

#hbfollowForm p {
    margin: 0 0 10px;
}

#hbfollowForm input:not([type="checkbox"]) {
    width: 93%;
    margin-top: 4px;
    margin-bottom: 20px;
    padding: 10px 5px 10px 25px;
    border: 1px solid rgb(178, 178, 178);
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#hbfollowForm input:not([type="checkbox"]):active, #hbfollowForm input:not([type="checkbox"]):focus {
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}

#hbfollowForm .button input {
    background: none repeat scroll 0 0 #3D9DB3;
    border: 1px solid #1C6C7A;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 24px;
    margin-bottom: 10px;
    padding: 8px 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    width: 30%;
    float: right;
}

#hbfollowForm .button input:hover {
    background: #4ab3c6;
    text-decoration: none;
}

#hbfollowForm .button input:active, #hbfollowForm .button input:focus {
    background: rgb(40, 137, 154);
    position: relative;
    top: 1px;
    border: 1px solid rgb(12, 76, 87);
    -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}

.hbFollowFooter {
    text-align: center;
    font: 10px Tahoma, Helvetica, Arial, Sans-Serif;
    padding: 7px 0;
    margin-top: 80px;
    text-shadow: 0px 2px 3px #555;
    position: absolute;
    width: 500px;
}

.hbFollowFooter a {
    color: #222;
    text-decoration: none;
}

.hbFollowFooter a:hover {
    color: #fff;
}
    <!--[if lt IE 7]> #hb-container a.hbCloseImg {
    background: none;
    right: -14px;
    width: 22px;
    height: 26px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFuMr7RukwUWkJRT1BluZHr3es6yYe12D8qarC5cdseJ1ErSkPU-kWWYDiilzi7g8-5RDOaYQ9stSnDlbgHrPQjqxEkVDTBuM8JfW4tWyH03wGQRIlwPpRVH3d0TjVkeuJjshfs1hRNqwx/s1600/hb-close-button.png', sizingMethod='scale');
}

#hbfollowForm input {
    padding: 10px 5px 10px 32px;
    width: 93%;
}

#hbfollowForm input[type=checkbox] {
    width: 10px;
    padding: 0;
}
    <![endif]-->
</style>
<div id="subscribe-button">
    <a class="subscribe" href="#"><img src="<span style="background-color: yellow;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmUX2JiiOlWuJYWQs6cCOYQSJL4-EN0Ld4Rg88zvtYOjUdp2xvHCmZb-M40YimF0v2Om-RI53GNO3wF312q0M7qqOPFO4OnmYuYde4y3rUf3A5AyD56K2VAi1XrNG8edeJaPm5EOKrMec4/s1600/hb-email-icon.png</span>" alt="subscribe" /></a>
</div>
<div id="subscribe-widget">
    <div id="hbfollowForm">
        <img alt="Subscribe" border="0" float="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirsnlPJizr592EFPEPj2i66DO9I-ITuif4o1928aWBM_I5JUzT8jX82iu8YJ84j8TdiEz4mTyyM74Za_GqtO0i9GG6YOrdea0a0eUIBziRi2fH8dasNnlOFRoup-CSbTSUujzLgWkgnooN/s1600/hb-subscribe-via-email.PNG"
        />
        <div id='description'>
            <img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7fos-MYbPiak9ar3QuJBbDqksJnSWM-9QF_FP0veMi2guW6eT7i4dEPB_SdRbAF7mGnvVKZsXSKoJD3ofRtojZABtpHXbGL1DkO6HhEtgtZWzETbLH0DJV3yOUUNsDlN75zOgzC4Ow2M/s1600/hb-email-icon1.PNG"
            />Subscribe to our mailing list to get the updates to your email inbox...</div>
        <form
        action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<span style="background-color: #ea9999;">hblogger</span>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"
        target="popupwindow">
            <input name="email" placeholder="Enter Your Email..." required="required"
            type="text" />
            <input name="uri" type="hidden" value="<span style="background-color: #ea9999;">hblogger</span>" />
            <input name="loc" type="hidden" value="en_US" />
            <div class="button">
                <input type="submit" value="Subscribe" />
            </div>
            </form>
    </div>
    <div class="hbFollowFooter">Delivered by
        <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a>| Powered by
        <a href="http://www.helperblogger.com/" rel="dofollow" target="_blank">Blogger Widgets</a>
    </div>
</div>
<script src="http://helperblogger.x10.mx/scripts/jquery-popup.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function (a) {
        a("#subscribe-button .subscribe").click(function (b) {
            a("#subscribe-widget").modal();
            return false
        })
    })
</script></code></pre>
<br />
<br />
<ul style="text-align: left;">
<li>Now replace <span style="background-color: #ea9999;">hblogger</span> with your feedburner username.</li>
<li>If you want to use your own icon then replace the code highlighted in <span style="background-color: yellow;">yellow</span> color with your own image URL.</li>
</ul>
<div>
Now save your all changes and visit your blog to see this amazing gadget.</div>
</div>

Pop Up Email Subscription Form With jQuery For Blogger

Today I am sharing another interesting jQuery popup email subscription form.This gadget adds a small email icon to the below left ...

Pure CSS3 Multi Level Drop Down Menu For Blogger

Unknown 0 CSS 09:30

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<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;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihLd30qwm6N_TQr9SjT6QHLkCtQewQyp6MS2o2fXx2RK8I4W6BUoCwmxtApSpGp0v8qMQHR2fi1klQGdcA_OaOA6IrC6jiOKE5l_7zpKYlCwmvXlwpAVu_UMUXyNBk9BzsQXL37B4moqo/s1600/css3-drop-down-menu-for-blogger.png.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihLd30qwm6N_TQr9SjT6QHLkCtQewQyp6MS2o2fXx2RK8I4W6BUoCwmxtApSpGp0v8qMQHR2fi1klQGdcA_OaOA6IrC6jiOKE5l_7zpKYlCwmvXlwpAVu_UMUXyNBk9BzsQXL37B4moqo/s1600/css3-drop-down-menu-for-blogger.png.jpg" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Adding a beautiful drop down menu to blog increases beauty of your blog.Also drop down menus helps your readers to easily navigate through your blog.This menu is also designed with using pure CSS3 like we shared before a cool css3 multi level drop down menu.This menu is designed by Nick La of <a href="http://webdesignerwall.com/" target="_blank">webdesignerwall</a>.As always I have tried my best level to make it on step installation.So you just have to copy and paste the code.You can add this menu as a HTML/JavaScript widget so that you don't edit your template :).Lets see how to add it to blogger blog.See the demo of menu first.</div>
<br />
<br />
<br />
<br />
<br />
<center>
<div class="but1">
<a href="http://helperblogger.x10.mx/demo/css3-drop-down.html" target="_blank">Menu Demo</a></div>
</center>
</div>
<br />
<h3>
How To Add CSS3 Drop Down Menu To Blogger?</h3>
<br />
<ul style="text-align: left;">
<li>Go to Blogger Dashboard > Design > Layout. (In new User Interface Dashboard > Layout)</li>
<li>Click on add a gadget link just below of Header (see image below)</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKmTlbtKcNJSHR1wW3rV2qEUvvDlb90Va1S9N2ZPUMSo5id1U0QwvqotqKphyphenhyphend-2T2rl3hAaZvwIifs_nPlxLe7Ybeh5q9YeULNOEqisDhFr-FFInjJwx-c7oczU6KnHQwH8FPQzMnteI/s1600/add-a-gadget.png" imageanchor="1" style="clear: left; display: inline !important; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKmTlbtKcNJSHR1wW3rV2qEUvvDlb90Va1S9N2ZPUMSo5id1U0QwvqotqKphyphenhyphend-2T2rl3hAaZvwIifs_nPlxLe7Ybeh5q9YeULNOEqisDhFr-FFInjJwx-c7oczU6KnHQwH8FPQzMnteI/s1600/add-a-gadget.png" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
(Note - If you don't have layout as above in image then comment with your blog URL I will help you further)<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
</div>
<br />
<ul style="text-align: left;">
<li>Paste below code,</li>
</ul>
</div>
<br />
<pre><code><style>
#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuPVLo-eH8ld_jPGggZVDJhPxk6RDZE0JNltPX5FtVZLIbIy-uR04zTOju7ekmXmH8gjf7PM-7x6p9yzlFT5Tz2LTXiSwLcgEaDnUHOicIe8wKC6yQVPXk4Sl5TOm9R-iDn3UOm_Xj4uM/s1600/hb-gradient.png) repeat-x 0 -110px;
    line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    width: 100%
}

#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
    font-family: calibri;
}

/* main level link */
#nav a {
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding: 8px 20px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
}

#nav a:hover {
    background: #000;
    color: #fff;
}

/* main level link hover */
#nav .current a, #nav li:hover > a {
    background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuPVLo-eH8ld_jPGggZVDJhPxk6RDZE0JNltPX5FtVZLIbIy-uR04zTOju7ekmXmH8gjf7PM-7x6p9yzlFT5Tz2LTXiSwLcgEaDnUHOicIe8wKC6yQVPXk4Sl5TOm9R-iDn3UOm_Xj4uM/s1600/hb-gradient.png) repeat-x 0 -40px;
    color: #444;
    border-top: solid 1px #f8f8f8;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    box-shadow: 0 1px 1px rgba(0,0,0, .2);
    text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

#nav ul a:hover {
    background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuPVLo-eH8ld_jPGggZVDJhPxk6RDZE0JNltPX5FtVZLIbIy-uR04zTOju7ekmXmH8gjf7PM-7x6p9yzlFT5Tz2LTXiSwLcgEaDnUHOicIe8wKC6yQVPXk4Sl5TOm9R-iDn3UOm_Xj4uM/s1600/hb-gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav li:hover > ul {
    display: block;
}

/* level 2 list */
#nav ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuPVLo-eH8ld_jPGggZVDJhPxk6RDZE0JNltPX5FtVZLIbIy-uR04zTOju7ekmXmH8gjf7PM-7x6p9yzlFT5Tz2LTXiSwLcgEaDnUHOicIe8wKC6yQVPXk4Sl5TOm9R-iDn3UOm_Xj4uM/s1600/hb-gradient.png) repeat-x 0 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
}

#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}

#nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav ul ul {
    left: 181px;
    top: -3px;
}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}

#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#nav {
    display: inline-block;
}

html[xmlns] #nav {
    display: block;
}

* html #nav {
    height: 1%;
}
</style>
<ul id="nav">
  <li>
            <a href="http://www.helperblogger.com/">Home</a>
        </li>
        <li>
            <a href="#">Folder 0</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Folder 1</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="#">Folder 2</a>
            <ul>
                <li>
                    <a href="#">Sub Item 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://www.helperblogger.com/">Create This</a>
        </li>
    </ul></code></pre>
<br />
<br />
Now replace <b>#</b> with your links abd replace <b>Folder1,Folder2</b> so on with the text which you want to appear on menu.<br />
<br />
<h3>
Customizations</h3>
Note - I highly recommend you to use our <a href="http://www.editor-btsnts.blogspot.in/" target="_blank">HTML Editor</a> to make your changes.You can see a live preview of your menu with using <a href="http://www.editor-btsnts.blogspot.in/" target="_blank">HTML Editor</a>.Copy all of the above code and paste it into editor.<br />
<br />
<br />
<h3>
Further Help?</h3>
Many newbies bloggers gets the problem while adding links and texts.If you are getting the same problem then simply provide a tree menu of your menu,I will build the HTML part for you.Also feel free to ask  your any little query...</div>

Pure CSS3 Multi Level Drop Down Menu For Blogger

Adding a beautiful drop down menu to blog increases beauty of your blog.Also drop down menus helps your readers to...

Add Facebook Like Box Just Below Of Every Blogger Post

Unknown 0 Blogger Widgets, Facebook, Social Media 00:32

<div dir="ltr" style="text-align: left;" trbidi="on">
<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;">
</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6gukayoYmic0JEXw51MJdo_C5eIZfEGmMtCMWBbjA-gB79bKtEQ0tisnT2MPZIF2CTCYtzwIozvI1O8nBw0niOiODq3aMrOBhDTJQDoxPI8XLIwgcSZPQenEuvmYKdTJmjqBZPLIQZhE/s1600/Facebook.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6gukayoYmic0JEXw51MJdo_C5eIZfEGmMtCMWBbjA-gB79bKtEQ0tisnT2MPZIF2CTCYtzwIozvI1O8nBw0niOiODq3aMrOBhDTJQDoxPI8XLIwgcSZPQenEuvmYKdTJmjqBZPLIQZhE/s200/Facebook.png" width="125" /></a>Facebook is largest social media company in the world having <a href="http://www.alexa.com/siteinfo/facebook.com" target="_blank">alexa rank 2</a>.If you have enough number of subscribers on facebook then just <a href="http://helperbloggerss.blogspot.com/2012/05/automatically-publish-blogger-posts-to.html" target="_blank">automatically publish your posts</a> on your wall and get the traffic.Previously we shared two tutorials about adding <a href="http://helperbloggerss.blogspot.com/2012/05/add-facebook-like-button-to-blogger.html" target="_blank">facebook like button</a> and <a href="http://helperbloggerss.blogspot.com/2012/04/add-twitter-tweet-button-just-below-of.html" target="_blank">twitter tweet button</a> just below of blogger posts this time we will add a full width facebook like box below of every blogger posts.With using facebook like box your readers/visitors can like your fan page directly through your blog so that this box will increase number of your facebook fans.Now lets see how to add it to blogger blog.Also you can see the demo at the bottom of this page.</div>
<br />
<h3>
How To Add Facebook Like Box To Blogger Posts?</h3>
<ol style="text-align: left;">
<li>Go to Blogger Dashboard > Design > Edit HTML</li>
<li>First take a backup of your template</li>
<li>Tick <input type="checkbox" /> the expand widget check box</li>
<li>Find for below code in your template</li>
</ol>
<br />
<blockquote>
<data:post.body/></blockquote>
<br />
Just after it paste below code</div>
<br />
<blockquote>
<b:if cond='data:blog.pageType == &quot;item&quot;'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="background-color: #ea9999;">btsnts</span>&amp;width=<span style="background-color: #b6d7a8;">570</span>&amp;height=<span style="background-color: #9fc5e8;">180</span>&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:<span style="background-color: #b6d7a8;">570</span>px; height:<span style="background-color: #9fc5e8;">180</span>px;" allowTransparency="true"></iframe></b:if></blockquote>
<br />
<br />
<ul style="text-align: left;">
<li>Now replace <span style="background-color: #ea9999;">btsnts</span> with your own fan page username</li>
<li>To change width of like box,adjust the value <span style="background-color: #b6d7a8;">570</span></li>
<li>If you wish to change heigh of like box then just edit the value <span style="background-color: #9fc5e8;">180</span></li>
</ul>
<br />
<div style="text-align: center;">
<span style="font-family: Georgia, 'Times New Roman', serif; font-size: large;"><b><i>Live Demo ?</i></b></span></div>
<br />
<br />
<br />
<br />
<center>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbtsnts&width=570&height=180&colorscheme=light&show_faces=true&border_color&stream=false&header=false" style="border: none; height: 180px; overflow: hidden; width: 570px;"></iframe></center>
</div>

Add Facebook Like Box Just Below Of Every Blogger Post

Facebook is largest social media company in the world having alexa rank 2 .If you have enough number of subscribers on facebook then ju...

Automatically Publish Blogger Posts To Facebook,Twitter And Other Social Sites

Unknown 0 Blogger Tricks, Blogger Tutorials 11:14

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy8hkk80vZxEfmFZSUFx1xVHg3l8cciZTikmyB8e2CHiOceBw2OGADIzP1D1cPZwZW-PUAo0Y5iOnVH3NF7xw_7AvdKJtiDi_KENLW3u8X62pUGlPLl59Gi8-4eBMw8M8XYufOGZfWKDE/s1600/feedburner.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy8hkk80vZxEfmFZSUFx1xVHg3l8cciZTikmyB8e2CHiOceBw2OGADIzP1D1cPZwZW-PUAo0Y5iOnVH3NF7xw_7AvdKJtiDi_KENLW3u8X62pUGlPLl59Gi8-4eBMw8M8XYufOGZfWKDE/s1600/feedburner.png" /></a>Social media plays an important role in improving any blog's SEO.That's why you may watch social media gadgets almost on every blog/website.If you have enough number of subscribers on social sites then just automatically publish your posts on social sites and get the traffic.Today I am giving a tutorial about automatically posting on facebook,twitter and some other social sites with using <a href="http://dlvr.it/" target="_blank">dlvr.it</a> service which is free of cost.I am also using this service to publish my blogger posts facebook and twitter.The reason behind to choose dlvr.it is it is very easy to use and install.You can on-off auto publishing anytime and very easily.Lets see how to use it.<br /><br /></div><br /><h3>Automatically Publish Blogger Posts On Social Sites</h3><br /><ul style="text-align: left;"><li>First go to <a href="http://dlvr.it/" target="_blank">dlvr.it</a></li><li>Signup with giving your email address and choosing password.</li></ul><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdy-hwlhKPS8nV1Zel22cPeXW-iHhA9w5cyMXJGHhkmyEHETAzh1mD8wP8h-6Kr1Szu4mzWHvQxSne9qCkbZD4C68R9LoZSevHXa5cP13VVgNM5ks4UNrO5OlSBApOhKJFGJ0LD5I4yQ/s1600/automatically-publish-blogger-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="42" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdy-hwlhKPS8nV1Zel22cPeXW-iHhA9w5cyMXJGHhkmyEHETAzh1mD8wP8h-6Kr1Szu4mzWHvQxSne9qCkbZD4C68R9LoZSevHXa5cP13VVgNM5ks4UNrO5OlSBApOhKJFGJ0LD5I4yQ/s400/automatically-publish-blogger-posts.png" width="400" /></a></div><br /><br /><ul style="text-align: left;"><li>Now go to your inbox and confirm your email address first</li><li>You will redirect to another page here you have to provide your feeds address in below format</li></ul><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-PYHgnl-mkgjVjL5AB5gTYyhKtSktJiX6SP5IIyWFweD4lDymsKFvZQVvv1eRO49w-wKIgXQkynyqlhEzm708yPwTgNFn1VgQ3OLBefPJLlWpJLuLYeI26xYeqoa7gFJYRLIybUf4nA/s1600/automatically-publish-blogger-posts3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-PYHgnl-mkgjVjL5AB5gTYyhKtSktJiX6SP5IIyWFweD4lDymsKFvZQVvv1eRO49w-wKIgXQkynyqlhEzm708yPwTgNFn1VgQ3OLBefPJLlWpJLuLYeI26xYeqoa7gFJYRLIybUf4nA/s400/automatically-publish-blogger-posts3.png" width="400" /></a></div><div><br /></div><br /><br /><pre><code>http://feeds.feedburner.com/FEEDBURNER USERNAME HERE</code></pre><br /><br /><ul style="text-align: left;"><li>Click on twitter icon and you will redirect to twitter</li><li>Give your twitter's profile's username and password and hit "<b>Authorize App</b>" button.Now your posts will automatically publish on twitter.</li></ul><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzpaUAsPRBbUIOb45v1TxcxAHLzTzr5fIPJvu8hk5XrurHOz4lptT4KboZj_6ctfphtJqchJukwBVqgXHgoJkaEDPX1gBRy-PkjBmLpVkjEaSeb3bnzaXTyqeuYZuVxvszu-bqqj9zdh0/s1600/automatically-publish-blogger-posts2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzpaUAsPRBbUIOb45v1TxcxAHLzTzr5fIPJvu8hk5XrurHOz4lptT4KboZj_6ctfphtJqchJukwBVqgXHgoJkaEDPX1gBRy-PkjBmLpVkjEaSeb3bnzaXTyqeuYZuVxvszu-bqqj9zdh0/s1600/automatically-publish-blogger-posts2.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></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 facebook icon.</li></ul><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUyh0SuKXbLUb1ICtBvARD926mE99qeCu8F1bxnQszMy2ptqvWLWEhWqpftQrQFo_IA7RfAx8Ere7FY2yAAXmDprQ30CX35qQFm62A77vUsFvS7HpeNJ9UorrtLmaV5FprLP7GReM_2v0/s1600/automatically-publish-blogger-posts4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUyh0SuKXbLUb1ICtBvARD926mE99qeCu8F1bxnQszMy2ptqvWLWEhWqpftQrQFo_IA7RfAx8Ere7FY2yAAXmDprQ30CX35qQFm62A77vUsFvS7HpeNJ9UorrtLmaV5FprLP7GReM_2v0/s320/automatically-publish-blogger-posts4.png" width="320" /></a></div><div><br /></div><ul style="text-align: left;"><li>You will redirect to facebook page.Log in to your facebook account from which you are managing your fanpage and select your fanpage.</li><li>Customize your services as you wish and save your changes.</li></ul><div>That's all about auto posting on social networking.If you know more services then share it using contact form below..</div></div>

Automatically Publish Blogger Posts To Facebook,Twitter And Other Social Sites

Social media plays an important role in improving any blog's SEO.That's why you may watch social media gadgets almost on every blog/...