Cara Zone

Portal online Tips dan tutorial

Dapatkan tutorial terupdate gratis dengan berlangganan artikel

Friday, October 17, 2014

Cara Membuat Widget Social Retro Keren

Cara Membuat Widget Social Retro Keren
Memperindah blog terutama blogspot tentu sudah tidak asing lagi bagi sobat blogger, salah satunya yakni menambah widget social Retro. Widget ini akan membuat blog kita makin keren, karena tampil beda dengan widget-widget social network lainnya. Beberapa hari lalu kami juga membuat tutorial Cara Membuat Professional Social Sidebar dan Widget Social Slide Hover Keren, Sobat bisa coba karena selain terlihat profesional juga lumayan ringan.

Seperti yang kita semua sadari fakta bahwa situs Jejaring Sosial memainkan peran penting dalam mengembangkan blog anda terutama untuk menjaring visitor sebanyak-banyaknya, jadi sangatlah penting untuk memiliki widget Follower Sosial yang elegant . Ada beberapa widget sosial yang memiliki fitur yang cukup mengesankan, tapi terlalu berat untuk dimasukkan dalam sebuah blog karena dapat mempengaruhi kecepatan dari sebuah blog. Hari ini di artikel ini, kami akan berbagi Widget Social Retro dengan tampilan lumayan keren.

Silahkan Lihat demonya dulu :
Bagaimana sobat, sangat menarik bukan?
Mengapa menggunakan Widget ini untuk Blog Anda?

Selain Ringan widget ini juga dapat membuat blog jadi elegan dgn gaya yang menarik dan membuat pengunjung penasaran untuk mengclicknya dan ini menjadi salah satu keuntungan, karena sedikit tidak mereka akan mengikuti di Jejaring social Anda terutama yakni Google+ | Facebook | Twitter.

Cara Install | Pasang di Blogger?
Ikuti langkah-langkah berikut dengan benar.

Silahkan menuju Blog yang akan ditambahkan Banner

Klik Tata Letak >>Tambah Widget>> HTML/Javasript
Cara Membuat Widget Social Retro Keren
Sekarang silahkan Copy dan Paste Kode berikut pada form widget
Beikut kodenya :

<div class='metro-social'>
<li><a class="fb" href="http://www.facebook.com/carazonecom/" rel="nofollow" target='blank' title='Like Me'></a></li>
<li><a class="tw" href="http://twitter.com/zonecara/" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="gp" href="https://plus.google.com/+carazone/" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="pi" href="http://www.pinterest.com/carazone/" rel="nofollow" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="in" href="http://www.linkedin.com/pub/cara-zone/a4/104/397/" rel="nofollow" rel="nofollow" target='blank' title='Like Me'></a></li>
<li><a class="yt" href="http://www.youtube.com/carazonefull/" rel="nofollow" target='blank' title='Subscribe Channel'></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/carazone/" rel="nofollow" target='blank' title='Subscribe'></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(http://4.bp.blogspot.com/-0A1QMUBu-Pw/UvADehN8mdI/AAAAAAAANX0/_xzNMdnGtNE/s1600/fb%601.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(http://3.bp.blogspot.com/-EvcnRY3Pskc/UvAEIYOjtCI/AAAAAAAANX8/r0JREVKU01A/s1600/tw1.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(http://3.bp.blogspot.com/-go5PVIk0jH4/UvAEVzsRU_I/AAAAAAAANYE/E31yyYUjepQ/s1600/g+1.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(http://1.bp.blogspot.com/-VPrGYdGqtCA/UvAEjYP2NpI/AAAAAAAANYM/ccmZMNnVB9c/s1600/pin1.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(http://2.bp.blogspot.com/-T1XijrSHlbM/UvAEvP7jG0I/AAAAAAAANYU/KP-0ZEWeFzw/s1600/Lin1.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(http://3.bp.blogspot.com/-KBVp5hxYiPk/UvAE80VicuI/AAAAAAAANYc/TRb8ZbcXoVA/s1600/YT1.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(http://4.bp.blogspot.com/-aS2ZxT861N0/UvAFHo9Nw9I/AAAAAAAANYk/mIVTg9K96DM/s1600/feed1.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(http://3.bp.blogspot.com/-kFGbmHoDcDo/UvAF_QUMQuI/AAAAAAAANYw/GlTC6yIaH0M/s1600/fb2.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(http://2.bp.blogspot.com/-Bm-vdbgf404/UvAGNVipFcI/AAAAAAAANY4/9E8R_FajJx0/s1600/tw2.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(http://2.bp.blogspot.com/-1M5XBUgIvwk/UvAGY7T1Z0I/AAAAAAAANZA/SsMbyHHj11s/s1600/g+2.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(http://4.bp.blogspot.com/-_gVboXX6bkY/UvAGkGwxZTI/AAAAAAAANZI/fxhNrEMZmu4/s1600/pi2.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(http://2.bp.blogspot.com/-Nr_yxEHSFfk/UvAGwqCy7jI/AAAAAAAANZQ/qlL_t0v9KDU/s1600/Lin2.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(http://4.bp.blogspot.com/-G55PsvzNe_0/UvAG7jxoM4I/AAAAAAAANZY/QhYfuh6HUsk/s1600/yt2.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(http://1.bp.blogspot.com/-xaMk9RYAtVg/UvAHHXiDdAI/AAAAAAAANZg/Afegk34so5E/s1600/feed2.png) no-repeat center center #e9a01c}
</style>

Keterangan | Silahkan Ganti  : 
http://www.facebook.com/carazonecom dengan Fanpage Fb masing-masing
http://twitter.com/zonecara dengan Id Twitter masing-masing
https://plus.google.com/+carazone dengan Id Gplus masing-masing
http://www.pinterest.com/carazone dengan Id Pinterest masing-masing
http://www.linkedin.com/pub/cara-zone/a4/104/397 dengan Id Linkedin masing-masing
http://www.youtube.com/carazonefull dengan Channel/saluran Youtube masing-masing
http://feeds.feedburner.com/carazone
dengan Id Feedburner masing-masing

Selamat Mencoba, jangan lupa komentar

10 comments:
Silahkan komentar
  1. Keren sieh, tapi bikin lemot ga ya mas? :)

    ReplyDelete
  2. sippp gan....boleh ane coba ya. dijamin cepat loadingnya ga ya?

    ReplyDelete
  3. Mantap artikelnya.,,
    Kunjungi juga blog saya..
    http://juliarman.blogspot.com/ :D

    ReplyDelete
  4. kereeen gan, tengyu yaa.
    tapi klo mau nambahin instagram gmna ya gan?

    ReplyDelete
  5. Mantappp gan,,, ini yang aku cari, baru ketemu sekarang

    ReplyDelete
  6. Terimkasih akan saya pasang di blog saya cantik

    ReplyDelete
  7. keren sih... tapi masih lebih keren yang di share artikel

    ReplyDelete
  8. asik ternyata nemu disini,,mantap kk,,kumbal ya kak http://balaikamih.blogspot.com/ makasih..,

    ReplyDelete

Silahkan Follow atau Like FP Cara Zone
Join Our Newsletter