Cara Membuat Widget Social Box

Prikinymous - Halo sobat ! kali ini Prikinymous blog akan share cara membuat sebuah widget social box. Widget Social Box ini berbeda dari yang lain, yaitu widget social box ala template Fastest Magz. Widget yang satu ini berfungsi untuk menunjukkan betapa hebatnya anda di Social Media. Widget ini menunjukkan berapa followers Twiter, Google+, Facebook dan subcribers Feedburner. Jika sobat tertarik membuatnya, Silahkan ikuti caranya !

Social Box

• Demo

   1. Login ke Blogger
   2. Masuk ke Dashboard --> Template --> Edit HTML
   3. Cari code ]]></b:skin>
   4. Masukkan code CSS di bawah di atas code ]]></b:skin>

Code CSS :

/*SOCIAL WIDGET*/
.social-box{width:280px;padding:10px 9px;margin:0;overflow:hidden;background-color:#f2f2f2;border:1px solid #f2f2f2;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("http://4.bp.blogspot.com/-BijS0OXNqUM/Ub9XA_RlZLI/AAAAAAAACCM/c19K_XX4R30/s1600/csg-51bf56d8dd195.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:0 -2px 0 #187DDB inset}
.social-item-outer:nth-child(2):hover{box-shadow:0 -2px 0 #2DB5EB inset}
.social-item-outer:nth-child(3):hover{box-shadow:0 -2px 0 #E02222 inset}
.social-item-outer:nth-child(4):hover{box-shadow:0 -2px 0 #F6A429 inset}
.social-item-outer:hover{box-shadow:0 -2px 0 #FF8168 inset}
.social-item-outer:first-child{margin-left:0}
.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:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500}
.social-title{color:#888;font-size:11px}

   5. Klik simpan template
   6. Kembali ke Dashboard --> Tata Letak --> Add Widget
   7. Pilih HTML / JavaScript
   8. Masukkan code berikut di kolom yang tersedia
       Code :

<div class='social-box'>
   <div class='social-item-outer'>
   <a class='social-item-box facebook-box' href='http://www.facebook.com/iqbal.miko' target='_blank' rel='nofollow' title='Facebook'>   
     <div class='counter'>
    20
  </div>
  <span class='social-title'>Followers</span>
   </a>
   </div>

   <div class='social-item-outer'>
   <a class='social-item-box twitter-box' href='http://twitter.com/iqbal_miko' target='_blank'  rel='nofollow' title='Twitter'>
     <div class='counter'>
    12
  </div>
  <span class='social-title'>Followers</span>
   </a>
   </div>

   <div class='social-item-outer'>
   <a class='social-item-box googleplus-box' href='https://plus.google.com/+IqbalMiko' rel='nofollow' target='_blank' title='Google+'>
     <div class='counter'>
    73
  </div>
  <span class='social-title'>Followers</span>
   </a>
   </div>

   <div class='social-item-outer'>
   <a class='social-item-box rss-box' href='http://feeds.feedburner.com/Prikinymo' rel='nofollow' target='_blank' title='RSS Feeds'>
     <div class='counter'>
    8
  </div>
  <span class='social-title'>Subcribers</span>
   </a>
   </div>
    </div>

Catatan : 
- Text berwarna biru silahkan di ganti dengan url sobat
- Text berwarnan kuning silahkan di ganti dengan jumlah followers/subcribers

   9. Klik Simpan, selesai

Cukup sekian post saya kali ini tentang Cara Membuat Widget Social Box ala Fastest Magz, Semoga bermanfaat !

Tweet