Metro UI Style Social Media Widget untuk Blogger

Hari ini, saya akan membagikan info seputaran widget blog. Widget kali ini berhubungan dengan masalah sosial media. Widget kali ini diberi nama "Metro UI Style Social Media Widget untuk Blogger". Widget ini terinpirasi dari Windows 8 dimana tampilannya berupa kotak-kotak. di bawah ini adalah screenshotnya:
Oke langsung aja nih caranya:
 1. login ke akun blog sobat

2. Klik Tambahkan Gadget dan klik 'HTML/Javascript

3
.Masukan kode di bawah tepat di dalam kolom HTML/Javascript

<style>
.metro-social{width:315px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .facebookbt{background:url(http://2.bp.blogspot.com/-1YBSIbaRwr0/UclQ4Vxz-oI/AAAAAAAAHwU/vK82ruVcF9Y/s1600/bt-facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background:url(http://4.bp.blogspot.com/-F-8UjphXVjs/UclSzocfb6I/AAAAAAAAHx0/ABRlO1MKOwQ/s1600/bt-twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background:url(http://1.bp.blogspot.com/-dRqv1AKAKIs/UclSy1BpZ6I/AAAAAAAAHxc/oDVEM3E_KAo/s1600/bt-google+plus.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pinterestbt{background:url(http://3.bp.blogspot.com/-68dqFewJ3Ik/UclSzZ6SDhI/AAAAAAAAHx4/C3UV4xmuaWE/s1600/bt-pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .linkedinbt{background:url(http://3.bp.blogspot.com/-SpoGG71BPuI/UclSzcSaNwI/AAAAAAAAHyI/usHZz18jO6Y/s1600/bt-linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background:url(http://2.bp.blogspot.com/-Z3eh4XniqD8/UclS0DDDdOI/AAAAAAAAHyE/kIxEVXGSFvM/s1600/bt-youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url(http://3.bp.blogspot.com/-Fc0BbYkWsps/UclSyxbPbdI/AAAAAAAAHxk/FW06cdaKXME/s1600/bt-feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .facebookbt{background:url(http://3.bp.blogspot.com/-3jDkprH7Co8/UclUPUCeDsI/AAAAAAAAHyg/SnopE4tSFAY/s1600/bt-facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(http://2.bp.blogspot.com/-sXX2Dtwig3U/UclUQbezwvI/AAAAAAAAHy8/dJujXgxoRNU/s1600/bt-twitter.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(http://3.bp.blogspot.com/-AMtz_V9u8M0/UclUPT1LYSI/AAAAAAAAHyc/X-tqLZXsk4o/s1600/bt-google+plus.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(http://4.bp.blogspot.com/-jC-9jEujbkI/UclUQE5F_8I/AAAAAAAAHzE/4DXJppiD6hk/s1600/bt-pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(http://1.bp.blogspot.com/-ohGCHDCYMrA/UclUP4_eD7I/AAAAAAAAHyw/QVbeUaVlvzI/s1600/bt-linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(http://4.bp.blogspot.com/-V54NPmEV_Cg/UclUQvB_CyI/AAAAAAAAHzA/LByN_JCR9_Q/s1600/bt-youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(http://4.bp.blogspot.com/-Xo9bJ98Elps/UclUPZzEr-I/AAAAAAAAHyo/9XZT1hiivG8/s1600/bt-feed.png) no-repeat center center #e9a01c}
</style>

<div class="metro-social">
<br />
<li><a class="facebookbt" href="http://www.facebook.com/henry.dwiseptian1"></a></li>
<li><a class="twitterbt" href="https://twitter.com/heennryy"></a></li>
<li><a class="googleplusbt" href="https://plus.google.com/u/0/114710454551954318308"></a></li>
<li><a class="pinterestbt" href="http://pinterest.com/Henryds1"></a></li>
<li><a class="linkedinbt" href="https://www.linkedin.com/username"></a></li>
<li><a class="youtubebt" href="http://www.youtube.com/username"></a></li>
<li><a class="rssbt" href="http://feeds.feedburner.com/henry"></a></li>
</div>

Perhatian :
Ganti henry.dwiseptian1 dengan nama pengguna Facebook Anda  

Ganti heennryy dengan Twitter Nama

Ganti 114710454551954318308 Dengan Google ditambah profil ID
 

Ganti Henryds1 dengan ID Pinterest Anda
 

Ganti username dengan LinkedIn ID
 

Ganti username dengan ID Youtube Anda
 

Ganti henry dengan Feedburner ID

4.Klik Save dan lihat hasilnya, Semoga Bermanfaat...
Previous
Next Post »

5 komentar

Write komentar
Nugi Asmara
AUTHOR
June 28, 2013 at 12:29 PM delete

kalo mau tambahin social media nya... misal foursquare, itu gimana?

Reply
avatar
melody lodys
AUTHOR
August 28, 2013 at 1:35 PM delete

terima kasih bro infonya http://memolodys.blogspot.com/2013/08/cara-booting-shutdown-komputer-cepat.html

Reply
avatar
December 22, 2013 at 12:16 PM delete

Wach keren tutorialny!!!
Sungguh bermanfaat nichhhh

Reply
avatar

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
======================================================= EmoticonEmoticon