Membuat Share Botton Resposive Sendiri Di Bawah Postingan Blog

Membuat Share Botton Resposive Sendiri Di Bawah Postingan Blog

Selamat malam semuanya? Baiklah pada kali ini saya akan mencoba untuk berbagi informasi mengenahi optimasi blog supaya blog anda dapat berjalan lebih responsive. Salah satunya dengan menbuat share botton yang responsive. Jika blog anda menggunakan share botton-nya menggunakan kaitan script yang langsung dari pengembang maka menurut saya akan menghambat kerja atau proses pembukaan halaman. Sebab pembacaan share button yang di gunakan perlu membaca langsung dari server pengembang jadi, membutuhkan waktu.

Untuk itulah, anda dapat membuat alternatif button yang lebih responsive. Jika anda tertarik ada baiknya jika anda mengikuti langkah berikut ini.

Langkah pertama yang harus anda jalani adalah dengan membuat script.CSS. atau anda dapat copy/paste script dibawah ini dan tempelkan di Skin pada blogger anda. tepat sebelun ]]></b:skin>.

* Tombol Share set */
#share-button-kangkang {
margin:0 0 8px;
padding:0;
overflow:hidden;
}
#share-button-kangkang p {
margin: 0 3px 3px 0;
font-size: 100%;
float: left;
background: #f9f9f9;
display: block;
padding: 2px 5px;
margin: 0 3px 3px 0;
}
#share-button-kangkang a {
position: relative;
float: left;
display: block;
color: #fafafa;
padding: 2px 5px;
border: 1px solid #fff;
}
#share-button-kangkang a:hover {
top:1px;
left:1px;
box-shadow:0px 0px 3px rgba(1,1,1,.1);
}

kemudian jangan lupa untuk untuk mencari code ini : "<div class='post-footer-line post-footer-line-1'>" dan anda dapat meletakkan kode dibawah ini tepat dibawahnya:

<div id='share-button-kangkang'>
<p>Share ke:</p>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a>
<a class='facebook' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'>Google+</a>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a><p><a href="http://feeds.feedburner.com/InformasiSeputarHargaMesinDanElektronikTerbaru"><img src="http://feeds.feedburner.com/~fc/InformasiSeputarHargaMesinDanElektronikTerbaru?bg=0066FF&amp;fg=CC0000&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p>
<div class='clear'/>
</div>

Jika pekerjaan anda telah usai anda dapat melihat hasil atas pekerjaan yang anda kerjakan. Lihat contoh hasil berikut ini.

Membuat Share Botton Resposive Sendiri Di Bawah Postingan Blog 2015-11-11T05:48:00-08:00 Rating: 4.5 Diposkan Oleh: Kang Icung