BLOG PAGES

Wednesday 16 October 2013

How To Add Social Media Buttons To Blog Header

Hello bloggers, adding social
icons to your blog is the
way of getting more visitors on
your blog. It
will increase your blog traffic. Social
icons should be attractive and to be
placed in a right area to
get more clicks on it. Right place to add it on your blog is
header section of your blog.
See More Social Media Buttons
It should be added near to the scroll bar. Then only you cab
get more viewers on your blog fanpages. If you have right
header section on your blog header, you can add the coding on
that. If you don't have it, add right header section on your blog
and add the coding for social icons. Let me explain how to add
social buttons to header section of your blog.

Go to Blogger Dashboard ---> Template ---> Edit HTML
Search for ]]></b:skin> using Ctrl+F
Add the below CSS code just behind ]]></b:skin>

/* Social icons for Blogger
----------------------------------------------- */
#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
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;
}
Search for the below code using CTRL+F
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
Paste the below code to the above searched code
<div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'>
<a href='http://facebook.com/ trickstoo '><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/ shanmugam39 '><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/ 106667632864485528784 '><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:// trickstoo.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>

Note: Replace colored names with your page names on
facebook, twitter , google+ and blog url respectively.
Finally, Click on Save template button.
That's all. You are done!
Share this post if you like this. If you encounter any problem,
feel free and comment below to get solution instantly. Thanks

No comments:

Post a Comment