Membuat Widget Sosial Media

Membuat Widget Sosial Media - Sosial media memiliki peranan penting untuk pemilik situs web/blog. Karena banyaknya pengguna sosial media di seluruh dunia ini, sehingga apabila kita bisa memanfaatkannya maka akan dapat mendatangkan trafik yang berlimpah.

Salah satu cara untuk menambah pengikut melalui jejaring sosial ini adalah dengan menyediakan widget khusus yang dapat terhubung langsung dengan situs sosial.

Bagi yang ingin mencobanya, silahkan ikuti tutorial berikut :

Membuat Widget Sosial Media

1. Buka Blogger > Tema > Edit HTML > Pastekan kode CSS berikut di atas kode ]]></b:skin> atau </style>.

.social{width:280px;padding:10px 9px;margin:0;overflow:hidden;background-color:#f2f2f2;border:1px solid #f2f2f2;text-align:center;}

a.social-item{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;margin:0;padding:4px 0;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtsr-QWets_RnLDGl72amk2iMeNwCR0IS1insq_U6D9Qtf3lu1Ja8GCV5xukaeusICkkWG2iLKk7cm4uHZNJFHidB2HBy3PH_J4X0bnpMoxEx6BnRDJnvgrFcz8QBlihzFPfWG3m86NAf/s1600/social-icon.png");background-repeat:no-repeat;}

.social-item-outer{background:#f8f8f8;margin:0 0 0 8px;overflow:hidden;float:left;display:inline-block;}

.social-item-outer:hover{background:#fff;}

.social-item-outer:nth-child(1):hover{box-shadow:0px -2px 0px #455ede inset;}

.social-item-outer:nth-child(2):hover{box-shadow:0px -2px 0px #738ffe inset}

.social-item-outer:nth-child(3):hover{box-shadow:0px -2px 0px #dd191d inset;}

.social-item-outer:nth-child(4):hover{box-shadow:0px -2px 0px #fb8c00 inset;}

.social-item-outer:hover{box-shadow:0px -2px 0px #FF8168 inset;}

.social-item-outer:first-child{margin-left:0px;}

.facebook{background-position:7px 4px;}

.rss{background-position:-73px 4px;}

.twitter{background-position:-153px 4px;}

.googleplus{background-position:-233px 4px;}

.counter{margin:60px 0 0 0;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500;}

.social-title{color:#607d8b;font-size:11px;}

2. Simpan Tema
3. Lalu Klik Tata Letak > Tambahkan Gadget > HTML/JavaScript > Lalu pastekan Kode berikut :

<div class='social'>
   <div class='social-item-outer'>
   <a class='social-item facebook' href='http://www.facebook.com/TipsDeny'>  
     <div class='counter'>
    76.098
  </div>
  <span class='social-title'>Fans</span>
   </a>
   </div>

   <div class='social-item-outer'>
   <a class='social-item twitter' href='http://twitter.com/tipsdeny'>
     <div class='counter'>
    6.987
  </div>
  <span class='social-title'>Followers</span>
   </a>
   </div>

   <div class='social-item-outer'>
   <a class='social-item googleplus' href='http://plus.google.com/+TipsDeny'>
     <div class='counter'>
    4.987
  </div>
  <span class='social-title'>Followers</span>
   </a>
   </div>

   <div class='social-item-outer'>
   <a class='social-item rss' href='http://feeds.feedburner.com/tipsdeny'>
     <div class='counter'>
    398
  </div>
  <span class='social-title'>Subcribers</span>
   </a>
   </div>
    </div>

Ganti http://www.facebook.com/TipsDeny dengan User ID Facebook Anda
Ganti http://twitter.com/tipsdeny dengan User ID Twitter anda
Ganti http://plus.google.com/+TipsDeny dengan ID Google Plus Anda
Ganti http://feeds.feedburner.com/tipsdeny dengan RSS Feed Address Anda

4. Simpan dan lihat hasilnya.

Demo

Demikian tutorial Membuat Widget Sosial Media. Semoga bermanfaat.

Share this post