Add share box with feedburner box below blogger post . 0

| | , ,

Hi now add this popular widget share box with feedburner subscription box below your blogger post so that visitor share most useful post on their network.











Follow simple and easy step to adding this great widget below your all blog post--->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in  small box to expand your blogger template.

* Now find this code ]]</b:skin>  by CTRL+F key easily.

* Copy below code and paste before ]]</b:skin>

#subscrbie_posts {padding: 10px;border:1px solid #E9E5B1;background:#FFF3D6;text-align:left;font-size:100%;line-height:1em;color:#272727;font-weight:normal;}
.subscr-right {border-left:1px solid #D2D8DE;width:160px;padding-left:10px;float:right;}
.subscr-right header{color: #333;font: normal normal bold 17px/17px Arial, sans-serif;margin-bottom: 10px; padding: 0px;text-align:center;}
.subscr-right ul{display: block;list-style-type: none;margin: 0px; padding: 0px;}
.subscr-right ul li{list-style-type: none;padding: 0px;margin: 0px;}
.subscr-right ul li a{color: #333;font: normal normal bold 12px/12px Arial, sans-serif;line-height: 25px;padding-left: 10px;}
#subscrbie_posts header{color:#333;font: normal normal bold 17px/17px Arial, sans-serif;margin-bottom:10px;text-align:center;}
.digg a, .stumble a, .delicious a, .facebook a, .twitter a{padding-left:20px;font:bold 12px/12px Arial, sans-serif;line-height:25px;color:#333;}
.digg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWurDEZ-zhHAO46xkBTiuc39IuDvHtXyWffCz_lPdf55btm_PAGjonoqlZFwnHIkuKXuTg6xkKF2TEqmMwPxVMwtgp4aQKgQwN-7i1utlJI1n-QE_RYqS8SRTbkRgfgUELkeby4gAOQ0/) no-repeat 0 center;}
.stumble{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhImucyF0jJbUvfTmkDEZTKO0JDzDV8iQdd-ISM-177dt0EZW0MiIGLG3SoFZbvrEnIw2tEaK3ytQ4EZafkJew4pO2aLdhpo-nqwCjJtXxakdpXV8ebNR445lEZDNNgtUIW6PjFQ2zn8pE/) no-repeat 0 center;}
.delicious {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWjPhji64xMKGKP6dXzLVW3tDH970LfITwC0i1f9b0WXS88pImitr_RtWr9jlbBL0TfPgk_yk17jzskw8Uo5_UUCkNVEAXjdvQ0lRx7XMmFIqdCja7_Q8OOiqcq53wNB59zeqT-Zh4a4c/) no-repeat 0 center;}
.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMLlwRwrXHmiW7eyLMt6CO9P0gi1wiqx4x3ssyiEs7saryYoPDYG5bD-srqZcaPv9Hn4IDlaeEIIi_cV6LXOgBFBBC5Bqz4nqxIBfRXBVPG4B8J2kdc2o1eG7wt4HIXZumrGFjNlHpGFg/) no-repeat 0 center;}
.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8xnOHKTJ8S1nvzQ4A0IDRtrboHRSRYKJmKulPgHKG-IJKoCNjT4yjiQGlJQGonqpJr-qZbHxwVEDJ10KY5R0ZDqf76fPVDkWpD2ZdHVyy3oerweX3_yjyNctV6HFglVWUo-IYKQo3qc8/) no-repeat 0 center;}
.thumb-img {float:left;padding:0 10px 0 0;}

* Now again find this code  <div class='post-footer-line post-footer-line-1'> by CTRL+F key easily.

**  Copy below code and paste after <div class='post-footer-line post-footer-line-1'>
 
<div id='subscrbie_posts'>
<div class='subscr-right'>
<header>Share This Article</header>
<div class='facebook'><a href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='share on facebook'>Share on Facebook</a>
</div>
<div class='twitter'><a href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='share on twitter'>Tweet on Twitter</a></div>

<div class='stumble'><a href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='share on stumbleupon'>Stumble This Article</a>
</div>
<div class='delicious'><a href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='share on delicious'>Bookmark on Delicious</a>
</div>
<div class='digg'><a href='http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='share on digg'>Digg this Article</a>
</div>
</div>
<div>
<header>Email Subscription</header>
    Stay Updates with this Blog. You can get the new posts on your mailbox. To subscribe through email,<strong>Enter your Email here:</strong>

<p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(\'YOUR FEEDBURNER URL HERE\', \'popupwindow\', \'scrollbars=yes,width=550,height=520\');return true' target='popupwindow'><input name='email' style='width:240px' type='text' value='enter email address here...'/><input name='uri' type='hidden' value='YOUR BLOG NAME HERE'/><input name='loc' type='hidden' value='en_us'/><input type='submit' value='subscribe'/></form>
</p>
    Don't forget to confirm your email subcription.
<p><a href='YOUR FEEDBURNER URL HERE' rel='alternate' type='application/rss+xml'><img alt='' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a><a href='http://feeds.feedburner.com/feed39' rel='alternate' type='application/rss+xml'>Subscribe in a reader</a>
</p>
</div>
</div>
<div style='clear: both;'></div>

NOTE:- Now change highlighted text in above code with your own as your feedburner url and your blog name.

* Now save your HTML/javascript and now you are done.

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Add share box with feedburner box below blogger post . ~ Twitter FaceBook

0 Responses So Far:

Categories

Select Your Categories