Cara Membuat Tombol Share Sederhana dan Keren Plus Whatsapp di Blog

Gambar hanya pemanis

Kali ini saya akan coba berbagi trik membuat tombol share sederhana di blog yang sudah saya praktekan dan berhasil.
Trik ini sebelumnya sudah saya coba di template bawaan yaitu di tema Contempo dan Terkemuka, untuk tema bawaan lainnya saya belom coba.

Untuk yang memekai tema bawaan selain yang saya sebutkan di atas tidak ada salahnya untuk mencoba, dan jangan lupa setiap kali mau edit sebaiknya di bekap dulu untuk menjaga kalo hasil trik yang sudah di kerjakan tidak sesuai dengan keinginan.

Jika itu terjadi, sobat langsung saja upload file bekapan tadi agar tampilannya kembali seperti semula.

Ok langsung saja kita menuju ke cara membuatnya
Seperti biasa sobat login ke blogger kemudian pilih tema
Di sini ada dua pilihan, Sesuakan dan Edit Html, pilih saja edit html

Selanjutnya cari kode ini  ]]></b:skin>
jika sudah ketemu kemudian copas dan pastekan kode di bawah ini di atas kode tadi

/* Share button */
.share-postingan{display:inline-block;margin:0;color:#afafaf;text-transform:uppercase;font-size:14px;background:#fff;z-index:1;position:relative;padding:0 10px;font-weight:500}
#share-button{margin:20px auto;overflow:hidden}
#share{width:100%;text-align:center}
#share a{width:25%;height:40px;display:block;font-size:24px;color:#fff;opacity:0.8;transition:opacity 0.15s linear;float:left}
#share a:hover{opacity:1}
#share i{position:relative;top:50%;transform:translateY(-50%)}
.label-line,.label-line-c{position:relative}
.label-line-c{text-align:center;margin-bottom:6px}
.label-line:before,.label-line-c:before{z-index:1;content:"";width:100%;height:1px;background:#dddddd;position:absolute;top:50%;left:0;margin-top:-1px}
.label-info-th a{color:#888888;background:#f8f8f8;display:inline-block;padding:6px 12px;margin:1px 0;font-size:11px;font-weight:500;text-transform:uppercase;border:1px solid #dddddd}
.label-info-th a:hover{border:1px solid #777777;color:#777777}
.facebook{background:#3b5998}
.twitter{background:#55acee}
.pinterest{background:#cb2027}
.whatsapp{background:#25d366}

Setelah langkah di atas selesai kemudian lanjutkan mencari kode <data:post.body/>
Setelah ketemu kemudian letakan kode dibawah ini tepat di bawah kode <data:post.body/> tadi

<div id='share-button'>
<div class='label-line-c'>
<p class='share-postingan'>Share this post</p>
</div>
<div id='share'>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'></i></a>
<a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'></i></a>
<a class='pinterest' expr:href='&quot;http://pinterest.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Pinterest Share'><i class='fa fa-pinterest'></i></a>
<a class='whatsapp' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'></i></a>
</div>
</div>

Sekarang langkah terakhir, di langkah terakhir ini sobat cari kode </head> jika sudah ketemu letakkan kode di bawah ini di atasnya

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Arimo:400italic,400,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
//]]>
</script>

Kemudian Save dan lihat hasilnya.
Sekarang tombol share sederhana dan keren sudah terpasang, gimana mudah kan ?

Script di atas bukan milik saya dan trik di atas saya daptkan dari mbah google yang sudah saya praktekan dan berhasil.

Itulah cara membuat tombol sederhana dan keren di blog pernah saya coba, semoga bermanfaat.

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: