Cara Membuat Widget Follow Sosial Media Keren

Di jaman sekarang ini banyak sekali social meida yang bermunculan didunia maya, sebut saja facebook, twitter, dan sebagainya. Tentunya dengan kemajuan social media tersebut bisa dimanfaatkan bagi kita yang mempunyai blog agar traffik di blog kita bisa meningkat serta untuk mempermudah visitor blog kita untuk berlangganan update postingan kita dengan cara mem-follow akun social media kita

Banyak sekali yang sudah membagikan tutorial untuk membuat widget follow social media ini, namun menurut saya masih kurang keren. Maka dari itu saya akan membagikan widget follow social media yang keren. Tak hanya keren, widget ini juga fast loading alias tidak memperlambat kecepatan loading blog anda. Akan tetapi, social media yang akan saya masukkan dalam widget ini hanya facebook, twitter, google plus, dan RSS fedds. Lantas bagaimana cara membuat widget follow social media keren ini, langsung saja simak tutorial berikut ini.

 Cara Membuat Widget Follow Sosial Media Keren

1. Langkah pertama, masuk terlebih dahulu ke dashboard blogger anda masing – masing.

2. Jika sudah, masuk ke “Template”, back up terlebih dahulu template anda untuk berjaga – jaga jika nanti terjadi kesalahan pada saat edit template.

3. Selanjutnya pilih dan klik “Edit HTML” pada template anda.

4. Cari kode ]]></b:skin> pada HTML template anda, gunakan Ctrl + F atau dengan menekan tombol F3 untuk mempermudah pencarian. Jika sudah ketemu letakkan kode berikut ini tepat di atas kode ]]></b:skin>

/* SOCIAL WIDGET */

.social-box{width:280px;padding:10px 9px;margin:0;overflow:hidden;background-color:#f9f9f9;border:1px solid #e8e8e8;text-align:center;}a.social-item-box{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;margin:0;padding:4px 0;background-image:url(&quot;http://4.bp.blogspot.com/-BijS0OXNqUM/Ub9XA_RlZLI/AAAAAAAACCM/c19K_XX4R30/s1600/csg-51bf56d8dd195.png&quot;);background-repeat:no-repeat;}.social-item-outer{margin:0 0 0 8px;overflow:hidden;float:left;display:inline-block;}.social-item-outer:hover{background:#f0f0f0;background:-webkit-linear-gradient(top, #f9f9f9, #f0f0f0);background:-moz-linear-gradient(top, #f9f9f9, #f0f0f0);background:-ms-linear-gradient(top, #f9f9f9, #f0f0f0);background:-o-linear-gradient(top, #f9f9f9, #f0f0f0);background:linear-gradient(top, #f9f9f9, #f0f0f0);}.social-item-outer:nth-child(1):hover{box-shadow:0px -2px 0px #E50700 inset;}.social-item-outer:nth-child(2):hover{box-shadow:0px -2px 0px #0084C5 inset}.social-item-outer:nth-child(3):hover{box-shadow:0px -2px 0px #6CAC00 inset;}.social-item-outer:nth-child(4):hover{box-shadow:0px -2px 0px #00C3B7 inset;}.social-item-outer:hover{box-shadow:0px -2px 0px #FF8168 inset;}.social-item-outer:first-child{margin-left:0px;}.facebook-box{background-position:7px 4px;}.rss-box{background-position:-73px 4px;}.twitter-box{background-position:-153px 4px;}.googleplus-box{background-position:-233px 4px;}.counter{margin:60px 0 0 0;font-family:&#39;Oswald&#39;,Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500;}.social-title{color:#888;font-size:11px;}

5. Lalu tekan “Save” atau “Simpan” untuk menyimpan kode tersebut pada template anda.

6. Sekarang, masuk ke “Layout” atau “Tata letak”

7. Tambahkan widget Javascript/HTML dimana anda akan menaruh widget follow social media ini, kalau saya boleh sarankan sebaiknya di sidebar saja.

8. Masukka kode berikut ini kedalam kotak Javascript/HTML.

<div class='social-box'>

<div class='social-item-outer'>

<a class='social-item-box facebook-box' href='http://www.facebook.com'>      

<div class='counter'>76.098</div><span class='social-title'>Fans</span></a>

</div>

             

<div class='social-item-outer'>

<a class='social-item-box twitter-box' href='http://twitter.com'>

<div class='counter'>6.987</div><span class='social-title'>Followers</span></a>

</div>

             

<div class='social-item-outer'>

<a class='social-item-box googleplus-box' href='http://plus.google.com'>

<div class='counter'>4.987</div><span class='social-title'>Followers</span></a>

</div>

             

<div class='social-item-outer'>

<a class='social-item-box rss-box' href='http://namabloganda.com/feeds/posts/default'>

<div class='counter'>398</div><span class='social-title'>Subcribers</span></a>

</div></div>

*Catatan :

·        Ganti teks yang bewarna merah dengan link social media anda.

·        Ganti angka yang bewarna hijau dengan jumlah yang anda inginkan.

·        Ganti teks yang berwarna biru dengan judul anda, misal Fans diganti dengan Likers.

9. Jika sudah selesai mengedit kodenya, silahkan tekan save atau simpan.

Nah, itulah tutorial cara membuat widget follow social media, mudah sekali bukan caranya? Langsung saja praktekkan dan lihat hasinya, pasti keren sekali. Kiranya cukup sekian tutorial kali ini, semoga bermanfaat.