Cara Membuat Tombol Share Button WhatsApp Keren Untuk Blogger AMP
WhatsApp semakin hari semakin banyak penggunanya. Selain banyak dimanfaatkan untuk chatting personal ternyata WhatsApp juga ada grub yang bisa digunakan sebagai media untuk berbagi. Dengan banyaknya pengguna perang seluler tentu WhatsApp juga banyak digunakan dengan begitu bisa kita manfaatkan untuk mendongkrak visitor blog kita. Bisa dengan membagikan lik artikel kita ke teman-teman kita atau di grub-grub WA.
Jika artikel yang anda miliki menarik anda bisa mendapatkan kesempatan agar artikel anda bisa dibagikan oleh pengunjung blog anda. Apalagi jika pengunjung ingin membagikan artikel ketemannya melalui WA mereka tidak perlu menyalin url artikel blog kita dan membagikannya secra manual. Cukup klik tombol share button WA maka mereka bisa membagikan artikel tersebut ke siapa saja.
1. Masuk ke blogger, pilih Template → Edit HTML
2. Salin kode dibawah ini dan pastekan diatas kode </head>
3. Untuk mememunculkan share button WAnya silakan anda salin kode dibawah ini dan letakkan dimana share button WA ingin dimunculkan.
Jika ingin meletakkan share button dibawah artikel maka letakkan kodenya dibawah kode <data:post.body/>
Apa share button ini bisa digunakan didesktop? Untuk pengguna selain mobile maka tidak bisa menggunakan fitur ini karena ketika dibuka dengan laptop/pc maka share button WhatsApp ini tidak akan muncul. Jika anda ingin share button ini bisa muncul didesktop maka nanti anda hanya perlu menghapus tag kondisionalnya nanti. Nah gimana tertarik untuk memasang tombol share button WA di blog anda? Berikut ini langkah-langkahnya
Memasang Tombol Berbagi WhatsApp Di Blogger
2. Salin kode dibawah ini dan pastekan diatas kode </head>
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
3. Untuk mememunculkan share button WAnya silakan anda salin kode dibawah ini dan letakkan dimana share button WA ingin dimunculkan.
Jika ingin meletakkan share button dibawah artikel maka letakkan kodenya dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item" and data:blog.isMobileRequest == "true"'>
<amp-social-share type="whatsapp"
layout="container"
data-share-endpoint="whatsapp://send"
expr:data-param-text='"Baca artikel ini siapa tahu bermanfaat" + data:blog.url'>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDIzeI54GgONOovJa7XXrCqpmihu2BTradNTgnFplO1yD-3ya050CKTQTgqv3phdnMF6zCXcZzw0OTTCmQO92xiq7KCCanMrnpzhP-6-0c2es1ZY-ciHm7zMr7VgnZjbrlyv8GPcnx9fq/s1600/whatsapp-share.png"
width="200"
height="38"
layout="fixed"
alt="Share via Whatsapp"></amp-img>
</amp-social-share>
</b:if>
- Hapus kode berwarna kuning jika ingin memunculkan share button WA di desktop
- Ganti tulisan berwarna kuning dengan pesan yang akan muncul ketika dibagikan
Terakhir simpan template.
Sekarang coba lihat blog anda apakah share button WA-nya sudah muncul. Jika anda belum menghapus kode berwarna kuning maka share button tidak akan muncul didesktop anda perlu membuka dengan perangkat seluler untuk melihat share button WA-nya. Cukup sekian artikel yang bisa saya bagikan semoga bermanfaat.
Related Posts :
Cara Membuat Menu Navigasi Responsive Seperti Evo Magz [CSS Keren]Kali ini saya akan membagikan tutorial cara membuat menu navigasi. Untuk menu navigasi yang akan kita buat ini adalah menu navigasi yang res… [Read More]
Cara Menambahkan Sidebar Baru Diatas Multitab SidebarApakah anda pengguna template evo magz seperti saya? Jika iya pasti ada multitab sidebar di blog anda. Nah jika anda bukan pengguna template… [Read More]
Membuat Menu Navigasi + Sosial Media [CSS,Responsive Dropdown] Di BlogspotBanyak tutorial-tutorial cara membuat menu navigasi yang bisa anda temukan di google. Tapi pasti yang anda cari adalah menu navigasi yang re… [Read More]
Cara Membuat Parse Tools [HTML,javascript] Sendiri Di Laman BlogSering dengar tentang parse? Biasanya berhubungan dengan adsense. Namun parse bukan hanya berhubungan dengan adsense saja tetapi dengan kode… [Read More]
5 Widget Search Box Dengan CSS Bootstrap Keren Di Blogspot - Search ButtonSearch box atau search button sangat penting di blog/situs anda. Karena memiliki fungsi yang penting bagi pengunjung blog. Apa fungsi dan ma… [Read More]
ReplyDeletekalau untuk menambahkan tombol share button seperti di web anggasave, gimana caranya mas?