Cara Membuat dan Menambahkan Tombol Share Whatsapp Di Bawah Postingan
Saturday, 11 August 2018
Add Comment
Social media merupakan salah satu cara untuk mempromosikan blog agar terkenal dan mendapatkan banyak pengunjung.Agar blog anda banyak pengunjung, hal yang harus diperhatikan ialah dengan membuat tombol share dibawah / diatas postingan blog membuat tombol share facebook,twitter google+ linkedin serta whatsApp dengan tujuan mendapatkan traffic yang cukup untuk membuat statistik laporan pengunjung Anda menjadi runcing dikarenakan lonjakan pengunjung yang tinggi.
WhatsApp merupakan aplikasi yang lagi trend diIndonesia terutama di kalangan anak muda jaman sekarang, tentunya ini menjadi peluang yang baik bagi seorang blogger untuk membagikan artikelnya ke suatu grup whatsapp dengan mudah, Hal ini tentunya berguna untuk meningkatkan trafik pada blog anda.Banyak website sekarang hanya membagikan cara membuat tombol share saja tidak termasuk dengan tombol share whatsApp dikarenakan aplikasi ini baru kembali ngetrend setelah mengalahkan aplikasi bbm di dalam media komunikasi chatting. Pada artikel ini mimin akan membahas cara membuat tombol share di blog/website anda dengan tambahan tombol whatsapp.
Bagaimanakah cara membagikan artikel ke grup whatsapp anda? Apa dengan mengcopy url langsung ? Cara tersebut memang bisa dilakukan namun tidak efektif. Anda masih harus mengcopy dan mempaste link ke grup whatsapp tersebut.
Dengan menambah tombol share whatsapp pada blog kita. Jadi anda ataupun pengunjung tinggal mengklik tombol WhatsApp ini apabila ingin membagikannya ke teman ataupun ke grup WhatsApp.
Sebenarnya tombol share whatsapp dapat di pasang dimana saja. Baik header, di bawah postingan, maupun di footer. Namun pada kesempatan kali ini, admin akan memberitahu bagaimana cara menambahkan tombol share whatsapp di bawah postingan blog
Berikut adalah langkah-langkah yang harus dilakukan
- Pertama, silahkan pergi ke dashboard blog Blogger Anda
- Setelah itu, masuk ke menu Template--> Edit HTML
- Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
- Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>
Copy dan pastekan Script dibawah ini :
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Kemudian cari kode <data:post.body/>
Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.
Copy dan Pastekan Script dibawah ini :
<div style="background-color: white; border: 3px #1780dd double; padding: 10px; text-align: left;">
Copy dan pastekan script berikut :<br />
<br />
<style>
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:active{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:active,.sharepost li .facebook:active,.sharepost li .gplus:active,
.sharepost li .pinterest:active,.sharepost li .linkedin:active{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#fff;margin:0 auto;padding:10px 8px;background:#81FF00}
.wa-button i{font-weight:300;margin:0 5px 0 0}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType == "item"'>
<div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li class='wa-button'><a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> WhatsApp</a></li>
</ul>
</div> </b:if>
<br />
</div>
<div style="background-color: white; border: 3px #1780dd double; padding: 10px; text-align: left;">
Copy dan pastekan script berikut :<br />
<br />
<style>
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:active{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:active,.sharepost li .facebook:active,.sharepost li .gplus:active,
.sharepost li .pinterest:active,.sharepost li .linkedin:active{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#fff;margin:0 auto;padding:10px 8px;background:#81FF00}
.wa-button i{font-weight:300;margin:0 5px 0 0}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType == "item"'>
<div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li class='wa-button'><a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> WhatsApp</a></li>
</ul>
</div> </b:if>
<br />
</div>
Kemudian klik tombol Simpan!
Sekarang tombol share whats app di blog Anda anda telah terpasang, silahkan dicoba dan semoga bermanfaat
0 Response to "Cara Membuat dan Menambahkan Tombol Share Whatsapp Di Bawah Postingan"
Post a Comment