Membuat Gadget 5 Spinning Icon Social Network

Posted by : Unknown Jumat, 22 November 2013

Social network berguna untuk memudahkan akses komunikasi antara admin blog dengan pengunjung, dengan shorcut/jalan pintas atau biasa kita sebut dengan redirect/pengalih yang terdapat dalam masing-masing icon ini maka diharapkan pengunjung kian menikmati tampilan blog.

Terlebih shortcut social network ini dilengkapi dengan efek spinning sehingga saat salah satu icon didekati oleh cursor maka icon tersebut akan spinning/berputar. Efek ini menggunakan javascript sehingga sedikit mengurangi kecepatan pemuatan halaman blog.

DEMO

berikut langkah-langkahnya:

masuk ke dashboard blogger
pilih tata letak
pilih add/tambahkan gadget
pilih HTML/javascript
kemudian masukkan kode di bawah ini:

<style type='text/css'>
#social a:hover {
    background-color:transparent;
    opacity:0.7;
    } 
#social 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;
    }
#social img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }
 </style> <center><div id="social">
<!--Start Email Rss Icon-->
<a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6kVQc0wzHihOmP_R_KkGpgbXTUZo6iQocbXf6lF8EeuPL3T2r3pmvVI8RBOsSkff4GeQGLRvJFxL03dZcr8_bcBgAMk5AsbFvyRX38ftNWxHSM9xOx85JjIR-_xfc0VsBW_UKb2Uom4kC/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/</a>
<!--End Email Rss Icon-->
<!--Start Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuvEIch6hIQqFTbt5EAyMBFEjC2Fz-cXUM4KnS7wXfHwBMVnU57D6uWGAo2N30V0hzylbVauWO4DsFrzIjn0Vt8c9L4aNonRQRGMN-fODrhEH_v1qKg257lTRFYqt-0_EITohaP5mMAmF/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Facebook Icon--> 
<!--Start Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-jsnzpAueBI5EHU062xZ-m8ZNBK-1PnuqXVaLxY26KokFmKs6PYJ2as0sKyZFRQCOoNZhlWBGd0ZEawlKxd-gWHpNIO-try_Efp7Ozyg7fgYCKx4lNKCvnQel7_kAk2RbkoCiNegLJDUd/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Twitter Icon-->
<!--Start Google+ Icon--> 
<a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_0KxzxUXE8GjEEjFTun0Sk3ONydWCYtt_qinNT42i8FR5dnZHlAcn81K-0yJfUoE87Do0JZsH-c117owTzFGxeErYpnEZ2osimQh8ePRtNFHdvSqZkY64HTYhwZyytK4rIquIPogBduvm/s1600/GOOGLE-PLUS-48x48.png"/></a>
<!--End Google+ Icon-->
<!--Start Pinterest Icon--> 
<a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgbgSIhJOn-UirK5COfI0d8vzcyk-QAgmSsO3ePxupCsy0Q8GaXPbiTEoBmk6bhUqJlkdZ0_PHEZLWW5hqvjm2VTw4gx35rA6WdczUi7a4LbplmRz9Pgxc95sQwiiHMqvPW46q1DtehVFi/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> 
<!--End PinterestIcon-->
<!--Start Feed Count Button-->
<a title="Get Update" rel="nofollow" href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
<!--End Feed Count Button--> 
</center> 
<a href="http://dhanynurdiansyah.blogspot.com/2013/01/6-spinning-icon-social-network.html"
target="_blank" title="Spinning Social Network">Get This
Widget</a></div></div>

bila kamu tidak memiliki salah satu atau berniat ingin menghilangkan salah satu icon sosial networknya contohnya RSS Feed silahkan hapus kode seperti berikut ini

<!--Start Feed Count Button-->
<a title="Get Update" rel="nofollow" href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
<!--End Feed Count Button-->