Saturday, July 14, 2012

Social Network Widget With Spinning Hover Effect For Blogger

This is cool widget for your blog. This is
cool social widget. you can add it on side bar.
Its have nice hover style.So, it will helps to
attractive your blog.Black And White Social
Network Widget With Color Hover Style
For Blogger
. Follow these steps to add it
to your blog.

cool-social-widget
Demo

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.


<style>p#socialicons img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
/* Spinning Social Icons Widget By bloggertrix.com */
</style> 
<center><p id="socialicons">
    <a href="http://www.facebook.com/bloggertrix/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmnYBxkAjo2pvPIHuHLqCNwXdf8mhm7jgP63-eRPOuE0lK_J5RAy0OWHo45-oQTsEGpFtofWdfqDgeDWjSjERO0tNCVBz_eTjI-WlaI3xLNv0Sfnu6b0kEr8aydgA-hePXgVwCzDzPZ89k/s1600/facebook.png" /></a>
    <a href="http://www.twitter.com/bloggertrix/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVC0isw3QaMZHtF_sI8QlT62ugSOCDN5-SZal2dsuk46vj7bplgrA38v_fHYxVAfNUVCTaNnRjz2HOs_8VORGOXrecM9gp4oZkbzyqMEToOoZUWlJFERxUy91-mV0VCwKTiPZnu8XG-sl6/s1600/twitter.png" /></a>
    <a href="https://plus.google.com/107955298793879607964">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWqGrSYd_zM9aryE3ZXdO08zM7Z1EgDJ6NQzjXFGX6ehpz5I-5PR0RuCZktUhLL7K9IaYnKF3oR-NFetOwM9_cf_45iWFgu0eSu-kwfNbjAhHwIawe2V2T3l0LTWamosRfZpFFty7QqONu/s1600/googleplus.png" /></a>
    <a href="http://www.feeds.feedburner.com/bloggertrix/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitBUIvJivx7eVpo8FLgSq2Qc_CinCD4s5jfmtLDHkNvsJUijkP_MtbXFwpNnBuptMJ8lSmQ43Z_QxuAtrYiIPSyFDBCJFDQ1ARwwZFNL2s4y4husJfXbhXB-L_Vs5o5yQFxNat2Rg4GbSR/s1600/rss.png" /></a>
    <a href="http://www.youtube.com/bloggertrix/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3r2a9dgy4Xu-D2vNvj_OC4kSIGo_lABOD1D0242_3hmSAykoLCbPxkhglJDFeh42gKEPVqSKX9oJASnXwUIMjt4yTzHBFwQtjgxoIu394c2OhO0b2aZne_SquVQusgU0-m7cck84BkYFO/s1600/youtube.png" /></a>
</p></center>



After paste above code
* Replace bloggertrix with your facebook username
*Replace bloggertrix  with your  twitter Username
*Replace 107955298793879607964 with Google plus id
*Replace bloggertrix with feedburner username
*Replace bloggertrix with your your-tube username.
4. Now save your HTML/Javascript'.

    You are done...

1 comment: