9 Mar 2016

couch mode print story

How To Add Social Media Icons to Blogger Header

This 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.
social media icons, facebook icons, social media icons for blogger
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='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://name-of-your-blog.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>

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.

6 comments:

  1. This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic..
    seo company in india
    Digital Marketing Company in india

    ReplyDelete
  2. Here's a link to our share buttons: https://shareaholic.com/pub...
    You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
    For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
    http://www.thesocialmediaha...
    Of course, you can customize your buttons in a variety of ways in your Settings.
    If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help

    ReplyDelete
  3. Here's a link to our share buttons: https://shareaholic.com/pub...
    You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
    For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
    http://www.thesocialmediaha...
    Of course, you can customize your buttons in a variety of ways in your Settings.
    If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help

    ReplyDelete
  4. Here's a link to our share buttons: https://shareaholic.com/pub...
    You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
    For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
    http://www.thesocialmediaha...
    Of course, you can customize your buttons in a variety of ways in your Settings.
    If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help.

    ReplyDelete
  5. Here's a link to our share buttons: https://shareaholic.com/pub...
    You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
    For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
    http://www.thesocialmediaha...
    Of course, you can customize your buttons in a variety of ways in your Settings.
    If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help.

    ReplyDelete
  6. Here's a link to our share buttons: https://shareaholic.com/pub...
    You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
    For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
    http://www.thesocialmediaha...
    Of course, you can customize your buttons in a variety of ways in your Settings.
    If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help

    ReplyDelete

Blogger Widgets