How To Add Social Media Icons to Blogger Header

social media icons, facebook icons, social media icons for bloggerThis tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like adding a new widget section to the blog header but now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them.

You can see a demo in this test blog.


Adding Social Media Icons to Blogger Header

Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button:

blogger blogspot, blogger template, blogger gadgets

Step 2. To expand the style, click on the small arrow on the left of <b:skin>...</b:skin> (screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) and add this code just above it:

 /* 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;
}

Screenshot 1:


Screenshot 2:


Step 3. Now search for this line

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

Step 4. And just above it, add this code:

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

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaZO4YyH2eTaXLC7ttlSakpYhleKI3FmlzKue7m-MtwFWkUZojmKs-8bmFC6PgDBY65H7CvM4VjAJVA2UmXtAaHQTLrAwgGdqsL7eSnk3nB9DxmE-c5t4G8UpYVBgQIPnRSBUFJDtlXJk/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBvtR2PaPYFzLg1Go02ah4gjbU0aYUEYbrOlmFvmFsyjqH7TS1eK8Wz1e0PLbGGYF_J2gOHbaTtVQ3rT5TAFMnzYc2UfTuU6hXcU8jaQ0mgUgpqU9ShDcKsiaTxrHRld5KdtEpKrP0vbA/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO20ezyDMULlDloAsCEyjf6se3f-D7qVY6zbvaoXSWWRxIHgs62nkKkn45sMIMce2Camk8-WpLblT_x9RGlIUpnQQc2em0B2HEgNPfKKsM1NiR-8nI9urB0tIIj-dNzKMnvCtGzSaL_Xg/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiME5j3P7iw92aWxx0DxtjQ6hC8ZqaqzgSgd80EiIkBs7St9PrSKLRhvD2cFqunpfJ_dNDeRtmiLc1W-5FE5FMyf3PvhfQPDP05yMWe5D1iJVZVe_tCX6yfNvX0JzsPcqYMa_ZzIfJ4FqI/s1600/RSS.png'/></a></li>

</ul></div>

Customization

- Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.
- To change the icons, just replace the urls in blue with the ones of your images.
- You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want:

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

Step 5. Finally, Save the Template to apply the changes.
The effect is done with CSS3, so this effect will not work in older browsers.

104 comments:

  1. thank you for sharing how to set up a social icon in the header blogger.
    And not only serves it easier for visitors to share content, but also as a tool to beautify blog.

    ReplyDelete
  2. How do I make mine go flat, like yours are in the screenshot please? You can see them all messed up here --> http://intertwinedbmgm.blogspot.com

    ReplyDelete
    Replies
    1. Hi Natasha,
      Sorry but I don't see them anywhere on your blog.
      Could you make a screenshot?

      Delete
  3. Great post, Indeed. I will try this code in my blogs to get better blog website design. Thanks a ton for sharing this wonderful information with us.

    ReplyDelete
  4. It actually work honestly thanks alot

    ReplyDelete
  5. thank you for this blog!.. it really helps me cause im new in the bloging world
    here 's what i've done http://easydomainfree.blogspot.com/

    ReplyDelete
  6. how can we put this social media buttons in front of the header having an image without any "damage made" on it?

    ReplyDelete
  7. Thanks so much for this tutorial. You make my blog a better looking blog :)
    www.septimes.com

    ReplyDelete
  8. This worked great except it scooted my blog title down. How can I fix it? I have a pre-made template but can edit the html. Thanks!!

    ReplyDelete
    Replies
    1. You have to reduce the margin-bottom value (-30px) that is just below #social-icons {
      Thanks for visiting!

      Delete
  9. work perfectly, but i got problem because i use responsive template from Flat UI
    do you have tutorial about add social media button on sidebar/ use widget?

    ReplyDelete
  10. amazing! I used this on my site

    http://collegemarketing101.blogspot.com/

    ReplyDelete
  11. Great post - I have a handful of blogger blogs I should neaten up and add social icons too if only to increase their social sharing a little. Love what you've done with your blog. :)

    ReplyDelete
  12. It worked! But the icons are located before my blog header, so now the last part of my blog title is missing. Do you know how to fix this?
    Naomi, x

    ReplyDelete
  13. Thank you for sharing. Worked perfectly.

    ReplyDelete
  14. Thanks, work perfectly.

    ReplyDelete
  15. Hi, thanks for this. I'm wondering how to actually change the position of the icons please?

    ReplyDelete
  16. Thanks for sharing, helped me so much! I got a question: could you do a tutorial on designing those buttons in photoshop? I'd like to make one for instagram and pinterest and so on, but I don't know how ... :)

    ReplyDelete
  17. Yes this was a great tutorial and I was able to follow it directly, but I actually would prefer the icons in my sidebar, not in my header, because it cut off my header image. Thanks, though!

    ReplyDelete
  18. thanks for information...
    its worked

    ReplyDelete
  19. how to open these in a different tab ?

    ReplyDelete
    Replies
    1. I'm keen to know too! Thank you for the post by the way, and thank you for making it so easy to follow!

      Delete
  20. I tried errors appearing....i have a template from deluxetemplate.net..how can i use your explanation..i seriosly want the icons..

    ReplyDelete
  21. Hello admin,
    Thanks for this valuable post. Nice code for me. But i am in vain.

    Best Regagards,
    ataur

    ReplyDelete
  22. great tuts, i'll just take this one... thanks for clear share.

    ReplyDelete
  23. Thank a lot for the post. Can you please add a pinterest button and subscribe to email button in this?

    ReplyDelete
  24. Sure it worked. But i had problem with the last button....see my site

    http://tainersposts.blogspot.com/

    The last button does not show anything..... it just says page cannot be found...

    ReplyDelete
  25. My blog's HTML doesn't have ANY of the code we're supposed to find....what?

    ReplyDelete
  26. This was so helpful.

    Thanks a ton!

    ReplyDelete
  27. This works great. I spent so much time looking how to do this and cam accross your post by accident. I tried to add pinterest button but I don't have image source code. Would you happen to have that?

    ReplyDelete
  28. I keep getting a "400 Error" when I try to do this. What am I doing wrong? Help!

    ReplyDelete
  29. in my blog, the buttons get pasted on left side and put down title right below them, what should i do for this? help

    ReplyDelete
  30. Hey I hope that you can help me. Here's the link to my blog : www.tabeamw.blogspot.com

    You can see that the right side of my header is away because of the icons.

    Can you help me? Thanks :-)

    ReplyDelete
  31. This is nice post. Please help me add addthis social button in my blog. Thanks for your help.

    ReplyDelete
  32. Thanks for the tutorial I will apply at my blog.

    ReplyDelete
  33. Thank you so much! This is perfect and easy to follow! I have shared it for others because you totally deserve it!

    ReplyDelete
  34. this is an awesome tip I was looking for long time. I am sporting the icons now in my blog. thanks to you

    ReplyDelete
  35. hi admin, this is a great tutorial, I want to ask how can I group my icons in to three, its eating up the space in my header, thanks a lot

    ReplyDelete
  36. It works thanks, but my rss feed does not work

    http://zakson-tech.blogspot.com/

    ReplyDelete
  37. when i tried this on my blog, the four icons worked perfectly but they were not displayed over the header image instead my header image got resized and the icons were displayed on the right side horizontally please help me to place the icons on the top right end of the header image..
    my blog address is :
    http://easysubtitles.blogspot.in/

    ReplyDelete
  38. I've tried 3 times to add this code, but it won't save to my blog.

    ReplyDelete
  39. thanks a lot..finally i got it from you..its awesome..and its working now perfect thanks

    ReplyDelete
  40. mommyshane.blogspot.comDecember 3, 2013 at 6:11 AM

    yey! Thanks! :)

    ReplyDelete
  41. That's amazing! Thanks so much.

    Is there a way to add an instagram button?

    ReplyDelete
  42. How can I put them over the banner I have on my header. Thanks.

    ReplyDelete
    Replies
    1. If you want to move them further from the top, change the -30px; value from margin-bottom:-30px; (#social-icons). To move more on the left, add below #social-icons { this line:
      margin-left: -50px;

      Then change -50px with a bigger/smaller value.
      Sorry for replying so late.. I hope this will help you!

      Delete
  43. Great article, helped me a lot!
    One thing though: I'd like to change the icons into black and white ones and I've been trying to change the urls with the ones of my chosen images, however it doesn't work. I'm able to replce them but then nothing shows on my blog. Which url should I use exactly?

    The linke to my blog is the following: http://lifeofahautecouturehooligan.blogspot.nl/
    Thanks in advance!

    ReplyDelete
    Replies
    1. Did you click on the Save template button after replacing the URLs? And please make sure that you don't remove any quote and replace only the address in blue. Thanks for stopping by!

      Delete
  44. Thank for this! It's really cool. I just have a problem with adding new icons because some of the icons I tried use are too large so I ended up getting a massive icon. How do I make it smaller?

    Thanks :)

    ReplyDelete
    Replies
    1. Hi Lauren,

      Please add this code above ]]></b:skin>

      .media_icon img{
      width: 30px;
      height: 30px;
      }

      And change 30px if you want to make your icons bigger/smaller, then Save your Template.
      I hope this will work for you. Thanks for visiting!

      Delete
  45. Hi, I posted my icons and they ended up being placed vertically on top of the header (with the header posted after and beneath it) any fix? Thank you!

    ReplyDelete
    Replies
    1. Hi Jay,

      Add the codes in bold to this part:

      #social-icons {
      margin-bottom:-30px;
      height:50px;
      width:100%;
      clear:both;
      z-index: 2;
      position: relative;
      display: inline-block;
      float: left;

      }

      Delete
  46. Thanks so much for this - easy to follow. I feel empowered!

    ReplyDelete
  47. Thanks a lot!! :) I was searching the entire web just to get this feature added. It looks great to have it in my blog. But I would like it to be placed on the top towards the extreme right. Its now placed right above my blog title. http://blushblossomsgallery.blogspot.in/

    ReplyDelete
  48. This was so useful. I am trying to add the instagram logo in my header but am struggling to find a matching size and shape to the ones already given by you. Do you happen to have a link to a matching instagram logo?

    ReplyDelete
  49. Oh it make my Blog very nice http://caomode.blogspot.com/
    thank you ;)

    ReplyDelete
  50. Thanks for the tips - worked for me. Do you know how to customise the text that appears when you share via Twitter so that it gives a personal twitter handle and not ' via @Helplogger' ?
    Thanks!

    ReplyDelete
  51. Thanks dear...very useful article :)

    ReplyDelete
  52. Thank you so much! Your instructions are clear and easy to follow!

    ReplyDelete
  53. Hi,

    Thanks for sharing your exertise.

    I don't have
    in my blog. Can you help, please?

    Thank you.

    ReplyDelete
  54. Questions will using this code on a dynamic view template work?

    ReplyDelete
    Replies
    1. Sorry but as far as I know, Dynamic Views templates don't support gadgets or custom HTML/CSS.

      Delete
    2. It is possible. Check out http://dynamicblogger.com.

      Delete
  55. Thank you for post. I need this :)

    ReplyDelete
  56. Hello, Whatever I do I can't get the icons placed horizontally and animate in my horizontal menubar or anywhere in the header of my blog http://lastingrose.blogspot.co.uk/
    The html specifies a class .media_icon which is not in the css and which is taking up the full width of the division making the icons stack up rather than place horizontally even when display: inline-block; and
    float: left; are specified for the parent division. Could you give us a css suitable for horizontal placement and animation?
    Many thanks for this nice work.

    ReplyDelete
  57. Thanks for taking note of my comment. I sort of managed to get the icons on to my CSS menu bar after removing the DIV and UL tags and placing the li tags below others in the bar. I had to delete a couple of existing menu items to make some space for the buttons as they inherit a width of 88px and won't get any closer. Also the animation doesn't work . I suppose there is a way to include the css in those of the menu bar to get everything working. My template is Metro Minimalist . I would appreciate your help.

    ReplyDelete
    Replies
    1. Hi Sreedhar,

      For the animation on hover, try to substitute .social-media-icons li:hover with li.media_icon a:hover as you removed the div which has the social-media-icons class assigned. Regarding the icon placement, I will need to see them there in order to figure out what you need to change. I would recommend you to add the entire code because once you remove the div and ul tags, the style of the menu elements will override the style of the social media icons and this will only complicate things. Sorry for the late reply.

      Delete
  58. Hey.. I did this and they are listed vertically but I want them horizontal. Please help!!!

    ReplyDelete
  59. Very helpful. Thanks for this.

    ReplyDelete
  60. Hello,

    thank you for the great tutorial, it was very helpful! I was just wondering how you would go about making each link open up in a new tab or window? Just in case you want readers to stay on the page they are on still be able to visit your social posts.

    But I was able to add it to my site regardless, and it looks great!
    http://spritendeb.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Sprite,

      You will need to add the target="_blank" attribute to your links (step 4) - for example: <a href='url-here' target="_blank">

      Thanks for visiting!

      Delete
  61. This post is fabulous - useful and helpful. I've added 3 of your sm icons plus insta 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?

    Thanks

    ReplyDelete
  62. Thanks for this article. My blog look like a pro now.:D

    ReplyDelete
  63. Don't why it comes on left side for me.
    www.peaceguidance.blogspot.com

    ReplyDelete
  64. Thank you for sharing,it worked great,I just have one question,how to make the link open in a new tab? I tried adding target="_blank" but error shoved up.

    FASHION with VALENTINA.

    ReplyDelete
  65. Not sure what blue URL you are talking about to change the icons?

    ReplyDelete
  66. How do you get image url for instagram and instead of opening in the same page how do you get it to open in a new link?

    ReplyDelete
  67. Can I add social media icons without having a social media site. I want to add those icons, so others can share it. How would I proceed in step 4?

    ReplyDelete
  68. Admin:
    I added the 'social media' icons, it was fine.
    Then I added the floating bar and removed it after a day.

    After that the header social media icons are left aligned. Please help

    ReplyDelete
    Replies
    1. Hi Ruchi,

      Go to Template, hit the Customize button and navigate to Advanced > Add CSS. Paste this code inside the box and hit the 'Apply to blog' button:
      .social-media-icons {position: absolute; right: 0; z-index: 100;}

      Hope it works.

      Delete
  69. Thks I've managed to get the icons on my blog but the icons are on the left hand side and go down - how do I get them on the right and horizontal? Plus can you give me the Pinterest script? Sorry not very computer savvy

    ReplyDelete
    Replies
    1. Hi Karen,

      Go to Template and press the Customize button > navigate to Advanced > Add CSS and add this code inside the box:
      li.media_icon {display: inline-block; float: right;}

      Hit the 'Apply to Blog' button to save the changes. To add the Pinterest button, go again to Template > Edit HTML and add this line just above the </ul></div> tags (see step 3 and 4):

      <li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' height="36" width="36" src='http://4.bp.blogspot.com/-Xd5UE2Ozb8U/U_j46P_3VeI/AAAAAAAAKOw/3z5Ju_NQU2o/s1600/pinit-button.png'/></a></li>

      And hit the 'Save template' button.

      Delete
  70. Sorry it is still not working. The whole of step 2 is in the CSS box and I've tried it with the new
    code at the bottom and at the top. I've even deleted step 2 from the box altogether but nothing seems to work? Plus the icons also have a black dot to the left side.
    Here's my blog just in case it is easier to see it http://frumpytofunky.blogspot.com
    Thks for the Pinterest button - have added successfully
    Karen

    ReplyDelete
    Replies
    1. Hi Karen,

      I'm not sure if this is the problem, but it appears that there's a missing bracket in the CSS code. Try to find this part in the HTML of the template (click anywhere inside the code area and press the CTRL + F keys):
      #header-inner img

      just below you should see this line
      margin: auto;

      if there's no curly bracket after it, add it like this:
      #header-inner img {
      margin: auto; }

      And Save your template. If it still doesn't work, please send me a copy of your template at heplogger76@gmail.com

      Delete
  71. Hi Admin , have emailed you and attached my template. The icons have now moved to the right Yay!! but no longer work i.e. don't link to my social medias. It looks pretty though :) Thanks for all your help and I hope you can solve the problem. K

    ReplyDelete
  72. It's kinda okay now..I have to skip step 2..and it seems okay on my blog. thanks again for great tutorial.

    ReplyDelete
  73. Hello, this is a great tutorial. However, how can you add new social icons. Please see: http://yesim.blogspot.com/. I need to add skype, youtube, and RSS. Thanks for your help.

    ReplyDelete
  74. Hello, how did you add new social icon on your blog? Thanks.

    ReplyDelete
  75. Great tutorial, but unfortunately my header is an image and I could not figure out (my lack of HTML skills) how to set the icons horizontally to the upper right side of the page.They were lining up vertically on the left side.

    My work around was to add an HTML/Javascript gadget dump the code in and replace links with my own icons (linked via dropbox). Unfortunately, even that has it's own issue, a bullet point is showing up in front of the icon..... How to resolve this, I have no idea. On to the next project, unless someone has some insight to assist me, which would be greatly appreciated.

    ReplyDelete
  76. Well, I saw Karen's post from 8/23 and decided to give it a try.

    I deleted the 'gadget' and added the HTML, then went to customize and added the CSS code. It placed it perfectly and got rid of the dot/bullet, but none of the icons are 'hot', they're all just images now. Argh, so close!

    Back to the gadget.

    ReplyDelete
  77. Well well well, I guess I'm tired or maybe it's the beer(s), but they reason the icons aren't linking was b/c I was in PREVIEW mode! But now I've decided to keep them as a gadget b/c of how they look on a mobile device/smart phone when being located up at the top.

    Wow, a learning experience. But thank you for this article, very helpful.

    ReplyDelete
  78. this code is not in my html

    any help?

    ReplyDelete