How to Add Social Media Icons to Blogger Header

Posted by on
Adding the social media Icons to Blogger Header makes it easier for readers to follow your blog on social networking sites like facebook, twitter and google+ since they're placed in a better location on your blog.. These social media icons will be placed at the top right corner of the blog's header, and with a rotating effect when a cursor is hovered on them. Below are the guidelines on how to Add Social Media Icons to Blogger Header.


                    Static Facebook Popup Like Box Widget For Blogger
                    Social Follow and Subscription Widget For Blogger

  •  From your blogger dashboard,
  • Navigate to template.
  • Click on 'Edit HTML'
  • Click Inside your template, using Ctrl+F keys search for ]]></b:skin>
  • Copy the code below and paste 'above'    ]]></b:skin>


  Also Read: Floating Social Share Buttons For Blogger
                     Add Facebook Invite Friends Button With Timer In Blogger  


    /* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.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;
}

    • Next, search for this line of code below in your template   
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


    • Copy this code below and paste 'above' that line of code.
    <div class='social-media-icons' id='social-icons'>
<ul>

<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/ID/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://BLOG-NAME.com/feeds/posts/default'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>

</ul></div>

    • Customize the last code above by replacing the text in blue with your Facebook page username, twitter username, google+ ID and your blog URL.
    • To change the default images, replace the URL in red with your image URL.
    • To add more social media icons, include this line of code before </u> tag


    <li class='media_icon'><a href='SOCIAL-MEDIA-URL'><img border='0' src='YOUR-IMAGE-URL'/></a></li>

    • Save the template.

    Do you like this post? Please link back to this article by copying one of the codes below.

    URL Of Post:


    HTML Link Code:

    BB (forum) link code:

    Comments

    Post a Comment

    Please share your views on this topic with Grace Joseph by leaving a comment.