23 April 2016

How To Add Social Media Buttons To Blogger Header

Social Media Icons are the best technique for getting more and more subscribers, followers etc. In this article, i'm gonna show you how to add social media icons to your blogger header as a widget. These icons appear on the top corner right side of your blogspot blogs. With this widget, visitors are able to easily follow your on different social media networking websites.

How To Add Social Media Buttons To Blogger Header

There are many ways to do this same thing like if you want to add this, you can simply adding a new widget section into your blogger blog header or any other technique, but now here i'm show you to how it done by using an un-ordered list that uses these social media icons like Twitter, Facebook, Google+ ,Feeds RSS, and also it affected with rotation style.

Add Social Media Icons To Your Blogger Header

Step 1 - First of all go to you Blogger.Com account, and then go to "Template" and simply click on the "EDIT HTML" tab.

How To Add Social Media Buttons To Blogger Header

Step 2 - Now here simply expand your CSS Style sheet or simply click CNTRL + F and find the following code " ]]></b:skin> " and then copy below code and paste just above this tag.

/* Social Media icons for Blogger By : www.techora.net
----------------------------------------------- */
#social-icons {
z-index: 2;
position: relative;
.social-media-icons {
.social-media-icons ul {
padding:5px 5px 0 0
.social-media-icons ul {
.social-media-icons li.media_icon {
padding-left:0 !important;
background:none !important;
.social-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;
/* Social Media icons for Blogger By : www.bloggerhope.com
----------------------------------------------- */

Step 3 - Now this time, simply click CNTRL + F and find out this piece of code.

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

Step 4 - Copy below code and just above it paste this code.

<div class='social-media-icons' id='social-icons'>
<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='http://2.bp.blogspot.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>
<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='http://3.bp.blogspot.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>
<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://1.bp.blogspot.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>
<li class='media_icon'><a href='http://www.techora.net/feeds/posts/default'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>

Recommended Customization :

We'll always recommended you to customize your widgets as you want to convert it according to your needs. You can easily change the Usernames of your social networking websites in the Red colors above code.

If you want to change the social icons with your own, then simply change the icon URL's with your own , and if you want to adding more icons in this widget, then add just this code line </ul></div> and then add more icons.

See Example below :
<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

Step 5 - Now finally you have done your work, now save your Template and see your blog with awesome and super rotative social media icons in the header sections.

Previous Post
Next Post

I'm Aamir Saleem, a professional blogger and SEO Consultant. I loves to write on blogging, SEO, Internet Marketing, Business, Social Media and Make Money Online. Connect Me Via !!!