Cara membuat Social Share Button dengan hanya menggunakan CSS
Cara memasang social share button dengan menggunakan CSS | Setelah sebelumnya saya mencoba membagikan cara membuat kotak author di sidebar ( silakan klik tautan jika masih belum baca :D ), maka kali ini saya akan membagikan cara membuat sosial share button dengan menggunakan CSS sprite.Para sobat pasti tau apa itu CSS sprite, dengan css sprite kita tidak perlu menggunakan terlalu banyak javascript ataupun jquery, karena memang kita hanya menggunakan CSS, sehingga loading blog tidak berat alias ringan.
Adalagi yang spesial dari tutorial ini adalah bahwa social share button ini saya modifikasi dengan memasukkan share button addtoany, yang menampung hampir semua social bookmark yang bisa anda pergunakan untuk mencari backlink. Jadi setelah sobat membuat postingan, kita bisa membagikannya tanpa harus membuka web atau blog social bookmark tersebut, sehingga bisa menghemat waktu dan juga quota internet bagi yang lagi bokek, hahahhaa... :D
Social Share Button with CSS sprite plus AddtoAny button
Baiklah tidak usah panjang lebar kita langsung saja ke tutorial.Bahan yang kita perlukan adalah
Hanya itu? Iya,,, hanya itu :D. Sobat bisa klik kanan gambar lalu save image as ... lalu kita upload ke google drive atau hostingan yang lain.
langkah-langkah
1. Silakan buka template blogger >> Edit HTML
2. Copy paste kode HTML dibawah ini diatas </b:skin>
/* Share Button */
#buton-share{
margin:5px 0;
float:left;
padding:17px 15px 17px 0;
font:700 23px copse,serif;
text-shadow:0 2px 0 #fff,0 3px 0 #aaa;
display:inline-block;
}
ul.social-media{
margin:5px 0;
list-style:none;
display:inline-block;
margin-left:0;
padding:10px 0 0;
}
ul.social-media li{
display:inline-block
}
ul.social-media a{
display:inline-block;
width:40px;
height:40px;
background-image:url(https://googledrive.com/host/0B8x7i5dWad7OMUFqS1o2NXBHNFE);
background-attachment:local;
background-position:left top;
margin:0 2px;
}
ul.social-media .facebook a{
background-position: -3px -3px;
}
ul.social-media .facebook a:hover{
background-position: -3px -47px;
}
ul.social-media .googleplus a{
background-position: -136px -1px;
}
ul.social-media .googleplus a:hover{
background-position: -136px -46px;
}
ul.social-media .twitter a{
background-position: -273px -1px;
}
ul.social-media .twitter a:hover{
background-position: -273px -46px;
}
ul.social-media .boxmore a{
background-position: -226px -1px;
}
#a2apage_dropdown{
border-radius:0;
background-color:#F7F3C5;
border:none;width:235px;
box-shadow:0 0 10px #ddd;
}
a.a2a_i{
color:#980000!important;
border:none!important;
font:13px/24px lora,serif!important;
width:100px!important;
}
.a2a_wide a{
color:#980000!important;
font:13px/24px lora,serif!important;
}
Nb : Untuk kode gambar warna merah (https://googledrive.com/host/0B8x7i5dWad7OMUFqS1o2NXBHNFE) bisa anda ganti dengan menggunakan gambar sprite yang lain.
3. Kemudian cari <data:post.body/> , silakan gunakan Cntrl+F untuk mencari biar cepat. Anda akan menemukan kode tersebut banyak, paling tidak anda akan menemukannya sebanyak 3 kali, ambil saja kode yang ke 2, nanti dibawahnya sedikit terdapat <div class='post-footer-line post-footer-line-1'> silakan masukkan kode dibawah ini di bawahnya.
<b:if cond='data:blog.pageType == "item"'>
<div id='buton-share'>Share this!! &rarr;</div>
<ul class='social-media'>
<li class='facebook'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'/></li>
<li class='googleplus'><a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'/></li>
<li class='twitter'><a expr:href='"http://twittter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'/></li>
<li class='boxmore'>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' rel='nofollow' title='More Share'/>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</li>
</ul>
</b:if>
4. Pratinjau, kalau sudah cocok silakan di save template. SelesaiMudah, bukan? :D
Baca Juga :
- Cara terbaru mengambil url dari google drive- Rahasia mencari backlink berkualitas
- Cara belajar SEO yang benar
Demikian tutorial cara membuat social share button dengan CSS sprite , semoga bermanfaat. Untuk tutorial lainnya silakan klik tautan Tutorial. Terima kasih telah membaca blog jelek saya :D Wassalam.
