Cara mudah membuat Contact Me keren Dengan WIDGET

Cara mudah membuat Contact Me keren Dengan WIDGET mungkin sudah tidak asing lagi di mata para blogger karena banyak situs-situs yang menyediakan cara-cara membuat berbagai macam widget Contact Me.

Contact me ini adalah bagian dari blog yang bisa mempermudah kita untuk berhubungan dengan berbagai jejaring sosial di dunia maya.

misalkan Facebook , Twitter , Google Plus , Youtube , dan masih banyak lagi yang lainnya yang tidak bisa saya sebutkan satu persatu.

langsung saja disimak cara nya gan !!!

1.Log In Ke Blogger

2.Pilih Tata Letak

3.Tambah Gandget

4.Pilih HMTL / Java Script

5.Copy Paste Code Script Dibawah ini

6.Simpan

7.Lihat Hasilnya

Code Script

<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>

Catatan : Silahkan ganti yang berwarna Kuning Dengan Nama Kalian

Sumber : Cara Membuat Widget Contact Me Metro Style

Tweet

Sign up here with your email address to receive updates from this blog in your inbox.