www.domainesia.com

Cara Membuat Tombol Social Media Ala Fastest Magz

Cara Membuat Tombol Social Media Ala Fastest Magz - Ficri Pebriyana
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 :
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...

12 Komentar untuk "Cara Membuat Tombol Social Media Ala Fastest Magz"

  1. Bang Share juga caranya membuat widget sosial dibawah pos seperti blog Sampean Bang

    BalasHapus
    Balasan
    1. ini judul artikelnya mas "Membuat Tombol Google+, Facebook, dan Twitter Valid HTML5" klik aja linknya ada diatas...

      Hapus
  2. sepertinya lebih keren ya mas tombol sosial media ala fastest ini, bisa coba saya terapkan ini mas

    BalasHapus
  3. ribet mas pake kode CSS segala, tapi terima kasih telah membantu. Mohon kunjungannya ke halaman situs saya di www.bacawebster.com.

    BalasHapus
    Balasan
    1. ya jelas pakai css, tanpa css garing mas cuman tulisan doang yang muncul...

      Hapus
  4. CSS sangat diperluka bagi semua blog untuk membuat blog menjadi menarik dan high quality , bagus artikelnya mas

    BalasHapus
  5. saya udh coba tipsnya, kok gak ada gambar sosial icon-nya?

    BalasHapus
  6. Tipsnya ampuh gan, angkanya tinggal dimasukkan saja ya,,

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting