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


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( no-repeat 0 center;}
.stumble{background:url( no-repeat 0 center;}
.delicious {background:url( no-repeat 0 center;}
.facebook{background:url( no-repeat 0 center;}
.twitter{background:url( 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;; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='share on facebook'>Share on Facebook</a>
<div class='twitter'><a href='&quot;; + data:post.url' rel='external nofollow' target='_blank' title='share on twitter'>Tweet on Twitter</a></div>

<div class='stumble'><a href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='share on stumbleupon'>Stumble This Article</a>
<div class='delicious'><a href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='share on delicious'>Bookmark on Delicious</a>

<header>Email Subscription</header>
    To subscribe through email,<strong>Enter your Email here:</strong>

<form action='' method='post' onsubmit='\'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>
    Don't forget to confirm your email subcription.
<p><a href='YOUR FEEDBURNER URL HERE' rel='alternate' type='application/rss+xml'><img alt='' src='' style='vertical-align:middle;border:0'/></a><a href='' rel='alternate' type='application/rss+xml'>Subscribe in a reader</a>
<div style='clear: both;'></div>

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

7. Now save your Template. You are done.


Post a Comment