Okeeee kali ini membahas tentang menu PROFILE metro UI . sebenarnya postingan ini sedikit agak jadul dan sudah banyak yang nge posting nya, ...
Okeeee kali ini membahas tentang menu PROFILE metro UI .
sebenarnya postingan ini sedikit agak jadul dan sudah banyak yang nge posting nya, hadehhh tapi mau gimana lagi, postingan yang menarik dibuat yaitu cuman ini menurut saya sih. ahhahaa
dan langsung aja ke inti point nya . :
- Meliputi 7 jejaring social yang paling sering digunakan
- Efek hover dan desain yang elegan,
- Sangat rapi dan bersih
- Loading Fast
- Paling cocok untuk blog yang berkategori 2 kolom
CARA MENAMBAHKAN WIDGET INI KE BLOG KITA
Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template.
- Anda hanya perlu menambahkan
- kode gadget/widget
- pada bagian HTML/JavaScript.
- Step by step for blogger
Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
Copy dan paste kode berikut pada kolom konten:
<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/officalsitepalmahutabarat rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/palmarapper></a></li>
<li><a class="gp" href="https://plus.google.com/105343109942045056844"></a></li>
<li><a class="pi" href=http://pinterest.com/palmahutabarat rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/palmahutabarat rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/palmahutabarat></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/palmahutabarat rel="nofollow"></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,.pi,.in,.yt,.fd{z-index:7;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 .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;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 .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>
Kustomisasi: Ganti link profil saya dengan link profil milik anda.
Simpan dan lihat hasilnya diblog anda.Demikian tutorial kali ini, cara membuat social profile widget pada blog. Semoga bermanfaat.
