Spiceup your blog by adding Round Style Social Media Icons at Top Corner

There are many Tricks and Ways to add social media icons on any blog/website. But implementation is the best professionalism instead of getting an idea to teach others. Here in this article we make you educate about How add Popular Social Media Icons rounded button style on top right corner of the page helps indirectly adding more subscribers/followers to blog through this social media round button.

In this Round Style Social media icons covers, Facebook, Twitter, Googl Plus and RSS feed button with rotating feature which attracts visitors on first landing home page.
Let’s begin tutorial for adding widget to blog/website.

Demo

How to Add Round Style Social Media Icons to Blogger?

Sign into your blogger account
From Dashboard Select ‘Template’ link tab
Click on ‘Edit HTML’ link tab and proceed
Now, search for tag

]]></b:skin>

After finding tag copy below code and paste above to it

 /* Round Style Social icons by www.blogtariff.com  Blogger
----------------------------------------------- */
#kosocial-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.kosocial-media-icons {
display:table
}
.kosocial-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.kosocial-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.kosocial-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.kosocial-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Next Search for code line

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

After finding code line copy below code and paste above to it

<div class='kosocial-media-icons' id='kosocial-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/blogtariffcom'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHBIsflELmMibgHyPL0n1f7LXbq9BxZaj0jCsvdKhs-K3blzRCEsXYAeatGnsrYJ4zFW3i0gHMB2ayyJT39FtPWPVklpW8oqIdXGjJ4u6e2aOXxzxfjJuYUlCJEBqg56H3oSPtcerPCg/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/blogtariff'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpCoo32dWY5zbKJCK6hksbFeoQOgamgdSBR3grvpTFK8LDUKt7pBPrXXwgAQ3DJ-VodhO-BTIrXCWATS3UHszlKmKXdfuITrGXlPmuDq7SdOwcqpAjGK9K5vG7pGVn1Xty6yEO1tka6E/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/108581316248547169217/posts'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdguSa-Wr4IBLu1Gv37RLunB0sELU87ZXFPkWyktZddt2yqm2Hss3Ws4HNAqtZuxe_oB-NlbbpXatZN9XulzB9xS3GJYqZrE-ENS9lvHqqotHbJVtNDh41K53GMxmDs7F_cugNS_S0Hc/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://www.blogtariff.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh49TR64XHh6BvF1yTwidkhbcHHE-IZF6xPFQpWwvdiqF-cvzPkbq0bvQpyuUlf3V3uY6xp5Zh-q4am3GmQkcfr0VZREQPbGMzIRw6ffasPLMCGLfU1S2Z3UpBMT77p8loYohQeguXq068/s1600/RSS.png'/></a></li>

</ul></div>

Code Customization:

• Replace http://facebook.com/blogtariffcom with your Facebook page URL
• Replace http://twitter.com/blogtariff with your Twitter page URL
• Replace https://plus.google.com/108581316248547169217/posts with your Google Plus URL
• Replace www.blogtariff.com with your Blog/Website URL

Now Save Template to preview experiment
That’s it done

Conclusive Tips

If you want to add more social icons then copy below code and paste above </ul></div> after following Code Customization as above.

<li class='media_icon'><a href='Social Media URL'><img border='0' src='Image URL'/></a></li>

Author Words:

This widget can give more attractiveness to your blog/website and when any visitor lands on your blog this widget attracts them to subscribe/follow.

Browse More Related Posts