» » Create Social Sharing Icons With Mouse Hover Effect Blogger V1

Create Social Sharing Icons With Mouse Hover Effect Blogger V1

By Gamesnet Friday, September 7, 2012 0 comments
This is a very light weight widget with less CSS and HTML code. It load in less then a second. I put mouse hover effects on it to make it more cool. I used rectangle social media icon which looks awesome in your blog.There are total five sharing buttons, start from twitter, Facebook, YouTube,Twitter and Google Plus.

Adding The Icons To Your Blog

STEP 1
  1. Go to your blogger dashboard
  2. Click on "Design" > "Edit HTML" > Back up your template
  3. Mark/Tick "Expand Widget Templates 
  4. 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;
}
    5.Click "SAVE TEMPLATE"

    STEP 2

    1. Go to your blogger dashboard
    2. Click on "Design" > "Page Elements" > "Add a Gadget"
    3. Choose "HTML/JavaScript" from the list of options
    4. 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/    YOUR LINK HERE" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilLnCB9iNZdPGbOG6PMLdRwKea2VrmaFJ1SU4ELcKYtF-K4CKu7Nb9Iw2fCpxf45GxgQ24tVTMa4EUa3vRuJg_TgI1kX6gqoLEXuPn8Q0AAoTFaANHtktBl0qD8MUGhUVYRi9qgK_ivh0G/s1600/icon1.png" width="100" height="100" border="0" />
    </a>
    <a href="https://twitter.com/    YOUR LINK HERE" target="_blank" rel="nofollow" >
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgheTwU7A5VAPjEebSlcMpvNo6x3ZdfkbAVlttUEfE__ppCgaEEnmgZkKfYd0vCU1L9oF2SGJyOzg77dllSlmglyAm5B_LmYY_S01DAqj1sD0XE26qhYrG_rSXWWBeyEPEjS6mcj_81evIa/s1600/f.png" width="100" height="100" border="0" /></a></li>

    <li>
    <a href="https://plus.google.com/    YOUR LINK HERE/posts" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibiny-KpKdAdD4_WCT-12KHvpfrs5fPZapWyI0WpWtmR8R9yU_Am5YJ8AKeWmbld6eiGkH6SYJ60PAAt6co7JkVik6hEtiWTtvqkRAryf7P_LkkRjbVjlbKT5ih-Xuozy6e_BKEnEeYWdH/s1600/icon9.png" width="100" height="100" border="0" />
    </a>

    <a href="http://www.youtube.com/YOUR LINK HERE" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIOTSk3xqT1_fQvrbEcuuS6pXWivomFJHOU6Ol63DAzc3_YoCVLgShym1tbXZAPGM3D7SJn-zQ4eOy4L3UQZDzTjqgDyhE-Zb82bpe7ritupi737A2VEcMOiLfstQX3s5W7LwLegP0uXE5/s1600/icon8.png" width="100" height="100" border="0" />
    </a>

    </li>
    </div>

    1. To change the height and width of your icon, simply edit all occurrence of 100
    2. Replace https://www.facebook.com/YOUR LINK HERE with your facebook page url
    3. Replace https://twitter.com/YOUR LINK HERE with your twitter profile url
    4. Replace https://plus.google.com/YOUR LINK HERE/posts with your google plus profile url
    5. Replace http://www.youtube.com/user/YOUR LINK HERE/videos with your youtube profile url.
    6. Click "Save". That's all.
    Sharing is sexy

    0 comments for this post

    Leave a reply

    Newer Entries
    Previous Entries