Metro Style Social Icons for Blogger

Metro Style Social Icons for Blogger - Social Icons adalah salah satu widget yang sudah pasti ada dalam sebuah website walaupun mungkin memiliki gaya yang berbeda-beda antara yang satu dengan lainnya.

Karna dengan adanya social icons memudahkan pengunjung untuk saling berbagi artikel kepada orang-orang yang mereka inginkan, selain itu juga keuntungan adanya social icons bagi sebuah blog tentu saja untuk meningkatkan traffic blog dengan adanya artikel yang dishare dan sosial media milik blog-pun menjadi lebih meningkat, seperti fanspage blog, google+ follower, maupun follower twitter.

Nah, pada kesempatan kali ini saya akan berbagi salah satu style dari social icons yang dapat anda gunakan sebagai social icon diblog anda. Metro Style Social Icons adalah social icons bergaya menu pada windows 8 yang membuat tampilan social icons lebih elegant dengan sentuhan hover opacity yang membuat social icon ini menjadi lebih menarik. Untuk live Demo bisa dilihat dibawah ini.

Atau Klik Disini Untuk Melihat Widget!

Untuk Memasang Metro Style Social Icons ini diblog anda, silahkan ikuti caranya dibawah ini:

1. Masuk ke Akun Blogger
2. Pilih Tata Letak > Add Gadget > HTML/Javascript
3. Kemudian paste kode dibawah ini pada konten box widget > lalu simpan gadget.

 <center>
<div id="semua-tutorialku-social-icons">
<a href="http://feeds.feedburner.com/FEEDID" target="_blank"><img height="147" src="http://1.bp.blogspot.com/-0M62-Stfcdc/Ud1ZFcVvCRI/AAAAAAAABuY/9_o8SRGny8U/s1600/rss.png" width="120" /></a>
<a href="http://www.twitter.com/TWITTERHANDLE" target="_blank"><img height="147" src="http://2.bp.blogspot.com/-7qVkCzvGlC4/Ud1ZF3wqNlI/AAAAAAAABuc/6V0lQLdtvnk/s1600/twitter.png" width="120" /></a>
<a href="http://www.facebook.com/PAGEID" target="_blank"><img height="147" src="http://1.bp.blogspot.com/-ReX8Fx2MrOk/Ud1ZFBIvvSI/AAAAAAAABuI/hX1cGTGVWZ0/s1600/facebook.png" width="120" /></a>
<a href="https://plus.google.com/YOURID" target="_blank"><img height="120" src="http://3.bp.blogspot.com/-9gpsltkgVP0/Ud1ZFcm_cyI/AAAAAAAABuM/0u5oe5uRmuQ/s1600/google.png" width="120" /></a>
</div>
</center>
<style>
#semua-tutorialku-social-icons a:hover img {
 -webkit-opacity: 0.8;
 -moz-opacity: 0.8;
 opacity: 0.8;
 transform:scale(1.1)
}

Jangan lupa! Untuk memasukkan ID URL milik anda dari masing-masing social icons tersebut.

Setelah semua selesai, sekarang anda sudah Memasang Metro Style Social Icons diblog anda, dan bisa langsung anda lihat hasilnya.

Semoga bermanfaat..