Cara Membuat Widget Contact Me Metro Style

Cara Membuat Widget Contact Me Metro Style - Assalamualiakum sobat semuanya,sebelum nya saya minta maaf belum bisa berkunjung balik ke blog sobat,meskipun begitu saya harap hubungan kita sesama blogger tetap terjaga.Oke..hari ini saya akan memberikan tutorial lagi,setelah beberapa waktu postingan saya tentang kontes,seperti Hostingpangeran dan korek api gas,untuk saat ini saya akan mencoba berbagi widget kontak terbaru yaitu Cara Membuat Widget Contact Me Metro Style,widget ini menurut saya hanya untuk jalan pintas menuju jejaring sosial lainnya yang tentunya milik sobat,seperti facebook,twitter,youtube dan lain-lain,sehingga memudahkan pengunjung sobat untuk menuju akun tersebut dengan cepat hanya dengan meng klik salah satu logo dari jejaring tersebut,dengan seketika itu langsung di bawa ke akun yang di tuju.Untuk cara pembuatannya sobat tidak usah bingung,karena sobat cukup menambahkan widget baru dalam bentuk html,untuk lebih jelas adalah sebagai berikut :

• Pertama login ke akun sobat
• Selanjutnya klik tata letak>> tambah gadget baru >> html/java script
• Copy dan paste kan kode di bawah ini
• Kemudian simpan dan selesai

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/USER NAME"></a></li>
<li><a class="tw" href="http://twitter.com/USER NAME"></a></li>
<li><a class="gp" href="https://plus.google.com/ID G+ ANDA"></a></li>
<li><a class="pi" href="http://pinterest.com/USER NAME"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/USER NAME"></a></li>
<li><a class="yt" href="http://www.youtube.com/USER NAME"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/NAMA BLOG"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs
saya ambil kodenya disini:http://www.techprevue.com/2013/02/social-profile-widget-metro-style.html 
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.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{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}
.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>

Note ;
Jangan lupa untuk merubah tulisan USER NAME yang di beri higlight warna pada URL diatas,seperti: Facebook page/user name, Twitter username, Google+ user-id, Pinterest username, Linkedin profile url, Youtube username atau, RSS/Feedburner feed url.Oke,,mungkin itu saja dari saya tentang Cara Membuat Widget Contact Me Metro Style,semoga postingan ini bisa membantu dan bermanfaat buat sobat,terimakasih dan happy blogging.