Saturday, June 1, 2013

How To Display Social Media Icons In Blogger Header

Author: Gagan Masoun
Social Media Icons In Blogger Header
Adding Social Media icons in the Top Right Corner of your Blog will help you to increase fan following. Today, in this article we will show you "How To Display Social Media Icons With Rotating Effect In Blogger Header". These icons include Facebook, Twitter, Google+ and RSS feed. We have published many social widget already on Blogs Daddy blog. In easy steps you can add this widget to your blogger blog. 

Add Social Sharing Icons To Blogger Header

The first thing you need to do go to Blogger dashboard. Now select your blog and go to Template ›› Edit HTML, and find ]]></b:skin> code in your template. Copy-Paste the below code just above ]]></b:skin> tag.

  /* Social Icons
----------------------------------------------- */
#social-icons {
margin-bottom:10px;
height:50px;
width:100%;
display:block;
clear:both;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.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;
}
  • Now, search for the below Line
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  • And just above it, add given below code:
<div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'><a href='http://www.facebook.com/BlogsDaddy' target='_blank' rel='nofollow'><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/BlogsDaddy' target='_blank' rel='nofollow'><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/117100549673033253859' target='_blank' rel='nofollow'><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://feeds.feedburner.com/BlogsDaddy' target='_blank' rel='nofollow'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>
</ul></div>
Also Read - Circle Social Media Icons Widget For Blogger Blog 

Customization

The social and RSS feed links are highlighted in red color, you need to change these to your own. If you our help then ask via comments. Peace, Blessings and Happy Blogging :)

Author
Author - is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddyYou can also follow him on Google+.

2 comments:

  1. Thanks for bringing this up, I need your advice. Have a look at my blog, it has a custom template I downloaded and on the top left corner I also have these social icons, but when they clicked on, it takes users back to my home page and not to the respectable social networks. How can I change this? I'm sure it put's lots of readers off my blog when they click it and nothing happens.

    ReplyDelete
    Replies
    1. Hello Denzil,

      I checked your blog, you just need to change your social profiles links. Then your readers can catch you on social network.

      Go to Blogger Dashboard >> Template >> Edit HTML >> Click Anywhere In Your Template Editor and Find below code:

      class='feedlist'

      below this code you can change profile URL's..

      Thanks
      Gagan Masoun

      Delete