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='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:
This comment has been removed by the author.
ReplyDeleteNext time, try not to sound rude, you don't pay me for my efforts
DeleteThanks a lot!!
ReplyDeleteYou're welcome
Delete