Cara Membuat Tombol Social Media Ala Fastest Magz

Cara Membuat Tombol Social Media Ala Fastest Magz - Banyak sekali versi tombol social media yang dibagikan oleh para Blogger, seperti pada artikel sebelumnya yang ditulis blog Ficri Pebriyana yang berjudul Membuat Tombol Google+, Facebook, dan Twitter Valid HTML5 dan pada kesempatan kali ini saya akan membagikan sebuah tutorial membuat tombol social media ala fastest magz.

Sebelumnya kalian pasti tau sebuah Template premium yang dibuat oleh +Mas Sugeng yang diberi nama Fastest Magz, template tersebut salah satunya menggunakan tombol social media seperti ini dan ini sangat bagus untuk dicoba pada blog Anda masing-masing. Bagi Anda yang ingin menambahkan tombol social media ala fastest magz ini silahkan saja Anda bisa mencobanya sendiri. Tombol social media ini berupa Facebook, Twitter, Google+, dan RSS Feeds. Silahkan langsung saja bagi Anda yang ingin memasang tombol share social media seperti blog fastest magz tutorialnya dibawah ini :

Demo

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

<div class='social-box'>

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

   <a class='social-item-box facebook-box' href='http://www.facebook.com/ficri12' 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/FicriPebriyana' 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/+FicriPebriyana' 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. Klik 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.

Sekian artikel mengenai Cara Membuat Tombol Social Media Ala Fastest Magz. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini