Membuat Widget Jejaring Sosial Keren

Wah, blog PG29 baru ngelakuin beberapa revisi nih gan. Mau tau mau tau mau tau? (pamer dikit) /gakmau /gakmau /gakmau Diataranya adalah revisi Widget Sosial Media. Widget ini gunanya untuk menghubungkan agan-agan sama author atau agan-agan sama pembaca. Dengan berkembangya zaman banyak sosial media yang bermunculan diantaranya facebook, twitter, myspace, dan lupa lagi /ketawa /ketawa /ketawa Pokoknya itu deh, di tambah lagi agan bisa masukin blog agan yang dari luar kaya wordpress atau tumblr.

Ini adalah penampakan Widget yang berhasil saya revisi :

Caranya mudah kok gan, ngga perlu masuk ke edit HTML. Agan cuma perlu masuk ke Lay Out (Tata Letak) > Add a Gadget > HTML / Java Script. Setelah itu copas kode di bawah ini :

<div class='metro-social'>
<li><a class="fb" href="http://www.facebook.com/wahyumuhamadd></a></li>"
<li><a class="tw" "href=http://twitter.com/wayuway></a></li>"
<li><a class="gp" "href=href=https://plus.google.com/118131029509581017731></a></li>"
<li><a class="yt" "href=http://www.youtube.com/wayuway30></a></li>"
<li><a class="tb" "href=http://wayuway.tumblr.com></a></li>"
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.yt,.tb{z-index:5;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:105px;height:69px}
.metro-social .tb{background:url(//goo.gl/07Lqim) no-repeat center center #334d68;width:105px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .tb{background:url(//goo.gl/fDn04z) no-repeat center center #334d68}
</style>

NB : Link linknya di ganti dulu gan, nanti masuknya ke social media saya /panas /panas /panas

Tinggal klik save dan di lihat hasilnya gan. Selamat mencoba /bye /bye /bye

Sumber :
http://www.tipstrikblogging.com/2013/05/membuat-social-profile-widget-keren.html