Rabu, 15 Mei 2013

Cara Membuat Social Profile Widget Seperti Metro UI



Cara Membuat Metro UI Style Social Profile Widget Untuk Blog
Yap, sebelumnya Gue ngeshare Cara menghapus link hidup di komentar blog secara otomatis nah, sekarang gue mau ngeshare cara membuat metro ui style social profile widget untuk blog 

1. Pertama" masuk dan login ke www.blogger.com
2. lalu masuk ke -> Tata Letak ( Pageelements ) -> Tambahkan Gadget -> dan pilih HTML/Javascript
3. Copy dan Pastekan kode dibawah ini :
<div class="metro-social">
<li><a class="fb" href="URL Facebook" target="_blank"></a></li>
<li><a class="tw" href="URL Twitter" target="_blank"></a></li>
<li><a class="gp" href="URL G+" target="_blank"></a></li>
<li><a class="fd" href="URL Feedberner" target="_blank"></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,.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:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;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 .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
4. kode Tebal yang berwarna Ungu ganti dengan URL" anda.
5. Kalau sudah, tekan / klik tombol Save / Simpan.. 
Done ~ Enjoy

0 komentar:

Poskan Komentar

Total Pageviews

twitt sma w9

Template Information

728-banner

Flag Counter
Diberdayakan oleh Blogger.