Wednesday, July 25, 2012

Wide Style Feedburner Subscribe Box With Share Buttons To Blogger

As we discussed earlier, Feed-burner subscription
is important part of blogger.If we have enough
traffic we can try to increase our subscribers
with few ways. Awesome 8 Tips To Get More
Traffic To Your Blog
. Follow that 8 tips to get
more traffic to your blog.You can increase
subscribers by adding nice subscribe gadget to
your blog.Earlier also i posted about 3 In 1
Social Subscription Widget Below Blogger Posts
.
or try collections of subscription gadgets by
click here. Follow these steps to add it to your
blog.

Subscribebox+with+share+button


1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Add check mark in Expand Widget Templates.

3. Find this tag by using Ctrl+F   ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

#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/AVvXsEjgI9D10_fs_piAyqbZIzUS3L3TfUXQIysMwengz0qkUuvXePF1OVBV3GSU0Lt5Ov9FOXOzty898SCA4LKsYnAItFI5O6cvmS2A_xKtgdcHqGuRPHNW3dgPIOh9U4siWYceEDlTM8o_LM0/) no-repeat 0 center;}
.stumble{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEfQfehxmvcg75BS09mD13K3E04oNyVdVtwmlKJfvRbpI7Ko1Xa9afBRA-GvnwEINRYsWnSy_Awl9AEbeNko2r3AdOb5sl_6sNaNa3cKdxLyy4Nk3dx9mPoTm65uM7FYYFIkAk8nuRRJM/) no-repeat 0 center;}
.delicious {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpv0OCHpWE0rUfWYmJABw1sfo5dlZ3Sks-DDOxwy7j3MeI1GwAM2pQ-YOJrSG0T0x32V4uUwlyfvR1cQQANk1CjoJsrpb76MENh_eiCg2DxYaqPNQrIwjuguyDxFZFxaXKfTxLW1_HfZ8/) no-repeat 0 center;}
.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixCy1Uh_iwxUekAGVmWxPByB8e2aeMtBDFHjNb_V6PCWloWA7kbbCHpNQB77aWJJPwoLAuaL-v_tEVKjaYeUOwTqq-GdIeKm8YgOoHfMInMfSWR9gi80HJda7BX5SEZ8vOgZhfEmtnLh0/) no-repeat 0 center;}
.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifb7ksSCTmaImklB7gos5qOo5iChZmdwSnHfimJLGWh23YYsgMzay2dlbR2cVBaWzUQ1q-ZqMzo9ZTnQHiiLzJIdnsGNgj-NbtHW3xDAWTX1erhsuvLEDWS8TvbudqxVyaODQ7f6Sk_iA/) no-repeat 0 center;}
.thumb-img {float:left;padding:0 10px 0 0;}

5. Find this tag by using Ctrl+F   <div class='post-footer-line post-footer-line-1'/>

6. Paste below code before <div class='post-footer-line post-footer-line-1'/> code

<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>
<div>
<header>Email Subscription</header>
    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>



Replace with Your Feed-burner URL Here with your feedburner URL

7. Now save your Template. You are done.

0 comments:

Post a Comment