Tuesday 24 July 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/AVvXsEj-s_sCHkz9NqybBEMZoGBNQtNSdfvA8QI4EQE2s7v76D9RwLekonrI3nidxtUnl2NKOERyG9xdK3-E1nhedIKiGl3lfxGAJbrmdVP405RSzM4sA368WQWY7cM9iHLfPrzxATICl6NdG6U/) no-repeat 0 center;}
.stumble{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Fy-1syRwh6gjjxSgmyNzME9OFFZ2u2THfZ8OCUoBK9rQkDqin9a95sLYu8LsXcQKFlehH5IQPfbX_J97fqTmwUbSXQaOyknB1PpiizhiatUaVhaS4YLfUv6383K0igD3-9JJB_mHKZE/) no-repeat 0 center;}
.delicious {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vnYODjhsYi1rG84l1821PjVm3jW0RmA0VZSWzdqDYy8wcYLobb4qJ7z_HVGGOSG1gHU28D9_Jnb6I2-ng88eOLOvT_S17mSMcXNlyQhmvGvOioveI6mn2dJmnqA7ZhgldqSL_07ltg4/) no-repeat 0 center;}
.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ZWlzSnvr9YgMThB7uB5oA7iEN0us_PEkudauco1ycEb3S0dys_g5xvdsJfHBFgPQ_AVTAaR6qrvyvtZWIHiUcmBXgHEZo86MVy6lvP_5kGLoK8_GkZYC_1m2l5fMILmwHWsxnIbTFxo/) no-repeat 0 center;}
.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtxaWMe8EjxiQxNWQH7XtiXry7Al51887XwtX_mhiGSzv20xDYRPQ-7vFTyoWLNEU3XC9o7v7vARYcWjrBM5y-xLKNkB66yat-fhdeNHYFUGFRsF2dc3HpcG6NlNeeUz0LY9Rsc8UXXoo/) 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.

No comments:

Post a Comment