Cara Menambahkan Widget Whatsapp Share Di Blog Terbaru

Social share saat ini sudah sangat populer dalam blog, setiap template blog sudah pasti mempunyai social share seperti facebook,twitter dan google plus. seocial share sebenarnya bertujuan untuk memudahkan pengunjung blog agar mereka bisa share artikel kita ke media social mereka, Ini juga bertujuan untuk menarik atau meningkatkan trafik pengunjung pada blog.

Mungkin Facebook,Twitter dan gplus sudah biasa berada diblog kalian, Tapi kali ini saya bakal share 1 widget socialshare widget yang juga sangat banyakdigunakan yakni, WhatsApp Share! untuk pemasangan silahkan ikuti step-step dibawah ini dengan benar.

Sebelum menambahkan widget whatsapp sharing, pastikan kamu tidak lupa untuk menambahkan Script Fontawesome pada bagian <head> karena widget ini bekerja dengan bantuan Fontawesome untuk menampilkan icon whtsapp caranya seperti berikut ini.

Blogger.com > Tema > Edit HTML lalu tekan CTRL + F Search </head> jika suda selanjutnya pastekan code dibawah ini tepat dibagian atas </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Step 1 - Penambahan Script CSS

Silahkan masuk di Blogger.com > Tema > Edit HTML lalu tekan CTRL + F dalam template silahkan Cari code berikut ]]></b:skin> jika sudah ketemu silahkan copy code dibawah ini dan pastekan tepat diatas code ]]></b:skin>

/* ######## WhatsApp Social Sharing ######################### */
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a span {
display: none;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}
.share-art .wat-art{background:#25d266;display:none;}
.share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)}
@media only screen and (max-width: 768px) {
.share-art .wat-art{display:inline-block;}
}

Step 2 - Penambahan HTML

Selanjutnya silahkan cari code ini <data:post.body/> silahkan copykan kode dibawah ini, Setelah itu pastekan tepat dibawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='share-box'>
<h8 class='share-title'>Share This:</h8>
<div class='share-art'>
<a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
<a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>
<a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>
<a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>
<a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>
<whatsapp expr:href='data:post.url' expr:text='data:post.title'/>
<a class='wat-art' expr:href='"whatsapp://send?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a>
</div>
</div>
<div style='clear:both'/>
</b:if>

Cat : Jika kamu ingin menampilkan widget ini pada setip halaman Beranda,Postingan,indeks dll. kamu bisa menghapus sicript yang berwarna merah pada bagian HTML diatas.