Add Social Sharing icons To Blogger Header

Its old but Old is Gold,Adding Social Media icons in the Top Right Corner of the Blog will help you to improve your Blog Social Status.These icons will activate when someone hover over them,these icons include Facebook,Twitter,and Google+ Share Buttons along with blog feeds option. Actually I got the idea of this article from the below Question.
sharing-buttons

Question:-I don't Like Social Sharing icons in the sidebar,i want to put add these social media icons in Blogger Header,How i will put that?

How To Add Social Sharing icons To Blogger Header


  • Now We have to expand the style,For Expanding the style Find <b:skin>...</b:skin> in the template coding and immediately click the small arrow left to <b:skin>...</b:skin> 
  • After expanding the style search for this tag ]]></b:skin>
  • Now Copy and Paste the below Code just above ]]></b:skin> tag
  /* Social icons By ThatsBlogging.Blogspot.Com
----------------------------------------------- */
#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;
}

  • And Now Search for the below Line in the Template Coding
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>  

  •  Now Copy the below Script and add it above this Line <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>  
  • Code is below
 <div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'><a href='http://facebook.com/RoseNbushes'><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/#!/thatsblogging'><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/g+idgoeshere/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://BlogName/feeds/posts/default'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>
</ul></div>

Changes in Coding

  • Replace "rosenbushes" with your Facebook Username 
  • Replace "ThatsBlogging" with your Twitter Username 
  • Replace "G+idgoeshere" with your Google+ ID
  • Replace "BlogName" with your Blog Link 
  • And Replace all the Green Links with the icons url if you want to add new. 
  • Finally hit Save the Template and enjoy Social Sharing Icons On Your Blog Header.
So What's Up:- Share your Beautiful ideas with us about these icons,ask any question,Stay Blessed Happy Blogging.
SHARE

Iftikhar Uddin

I am a Web Developer,Graphic Designer,Blogger Wizard,WordPress Samurai,Code Engineer,SEO Guru,Software Engineer and food hunter.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

17 comments:

  1. Replies
    1. Thanks for Stopping BY Waseem Khan ! You are welcome to our site , Keep visiting Our Blog !
      Stay Blessed!
      Regards,
      Iftikhar!

      Delete
  2. Thank you, but is there a way to align them on the same level with the header? When I change this part:

    #social-icons {
    margin-bottom:10px;
    height:50px;

    and make the height:0px;

    I can't click on the icons.

    ReplyDelete
  3. Thanks! these are great! As Kendisi said, is there a way to align them with the header? Also, is there a way to make those icons open their pages on a new tab instead of changing the existing page?

    ReplyDelete
  4. I cant search the second code why not
    www.thatnigeriangril.net

    ReplyDelete
  5. I really glad to get the easy steps for adding social media icons on the blogger for the purpose of sharing and promoting the website.
    Web Design Company London | Web Design London

    ReplyDelete
  6. thanks! but how do i get the search bar up in html

    ReplyDelete
  7. Thank you , this worked perfect!

    ReplyDelete
  8. This post is fabulous - useful and helpful. I've added 3 of your sm icons plus instagram, to my blog. I couldn't find an insta icon that matched the size of yours, so I just changed you icons size using the icons from the insta page I had found.
    I love how they rotate and being able to open them in a separate window is perfect.
    The only question I have is about the mobile view. When I open my blog on my phone, my header and the icons are on top of each other. Is there some 'outside the square' solution to this I haven't been able to work out?

    ReplyDelete
  9. Thank You for explaining with details.

    ReplyDelete
  10. it is above of header and may i know how can i remove it again. actually i don't want at this place . can i re locate them ..?

    ReplyDelete