Cara Membuat Widget Kontak di Blog

Kali ini arya blog akan share cara memberi widget kontak pada blog seperti yang ada di bagian atas posting dari Arya Blog. Caranya gampang banget kok.

  • 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(https://goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{background:url(https://goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pi{background:url(https://goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(https://goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(https://goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(https://goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(https://goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Tulisan yang diberi warna biru diganti dengan link dari akun kalian.

Tags : memberi widget about me, widget kontak

Arya

Arya Author

Leave a Reply

Your email address will not be published. Required fields are marked *