Create Social Sharing Icons With Mouse Hover Effect To Blogger Blog

Making your blog unique is a very tough task, in this tutorial am about to share with you, i will discussing on how you can add a cool social sharing icons with a cute CSS3 effect. This icons consist of facebook link, twitter link, you tude link, and google + link. This icons will move by 7 degree when you hover your mouse on it due to the effect that is included. Follow the few steps below on how to add this icons to your blog.

Adding The Icons To Your Blog

STEP 1

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML" > Back up your template
• Mark/Tick "Expand Widget Templates"
• Use ctrl F to find </b:skin> and paste the following code before </b:skin> tag

#rb_share_ex {
width: 800px;
margin: 0 auto;
}
#rb_share_ex img {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
#rb_share_ex img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}

#rb_share_ex ul{
list-style-type:none;
}
#rb_share_ex  li{
list-style-type:none;
}

• Click "SAVE TEMPLATE"

STEP 2

• Go to your blogger dashboard
• Click on "Design" > "Page Elements" > "Add a Gadget"
• Choose "HTML/JavaScript" from the list of options
• Copy and paste the code below in the content box.

<div id='rb_share_ex'>
<!--Fully Design By Realcombiz.com-->

<li class='current-cat'><a href="https://www.facebook.com/realcombiz" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlM9-Fpg6sCPXiK0uERcIEKDtDfS_LtzTGSEw2-4UhiWOB4_q63ebh1ESCtDcVQ1CLKGs0zblOcPOJ6wvxMtbwvAj1aAEzWI224A-CxDm9k6-lbpvvKW-rmF5TVMPflmGYaN-ETaJGBUry/s1600/icon1.png" width="100" height="100" border="0" />
</a>
<a href="https://twitter.com/realcombiz" target="_blank" rel="nofollow" >
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicB-TJLzxo1IaAY9Oq8bR5QxuUkUpnaU5WMbVSlCYhpCZwrx3Cd9iOTTcAzbh6Y8kCEQeBZ2KS0rVRBmW-f6xXW24FGhtbyt7iZJg0xKPg_wOCM_gAZEvjZtxsH2uQ2umBKV8gXsySYxrF/s1600/f.png" width="100" height="100" border="0" /></a></li>

<li>
<a href="https://plus.google.com/117896762172961615212/posts" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkz1myEodIdQy27ss_y4Ux7iopFVIPEuYkAMUY9XP38mg-Ec0_gMPIGxuFei5E5TXhqtKBWFA7nmVqZU-4XMVNx0QF8am1Yxxya_F1JOOukVEvbzRn64fx7GM70fdf33WHFD9diYCW9suu/s1600/icon9.png" width="100" height="100" border="0" />
</a>

<a href="http://www.youtube.com/user/realcombiz/videos" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI53ehnlsQZkivpxMxnTwoS0RfbuLiuB4NXKB9fYfbOQVp1zxMn-BVRUpFsKpIlwUrF7cXoPuy4k712D4bTrArWTTf3Xe-FxtjQoroA4ZDnO-4aHpyVRKZZbpdMwqstphWSRvSwylwX3nh/s1600/icon8.png" width="100" height="100" border="0" />
</a>

</li>
</div>

• To change the height and width of your icon, simply edit all occurrence of 100
• Replace https://www.facebook.com/realcombiz with your facebook page url
• Replace https://twitter.com/realcombiz with your twitter profile url
• Replace https://plus.google.com/117896762172961615212/posts with your google plus profile url
• Replace http://www.youtube.com/user/realcombiz/videos with your youtube profile url.
• Click "Save". That's all.

Hope you like this beautiful icons? if so, tell us what you like about it and share it with friends/followers.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz