Hello friends, in this post I will tell you how to display latest stylish subscribe icons widget for blogger. I had seen on a lot of sites.Because of my self imposed break from
publishing such tutorials I decided to add the code into jsFiddle and
send out a Tweet and add it to our FaceBook page so followers could grab
it.Since then I have got a lot of requests from people who don't quite
understand how to transfer the code on jsFiddle to their blogs.
Add The subscribe Icons Gadget To Blogger
- Login in to your Blogger account.
- Now navigate to the Layout section from your dashboard.
- Click to add a HTML/JavaScript gadget where you want this widget to appear.
- Copy and paste the following code in to it.
Code :<style>
.social{background:none repeat scroll 0 0#fff;border-bottom:1px solid#F0F0F0;height:90px;padding:8px}.social li{float:left;margin-right:4px;text-align:center;width:52px;list-style:none}.social li.last{margin-right:0}.social li a{color:#666666;font-size:11px;line-height:34px;opacity:0.6;padding-top:42px}.social li a:hover{color:#666666;opacity:1;text-decoration:none}.social.social-feed{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Lle4feK1yWq6ggwsZ9AXj1B17yRAH_dQpXqr7Xt_K1I_VVyvQPU-vLvMePFz0y6qRF1GA2pn_y7JtO2N769CfrD-7XWFne7MsOFr2fHCcGKcegqaIIcqI1ZMIYtmdN7Xof7xfGhIIczW/")no-repeat scroll 0 0 transparent;display:block}.social.social-email{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib4JmNAx8m5HSAf4FVh_QW6EohRLHSvhAEeDVxQASsGfgr5xjodnqVvV_lMTDxb-LkySzDdl6dQKSVQnqZT8fffqARqsZLUHicNDGnsB_bA3Gv16dBAyclOhfg923BasE63V9-aUQHrgnu/s1600/email-feed.png")no-repeat scroll 0 0 transparent;display:block}.social.social-twitter{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1x5Nu0gOAn6lEKZlCdVuFR9yzcYj_UPQ5W-0XOn3KSSW4vWJL7IYhcROgLOB2t6z6E52vdBb9RK6wYmWmNubNZe1-k7fTdAPJDcuaisH3lRiOK8Na9IeCs6JEmAB0j8eKDDGPejxH2mIV/")no-repeat scroll 0 0 transparent;display:block}.social.social-facebook{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCSUi84Vgbew73NY94CjZHPC3qfqb5nYaYkAHdizz3C70S_ogcO632sz88Usd_onKOW-xBQjdBPV1fQ9zkeD5_12xNE1mjczaSjmNdBR5RwOIqSBqsDsgC2LF8Ig8UcZE3kQ5O5SbIEPeU/")no-repeat scroll 0 0 transparent;display:block}.social.social-googleplus{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67c93_FebtqfGT__QANk-UfRMn22i7HDz4oBT-i53LGr2DFoiG3TUH2najQmyf8NNeoccswm1NZefT6WA1zOLz0QfQzexUIYB09X6nBRHH_lx5UOxV8rGYzAXNNfP4mJxWvC3o9-YnkHq/")no-repeat scroll 0 0 transparent;display:block;margin-right:0}.social.social-pinterest{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijLiFhLptG1b-B-Go166ZySefwN7-VW8hYJ6b6IVOHyZgg6CNsbIICGGe1QKXDJx43pLyMl0Bu8QbwvE60FHKcGc9PPASAtwOG4guIvQRiyjXdDLbsQhCXnELoH3r_5x8F8KZsSeDdSRbk/s1600/pinterest-icon.png")no-repeat scroll 0 0 transparent;display:block}
/* from http://www.makemoneyfreewithus.blogspot.com */
</style>
<ul class='social'>
<li><a class='social-feed' href='http://feeds.feedburner.com/My blog' rel='nofollow' target='_blank'>RSS</a></li>
<li><a class='social-email' href='http://feedburner.google.com/fb/a/mailverify?uri=My blog&loc=en_US'
rel='nofollow' target='_blank'>Email</a></li>
<li><a class='social-twitter' href='http://twitter.com/My blog' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class='social-facebook' href='http://facebook.com/My blog' rel='nofollow' target='_blank'>Facebook</a></li>
<li><a class='social-pinterest' href='http://pinterest.com/My blog/' rel='nofollow' target='_blank'>Pinterest</a></li>
<li class='last'><a class='social-googleplus' href='https://plus.google.com/b/108200902911276741668/10820090291127674166/posts'>Google+</a></li>
</ul>
<small><a href="http://www.makemoneyfreewithus.blogspot.com">Blogger Tips and Tricks</a></small>
Important Notes : The social and feed links are highlighted in red, you need to change these to your own.
Post a Comment