Some days ago i have write another post about Attractive Subscribe Section For Blogger . You can see this for adding social subscription in your blog. To day i am writing about another Social Subscribe Section for blogger. I think this simple tips make your blogger blog more beautiful. Social subscription section is very important for blogger. Because now a days social network tons of traffic. So let see how it look like and how to add it.
 |
|||
| example of widget |
You can add this to your blog in just 2 step. So let see how to add this widgets in blogger blog.
Step 1:
1. Click Design and then Edit HTML from blogger Dashboard
2. Click in the left side box to Expand Widget Templates
3. Find this – ]]></b:skin> and past the bellow code just before
#subscribe { background:#f3f3f3; width:308px; padding:8px 5px; border:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; font-size:8px; }
.subscribe_icons { width:286px; margin:0px auto; }
.subscribe_icons li { display:inline; float:left; margin:0px 2px 5px 2px; width:52px; text-align:center; font-size:11px; }
.subscribe_icons a { display:block; padding:40px 0px 2px; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; color:#444 !important; }
.subscribe_icons a:hover { color:#26b !important; text-decoration:none; -moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); }
.subscribe_icons .subscribe_buzz a { background:url(http://1.bp.blogspot.com/_ubwIhqPcR6M/TIZY0sbO0OI/AAAAAAAAA9c/1xJF5-MDwhg/s1600/buzz.png) center top no-repeat; }
.subscribe_icons .subscribe_twitter a { background:url(http://1.bp.blogspot.com/_ubwIhqPcR6M/TIZZDKoUuUI/AAAAAAAAA9k/5tMMs9lM198/s1600/twitter1.png) center top no-repeat; }
.subscribe_icons .subscribe_facebook a { background:url(http://4.bp.blogspot.com/_ubwIhqPcR6M/TIZZXPQXpOI/AAAAAAAAA9s/eUtxrhfsQnw/s1600/facebook1.png) center top no-repeat; }
.subscribe_icons .subscribe_rss a { background:url(http://4.bp.blogspot.com/_ubwIhqPcR6M/TIZZpMLXofI/AAAAAAAAA90/38UW2P6muCw/s1600/rss1.png) center top no-repeat; }
.subscribe_icons .subscribe_email a { background:url(http://3.bp.blogspot.com/_ubwIhqPcR6M/TIZZ2uMQeWI/AAAAAAAAA98/Rl3vTdU58gU/s1600/email.png) center top no-repeat; }
4. Save it
Step 2:
1. Now go to the Page Element which you will find in left side of Edit HTML
2. From the right side click Add a Gadget to add a HTML/Javascript box .
3. In the HTML/Javascript box paste the code given bellow :
<div id=”subscribe”><ul class=”subscribe_icons”>
<li class=”subscribe_buzz”><a href=”http://google.com/profiles/techwev” rel=”nofollow” target=”_blank”>Buzz</a></li>
<li class=”subscribe_twitter”><a href=”http://twitter.com/techwev” rel=”nofollow” target=”_blank”>Twitter</a></li>
<li class=”subscribe_facebook”><a href=”http://www.facebook.com/techwev” rel=”nofollow” target=”_blank”>Facebook</a></li>
<li class=”subscribe_rss”><a href=”http://feeds.feedburner.com/techwev” rel=”nofollow” target=”_blank”>RSS</a></li>
<li class=”subscribe_email”><a href=”http://feedburner.google.com/fb/a/mailverify?uri=techwev&loc=en_US” rel=”nofollow” target=”_blank”>Email</a></li>
</ul><div class=”clear”></div></div>
4. Save it and see how it look like. If anything need about this post pls comment. I will try to help you.
Related Post
February 6, 2012 at 3:58 PM
very nice post..i liked this widget..really attractive.