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 Admin blog ini yang diberi berjudul Memasang Icon Media Sosial Di Sidebar Blog Dengan Font Awesome dan pada kesempatan kali ini admin akan membagikan sebuah tutorial membuat tombol social media Ala Fastest Magz.

Sebelumnya kalian pasti sudah tau sebuah Template premium yang dibuat oleh raden mas bagus 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 shobat sendiri. Bagi shobat yang ingin menambahkan tombol social media ala fastest magz silahkan shobat bisa mencobanya sendiri di blog shobat. Tombol social media ini berupa Facebook, Twitter, Google+, dan RSS Feeds. Silahkan langsung saja bagi Shobat yang ingin memasang tombol share social media seperti Template fastest magz tutorialnya dibawah ini saya jamin berhasil 100%

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 8px;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz2AMVucLr_CjHGz0Oqm1LpWgE4AswNJlucZNf900hEXDp3UAvO9xPLsRxM96qMLLfItCC5nc7sATcWtH3kxZPMr0nzUlweVYH7fDtMCLVOCztetxwSCUrD4FEiajRx74Nz1gfRp3Uakly/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;
box-shadow:0px -2px 0px #2EA9DA inset;
}
.social-item-outer:first-child {
margin-left:0px;
}
.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", Arial, Sans-serif;
line-height: 1.2em;
font-size: 16px;
font-weight: 400;
}
.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/masihsan' target='_blank' rel='nofollow' title='Facebook'> <div class='counter'>
1,5JT </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/masihsan' target='_blank' rel='nofollow' title='Twitter'> <div class='counter'>
10.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/+masihsan' rel='nofollow' target='_blank' title='Google+'> <div class='counter'>
9.82 </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 merah silahkan ganti sesuka Anda.

- Kode HTML diatas bisa Anda simpan di bagian Widget.

jangan lupa, ikuti juga cara Memasang Icon Media Sosial Di Sidebar Blog Dengan Font Awesome Sekian artikel mengenai Cara Membuat Tombol Social Media Ala Fastest Magz. Kurang lebihnya mohon maaf. Jika belum mengerti silahkan coment di kolom coment dibawah ini.

Semoga Bermanfaat...

Cara Membuat Tombol Social Media Ala Fastest Magz Dijamin Berhasil

0 Response to "Cara Membuat Tombol Social Media Ala Fastest Magz Dijamin Berhasil"