Share Button Responsive, Lengkap dengan Tombol WhatsApp, Line dan BBM

Contoh gambar :

Cara membuat tombol share Responsive dengan tombol WhatsApp, Line dan BBM

Silahkan login ke Blogger > Edit HTML

Copy CSS berikut ini dan letakkan di atas kode </style> atau </b:skin>

/* CSS Share Button By Bung Frangki */

#share_btnper{margin:auto;padding:0}

.showother{display:none}

.share_btn{position:relative;margin:0;padding:0;display:block;overflow:hidden}

.share_btn ul,ul .showother{position:relative;margin:0;padding:0;font-size:12px}

.share_btn ul li{float:left;display:inline-block;overflow:hidden}

.share_btn li a,.shareplus{color:#fff;padding:0;width:40px;display:block;text-align:center;height:35px;line-height:35px;transition:all 0.25s;margin:0 5px 5px 0;text-transform:uppercase;letter-spacing:1px;border-radius:4px;overflow:hidden}

.share_btn i{font-size:16px;padding:0;margin:0;line-height:35px;text-align:center}

.shareplus{padding:0;background:#aaa;cursor:pointer}

.share_btn li a.fb i,.share_btn li a.tw i{width:20px;text-align:left}

.share_btn a:hover{background:#333}

.share_btn li a.fb{background:#4867aa;padding:0 35px;width:auto}

.share_btn li a.tw{background:#1da1f2;padding:0 35px;width:auto}

.share_btn li a.gp{background:#dc4a38}

.share_btn li a.pt{background:#ca2128}

.share_btn li a.le{background:#0673ab}

.share_btn li a.tr{background:#43556e}

.share_btn li a.em{background:#141b23}

.share_btn li a.ln{background:#00c300}

.share_btn li a.bm{background:#000}

.share_btn li a.wa{background:#4dc247}

.share_btn li a:hover,.shareplus:hover{-webkit-filter:grayscale(100%)}

@media screen and (max-width:768px){

.share_btn li a.fb,.share_btn li a.tw{padding:0 37px}}

@media screen and (max-width:480px){

.share_btn li a.fb,.share_btn li a.tw{padding:0 25px}}

@media screen and (max-width:320px){

.share_btn ul li a.fb,.share_btn ul li a.tw{padding:0 14px}}

Selanjutnya, cari kode ini:

<b:includable id='main' var='top'>

Ciutkan hingga menjadi seperti ini:

<b:includable id='main' var='top'>...</b:includable>

Lalu letakkan kode berikut tepat di bawah kode yang telah diciutkan tadi:

<b:includable id='sharethis' var='post'>

<li><a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=626,resizable=0,top=50,left=100");return false;' rel='nofollow' title='Share to Facebook'><i class='fa fa-facebook'/> <span class='hidetitle'>Share</span></a></li>

<li><a class='tw' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/> <span class='hidetitle'>Share</span></a></li>

</svg>

</a></li>

<b:if cond='data:blog.isMobileRequest == "true" and data:blog.pageType == "item"'>

<g>

</g>

</svg>

</a></li>

</b:if>

</ul>

</div>

</b:includable>

Langkah berikut, letakkan kode pemanggilnya dimana saja yang Anda mau. Entah itu di bawah judul artikel, di bawah postingan atau di tempat lain.

Atau bisa Anda letakkan di atas kode </article>

Kode pemanggilnya adalah sebagai berikut:

<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='sharethis'/>

</div>

</b:if>

Berikut, cari kode </body> atau </body> lalu letakkan kode berikut di atasnya:

<b:if cond='data:blog.pageType == "item"'>

//<![CDATA[

var x = document.getElementsByTagName("whatsapp")[0].getAttribute("href");

var y = document.getElementsByTagName("whatsapp")[0].getAttribute("text");

var z = "whatsapp://send?text=" + y + ' ' + x;

document.body.innerHTML = document.body.innerHTML.replace('bungfrangki', z);

//]]>

</script>

</b:if>

Terakhir, simpan Tema

Perhatian!

Tombol WhatsApp, Line dan BBM hanya akan bekerja jika pada device tersebut terinstal aplikasi terkait.

Untuk tombol share BBM hanya akan tampil pada device mobile saja. Uji-cobanya harus dari smartphone juga.

Berhubung aplikasi WhatsApp dan Line dapat diinstal pada laptop/computer, jadi pastikan laptop/PC Anda sudah diinstal aplikasi tersebut jika ingin coba-coba menggunakan tombol sharenya.

Tombol ini menggunakan FontAwesome dan dan SVG Fonts.

Sudah, segitu aja.

Source:

http://www.kompiajaib.com/2017/07/membuat-tombol-share-untuk-line-dan-bbm.html

http://www.bloggerguider.com/2016/11/whatsapp-sharing-button-blogger.html