Cara yang sering dilakukan para blogger adalah memasang widget like box, widget follower dll. Sebelumnya saya juga pernah membahas Membuat Like Box Facebook Melayang/Popup dengan Timer dan Cara Membuat dan Pasang Widget Twitter Pada Blogger. Ke 2 cara tersebut cukup efektif dan bisa dijadikan alternative untuk meningkatkan jumlah follower maupun like.

 Sedangkan untuk pebahasan kali ini tidak kalah keren dan tidak kalah efektife dengan cara diatas, seperti pada judul diatas saya ingin memberikan tutorial Cara Membuat Social Widget Keren, kelebihan widget ini Anda dapat mempromosikan 7 akun social media Anda dengan tampilan lebih menarik, efek hover dan desain yang elegan, penataan logo social media tertata rapih, selain itu Tidak ada JavaScript, No Jquery, murni dengan CSS.

Cara Membuat Social Widget Keren

  • Silahkan lakukan login ke akun blogger Anda
  • Pada dashboar pilih “Tata Letak” ⇒ “Tambahkan Gadget” ⇒ “HTML/JavaScript“
  • Selanjutnya copy dan paste kode dibawah ini pada kolom “HTML/JavaScript“
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class=’metro-social’>
<li><a class=”fb” href=http://www.facebook.com/kudil.kadil rel=”nofollow”></a></li>
<li><a class=”tw” href=http://twitter.com/kudil_kadil></a></li>
<li><a class=”gp” href=”https://plus.google.com/u/5/+DiditRiadi07“></a></li>
<li><a class=”pi” href=http://pinterest.com/kudilkadil rel=”nofollow”></a></li>
<li><a class=”in” href=https://www.linkedin.com/in/kudilkadil rel=”nofollow”></a></li>
<li><a class=”yt” href=http://www.youtube.com/kudilkadil></a></li>
<li><a class=”fd” href=http://feeds.feedburner.com/Giribig rel=”nofollow”></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(//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{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.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>
Keterangan: Ganti url berikut dengan url media social Anda.
  • http://www.facebook.com/tarangs420
  • http://twitter.com/putratarang
  • https://plus.google.com/u/5/+putratarangs
  • http://pinterest.com/.................
  • https://www.linkedin.com/in/.................
  • http://www.youtube.com/Putratarangs
  • http://feeds.feedburner.com/..............
  • Terakhir jangan lupa klik “Simpan“
    • Bagaimana cukup mudah bukan membuatnya? Sekarang lihat hasilnya, dengan memasang widget social media ini kesempatan menambah like atau follower akan makin terbuka dengan memanfaatkan pengunjung blog Anda. Karna kita ketahui semakin banyak yang mengikuti social media kita makan ketika kita membagikan artikel terbaru akan makin banya mendatangkan pengunjung/pembaca.