seo Add Social Sharing icons To Blogger Header 2013
on Monday, May 27, 2013
|
Seo Master present to you: Its old but Old is Gold,Adding Social Media icons in the Top Right Corner of the Blog will help you to improve your Blog Social Status.These icons will activate when someone hover over them,these icons include Facebook,Twitter,and Google+ Share Buttons along with blog feeds option. Actually I got the idea of this article from the below Question.
Question:-I don't Like Social Sharing icons in the sidebar,i want to put add these social media icons in Blogger Header,How i will put that?How To Add Social Sharing icons To Blogger Header
- Now We have to expand the style,For Expanding the style Find <b:skin>...</b:skin> in the template coding and immediately click the small arrow left to <b:skin>...</b:skin>
- After expanding the style search for this tag ]]></b:skin>
 - Now Copy and Paste the below Code just above ]]></b:skin> tag
/* Social icons By www.matrixar.com
----------------------------------------------- */
#social-icons {
margin-bottom:10px;
height:50px;
width:100%;
display:block;
clear:both;
}
.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;
}
- And Now Search for the below Line in the Template Coding
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
- Now Copy the below Script and add it above this Line <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
- Code is below
<div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'><a href='http://facebook.com/RoseNbushes'><img border='0' src='http://www.matrixar.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>
<li class='media_icon'><a href='http://twitter.com/#!/thatsblogging'><img border='0' src='http://www.matrixar.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>
<li class='media_icon'><a href='https://plus.google.com/g+idgoeshere/about'><img border='0' src='http://www.matrixar.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>
<li class='media_icon'><a href='http://BlogName/feeds/posts/default'><img border='0' src='http://www.matrixar.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>
</ul></div> Changes in Coding- Replace "rosenbushes" with your Facebook Username
- Replace "ThatsBlogging" with your Twitter Username
- Replace "G+idgoeshere" with your Google+ ID
- Replace "BlogName" with your Blog Link
- And Replace all the Green Links with the icons url if you want to add new.
- Finally hit Save the Template and enjoy Social Sharing Icons On Your Blog Header.
So What's Up:- Share your Beautiful ideas with us about these icons,ask any question,Stay Blessed Happy Blogging. 2013, By: Seo Master
|
Labels: Blogging Tips, HowTo Tuts
