Follow Our Site

Cool Social Media Sharing Touch Me Widget by Beautiful Blogger Widgets

Wednesday, September 12, 2012

Add Creature Style Social Media Icons To Blogger

This is another Creature style social media icons to blogger, this Blogger Widget will change the look of your Blogger Template. This is awesome Gadget as we know social media plays an important role in online business.Every one using social media to boost there leads and sales.

In this tutorial, I have introduced creature style social media icons such as Facebook, Twitter, and you can see them floating. So let's begin with this tutorial.



Live Demo



How to Add Creature Style Social Media Icons To Blogger ?

1. Go to your Blogger Dashboard > Template > Edit Html.
2. Please Back up your Template.
3. Expand Widget Templates.
4. Search for (Ctrl + F)   ]]></b:skin>
5. Paste the following code just below it.

.flt-b2wdt{
 position: fixed;
 right: 10px;
 top: 43%;
}
.flt-b2wdt img{
 float: right;
 clear: right;
 margin: 5px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
.flt-b2wdt img:hover{
 -moz-transform: scale(1.2) rotate(6deg);
 -webkit-transform: scale(1.2) rotate(6deg);
 -o-transform: scale(1.2) rotate(6deg);
 -ms-transform: scale(1.2) rotate(6deg);
 transform: scale(1.2) rotate(6deg);



6. Save your blogger template.
8. Next Step Go to Blogger Dashboard >> Layout.
9. Choose "Add a Gadget".
10. Select HTML/JavaScript.
11. Copy and paste below code

<!-- Floating Creatures Social Media Icons Start-->
<div class="flt-b2wdt">
 <!-- Facebook -->
 <a href="http://www.facebook.com/USERNAME" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://lh3.googleusercontent.com/-QaLRred01jw/ToE0l2ruGBI/AAAAAAAACvc/ydfvF-xOi_4/s800/Facebook_creatures.png" /></a>
 <!-- Twitter -->
 <a href="http://twitter.com/USERNAME" title="Follow me on Twitter" target="_blank"><img alt="Follow me on Twitter" src="https://lh3.googleusercontent.com/-HiZe1pm_Rok/ToE0l_3Wl4I/AAAAAAAACvY/ztE85o-w3Lg/s800/Fa_Twitter_creatures.png" /></a>
 <!-- RSS -->
 <a href="http://feeds.feedburner.com/USERNAME" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://lh5.googleusercontent.com/-16rpSgs_Rdk/ToE0l6-gnjI/AAAAAAAACvg/pbKahocVGVg/s800/Feed_creatures.png" /></a>
 <!-- How to Install -->
 
</div>
<!-- Floating Creatures Social Media Icons End -->




Important Note

Replace USERNAME with your Feed Burner, Facebook and Twitter Username.

12. Last step save your template. Now you get Creature Style Social Media Icons for your blogger site.

If any problem occurs Contact us  :)

No comments:

Speak Your Mind

Powered By Blogger · Designed By Seo Blogger Templates