Wednesday, November 11, 2015
How to Add Social Media Icons to Blogger Header
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.
- 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhep7nrEgibRRxQE4wCzzSBS0UUmw7ibeghO39PWeEsZ14MF0PhxqJmfpbPoZHKN-Xzvf8CpKuh0ubtkB-B5aXZYRzZw7j3QHzjZxynT2tqEQPs1EcwROdE76tBDTdBkKJWtEpMPCWYt5Q/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/AVvXsEhe2Nh-fo6Eo8E7AgxVF465oDITcWnb2i06ikk388Rb83elTXmnVMzy2eS6D8N6LkQw4bgUvnVFlxlQEmfl-4q9z2CM9E29rx9rtSjpgzWfSd6FK1B9bpV99A3xQK6ATlp_yOp7RBYQ82w/s1600/Twitter.png'/></a></li>
<li class='media_icon'><a href='https://plus.google.com/ID/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxffJluqDcDcc6oDCQ-zjFyNdQUV9Im4iN0t-RmRT33Fp_-sh_0JThXErv5GdYbqb-u_0c-e9OOWbO1eWHX-wYab_K9rwB85S-RwtU6gfECAE5mYwXbmxkHDycCQrn6BXT4zEvevp6No/s1600/googleplus.png'/></a></li>
<li class='media_icon'><a href='http://BLOG-NAME.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdCehR6A7qZbgyhoChY36vXVpPr3Cbag4kiB5fywjgwUlOLHaIpQaou1v7UgreauJSPV0wzE4t3c-GQnDh6jwAy1U7h6Pqi0_ySlZOthhAb7Vw3tkPAlnDwafC8ZYKWqCt24Xy6QzEzg/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.
