How To Add Social Sharing Bars To Your Blogspot/Blogger

This post will help you to add social sharing icons/bars to your blogspot/blogger which will increase your likes on the blogspot that the readers can follow your blog or like your blog through different social networks. This includes icons such as Facebook,Twitter,Google+,Blog Feed. This icons will rotate when you hover over them or take the cursor on them.



It is very easy to add social media icons to your blog just follow this steps :

Step 1 : Go To blogger.com.

Step 2 : Log-In To Your Blogger Account.

Step 3 : From Blogger Dashboard Click On Template & Click On Edit HTML.

Step 4 : Press CTRL+F & Search For ]]></b:skin> & Paste The Below Code Just Above It :

  /* 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;
}

Step 5 : Save Your Template.

Step 6 : Go to Layout Click On Add A Gadget A Dialogue Box Will Appear In That Select HTML or JAVA Script & Paste The Below Code There :

 <div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/chatzbook.blogspot.com'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjodG8My2-KEkIgxB6O_0StgtwpcTqIWfcFlSFS0PMC9U6cXVfItybeq7gwRoGjUiWWo7B0TnO3iAt-0LMFuqsm3XTUmIZd6hGxLAbLFje1vulE_EVsqAXD2gQT6ygroMVogXP1KBbpUEg/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/chatzbook.blogspot.com'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgNrzo5XyUPuigevN4KAa8U4sFN5-9j5nROKQr0F85NCC97uwrW9RsuIiqadbcvYjzyiiDGgMzpwy1O0VF5K1Ra_JWOBXmHnZlqC-7n6KXdx6SCeGoJXey_JLA_fRGy8vOR-eHoRjAaPc/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/chatzbook.blogspot.com/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLi955UURRb_L_LNSaVCLYXELetFyaQAqcDlfAICnwcHFyGu7Nf9DPo-wuKvDpYo4Kl83jY3B6V6ZO94IDgYEYlMao8-83YDtT_6SYfzLun7lc_CyyWGEZjZYg6lKBLit1PXpXwknKeSc/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='chatzbook.blogspot.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDsBLKandI9PADz7nt7Mlr-vYFS_0BFTd61RxPgr3IxGcsemR-FeWbgM-EYVI9Azwzta-frNclSacRj492xwV7yHT8_AwGHudbYOZWF_Cv4yy8NmSbqV-ioGa1oUg_pMqreR1v5IcJZKY/s1600/RSS.png'/></a></li>

</ul></div> 

Step 7 : Now Replace The Red Color (chatzbook.blogspot.com) With Your Username Or Blog Name

You Can Also Change Your Icon. To Change Your Icon Just Replace The Blue Color url With The url Of Your Image.

You Can Also Add Icons. To Add Icons Copy The Below Link & Paste It Before </ul></div> :

 <li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

In Above Code Replace Link Url With Your User Name Or Blog Name &  Image URL With The url Of Your Image

Step 8 : Click On Save & Your Done.

Step 9 : Enjoy.....!!!!!