Tombol Social Media Ala FastestMagz

Unknown

Buttons

Minggu, 07 September 2014

Belum ada komentar

Tombol Social Media Ala FastestMagz - Bicara tentang social media, social media sangatlah akrab dengan keseharian kita-kita yang hampir setiap hari bertatapan dengan layar komputer. Karena itu social media wajib terpampapang di blog anda, agar memudahakan pengunjung yang ingin membagikan artikel kita ke beberapa social media. Dengan itu juga blog kita menjadi banyak pengunjung .
Tombol social media yang akan saya bagikan ini adalah tombol yang dibuat oleh +Mas Sugeng yang sekaligus pembuat dari templat FastestMagz. Tombol social media ini sangat bagus untuk dipasang di blog kalian, karena design flat seperti theme windows 8 yang tentunya sangat keren untuk dipajang .

• Demo

Cara Pemasangan

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin> atau </style>

   /*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. Cari kode 'sidebar' atau 'sidebar-wrapper'
6. Copy kode HTML dibawah ini, lalu Paste dibawah kode 'sidebar' atau 'sidebar-wrapper'
   

   <div class='social-box'>
   
      <div class='social-item-outer'>
   
      <a class='social-item-box facebook-box' href='http://www.facebook.com/urlAnda' target='_blank' rel='nofollow' title='Facebook'>   
   
        <div class='counter'>
   
       2JT
   
     </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/UrlAnda' target='_blank'  rel='nofollow' title='Twitter'>
   
        <div class='counter'>
   
       12.230
   
     </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/u/0/115752137581815240750/posts' rel='nofollow' target='_blank' title='Google+'>
   
        <div class='counter'>
   
       7.352
   
     </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/ID_Feeds_Anda' rel='nofollow' target='_blank' title='RSS Feeds'>
   
        <div class='counter'>
   
       879
   
     </div>
   
     <span class='social-title'>Subcribers</span>
   
      </a>
   
      </div>
   
       </div>

7. Simpan

Catatan :

- Warna Biru silahkan ganti dengan link milik Anda.

- Warna Orange silahkan ganti sesuka Anda.

- Kode HTML diatas bisa Anda simpan di bagian Widget.