Bani Cyber Blog - Tombol share atau bagikan dibuat pada setiap postingan blog supaya pengunjung dapat membagikan postingan yang menurutnya penting, dan mungkin juga akan bermanfaat orang yang lainnya.


Ketika kita memilih template milik blogger, pasti sudah tersedia tombol bagikan [share] yang berada di bawah postingan blog, tapi tampilan tombol share nya [default] tidak menarik malahan membuat tampilan blog tambah jelek :P.


Untuk itu diperlukan kemampuan khusus dalam css untuk membuat/modifikasi tombol bagikan sesuai tampilan yang kita inginkan. Dan pada hari spesial tahun baru 2017 ini saya akan bagikan cara membuat tombol bagikan [share] keren di bawah postingan blog.

cara membuat tombol bagikan keren di blog
Demonya agak lain, hehehe

Tombol bagikan yang akan saya bagikan responsive banget malahan ketika di buka melalui versi mobile, terlihat keren banget. Kamu yang suka dengan tombol bagikan yang akan saya bagikan, nyimak terus ya 😄!


Untuk demo tombol bagikan nya bisa kamu lihat dibawah postingan ini, dengan sedikit modifikasi dari tombol share dibawah akhirnya saya akan memulai tips dari yang pertama.

Membuat Tombol Bagikan Keren di Blog

  1. Masuk ke Blogger.com
  2. Buka Template Edit HTML
  3. Cari Kode Berikut dengan [CTRL+F]
 ]]></b:skin>
  1. Tambahkan css berikut sebelum kode tadi
/* Tombol Bagikan Keren by Bani AL */

h2.judulshare{position:relative;overflow:hidden;margin:20px 0;font-size:125%;font-weight:700;padding:0 8px;text-align:center;text-transform:uppercase;transition:all .5s ease-out;border-bottom:1px solid #008080;
}
h2.judulshare:before, h2.judulshare:after {position:absolute;top:51%;overflow:hidden;width:50%;height:2px;content:&#39;\a0&#39;;background-color:#ddd;
}
h2.judulshare:before{margin-left:-50%;text-align:right;
}
h2.judulshare span{position:relative;display:inline-block;padding:5px 10px;margin:0 10px;
}
.bagiin,.bagikan{position:relative;display:inline-block;
}
.bagikan{display:table;margin:auto;text-align:center
}
.bagikan a.fb,.bagikan a.gp,.bagikan a.tw{font-size:105%;text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-weight:700;text-transform:uppercase;color:#fff;text-shadow:none;padding:2px 8px;opacity:1;transition:all .3s
}
.bagikan a.fb{color:#f0ffff;border:1px solid #008080;background:#0000cd;
}
.bagikan a.gp{color:#f0ffff;border:1px solid #008080;background:#f08080;
}
.bagikan a.tw{color:#f0ffff;border:1px solid #008080;background:#00BFFF;
}
.bagikan a.fb:active,.bagikan a.gp:active,.bagikan a.tw:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)
}
  1. Selanjutnya, cari kode berikut dengan [CTRL+F]
<data:post.body>
  1. Letakkan kode berikut setelah kode tadi
<h2 class='judulshare'><span>BAGIKAN</span></h2>
  <script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="bagikan"><div class="bagiin"> \
<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Bagikan ke Google+">\
    Google+</a> \
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Bagikan ke Facebook">\
    Facebook</a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Bagikan ke Twitter">\
    Twitter</a> \
</div><div class="clear"></div></div> \
');
var button=document.querySelector(".pl");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="block"==t.style.display?"none":"block"});
//]]>
  </script>
  1. Save Template

Jangan lupa kamu preview, jika kalau kamu rasa masih kurang kamu bisa meodifikasi tampilan CSS nya sesukamu. Berakhirlah artikel kali ini, apabila kamu memiliki pertanyaan mengenai artikel diatas, bisa kamu sampaikan melalui komentar.

Berlangganan via Email

Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.


0 Tanggapan Untuk "Membuat Tombol Bagikan Keren Di Bawah Postingan Blog"

Post a Comment