How To Add Floating Creatures Social Media Icons To Blogger

We all know that traffic in our site is very important and it gives us higher ranking on google search. Thus, we have to find a way on how to do this. One of the solutions to this desires is by putting a Social Media widget button in our site pages.


Today we will learn how to add floating social media connect/subscribe icons to Blogger. The icon buttons are said to be connect as it will only let your blog readers to connect or subscribe with your blog through social media sites. It's mainly found floating right or left and outside of your blog.

In this tutorial, the social sites that I have included are Facebook, Twitter, RSS and Email icons and of-course, you can see them floating. So let's go through the tutorial.

How To Add Floating Creatures Social Media Icons To Blogger?

1. Go To Blogger.com > Design > Edit Html

2. Tick The Expand Widget Templates Box

3. Press Ctrl+F & Find The Code Below

]]></b:skin>

 4. Copy the code below and paste it just after ]]></b:skin> tag and save your template. 

.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);
}

Note: The full widget will be seen floating to right. Changing every right in step 5 to left will make the widget to float to left. If you need to reset the position of it from the top, then increase or decrease 43% or leave as it is.


5. Go To Blogger.com > Design > Page Elements > Add a Gadget
6. Choose <HTML/JavaScript> from the list of the gadgets
7. Copy and paste the code below in the content box.

<!-- 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://www.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 -->
 <a href="http://beautifulbloggerwidgets.blogspot.com" title="What's this?"><img alt="What's this?" src="https://lh4.googleusercontent.com/-tYzqlZDMbPs/TsuXlTbHT9I/AAAAAAAACys/L1-6pj3LnJg/s48/what's-this.png" /></a>
</div>
<!-- Floating Creatures Social Media Icons End -->

 Note: 

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

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →