logo blog

2016-10-30T09:49:00+07:00

Membuat Tombol Share Artikel Ke Whatsapp di Halaman Blog

Membuat Tombol Share Whatsapp di Halaman Blog - Tombol share artikel selama ini memang banyak digunakan oleh para blogger  untuk mendukung dan mengoptimalkan Mesin Pencari (SEO) guna memudahkan pengunjung blog untuk menyebarkan informasi dari isi kontent atau artikel. Umumnya tombol share banyak di tempatkan dibawah postingan artikel, tetapi tidak menutup kemungkinan tombol share di tempatkan paling atas postingan artikel ini tergantung selera pemilik blog. Untuk tombol share yang saya bahas kali ini adalah tombol share Whatsapp, kenapa harus tombol share whatsapp. Pengguna Whatsapp Mobile menurut berita dari bbc setiap bulannya satu miliar pengguna whatsapp, dan setiap harinya terdapat 42 miliar pesan dan 250 juta video. Dari data tersebut artinya tombol share whatsapp perlu dipasang di setiap postingan artikel, Jika pengunjung blog mengeklik tombol share whatsapp maka akan semakin meningkatkannya popularitas dan peringkat blog di halaman hasil pencarian (SERP).

Cara Memasang Tombol Share Whatsapp

Cara Memasang tombol share wahtsapp sebenarnya cukup mudah, caranya hanya dengan memasukkan kode script  ke dalam template dengan tambahan Cascading Style Sheet (CSS). Tombol share whatsapp dan css yang saya pakai ini menyesuaikan dengan tampilan tombol share yang lain seperti Facebook, Google Plus, Twitter dan Linkedin. Untuk melihat tombol share whatsapp ini hanya bisa bisa terlihat di versi mobile karena saya menambahkan script tambahan hanya bisa dilihat di versi mobilenya.

Berikut ini cara memasang WhatsApp Share Button di blog seperti saya lakukan di blog ini:
  1. Buka Template ->> Edit HTML
  2. Cari (Ctrl+F) kode social share yang sudah dipasang, biasanya di bawah kode <data:post.body/>
  3. Copy Paste kode HTML dibawah ini, Pastekan kode di bawah kode <data:post.body/>
    <div class='spinner'>     
    <li><a class='fb-ico' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url  + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/> <span class='sit'>Facebook</span></a></li>
    <li><a class='twi-ico' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url  + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank' title='Tweet Tweet'><i class='fa fa-twitter'/> <span class='sit'>Twitter</span></a></li>
    <li><a class='go-ico' data-title='Google+' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank' title='Share on google+'><i class='fa fa-google'/> <span class='sit'>Google</span></a></li>
    <li><a class='linkedin-ico' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank' title='linkedin Share'><i class='fa fa-linkedin'/><span class='sit'>Share</span></a></li>
    <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
    <li><a class='bitz' expr:data-href='data:post.url' expr:data-text='data:post.title' href='javascript:window.location=waCurrentPage();' rel='nofollow' title='Share on whatsapp'><i class='fa fa-whatsapp'/> <span class='sit'>Whatsapp</span></a></li>
    </b:if>
    </div>
  4. Copy Paste kode CSS dibawah ini, Pastekan di bawah kode  <style type='text/css'> kode css.... </style> 
    .spinner{margin:80px auto auto;}
    .spinner li{list-style:none; display:inline;}
    .spinner li a{color: #fff; border-radius:6%; font-size: 14px; font-weight: 600; line-height:42px; padding: 10px 12px;}
    .spinner li a{margin-right:4px;}
    a.fb-ico{background:#3B5998;}
    a.linkedin-ico{background:#0976b4;}
    a.twi-ico{background:#19BFE5;}
    a.go-ico{background:#D64136;}
    a.bitz{background:#23A215;}
    .sit{margin-left:3px;}
    .spinner li a i{font-size:15px;}
    a:hover.fb-ico, a:hover.twi-ico, a:hover.go-ico{opacity:8;}
    .post-snippet:before{content:attr(data-snippet)margin:0 0 10px;padding:4px 0;}
    .fa-google-plus:before{content:"\f0d5"}
    .fa-google-plus-square:before{content:"\f0d4"}
    .fa-facebook:before{content:"\f09a"}
    .fa-twitter:before{content:"\f099"}
    .fa-plus:before{content:"\f067"}
    .fa-linkedin-square:before{content:"\f08c"}
    
  5. Simpan perubahan template anda, Sekarang Tombol Share WhatsApp sudah terpasang di Bawah Postingan Blog. Silakan cek dengan membuka blog Anda di HP. Untuk contoh script tombol share diatas anda bisa lihat tampilan blog ini versi mobilenya.
Subscribe to this Blog via Email :
Author commando98

Author:

Dalam Bekerja Harus Menantang Menantang Itu Harus Menyenangkan

9 comments

Write comments

Ardianto
Admin

November 9, 2016 at 2:25 PM
Mantap gan untuk tutorialnya, bisa dicoba diterapkan. Sukses untuk tutorial lainnya

Reply delete
avatar

March 29, 2018 at 11:10 PM
saya coba kok masih g muncul min?

Reply delete
avatar
Pengertian
Admin

October 22, 2018 at 4:01 AM
saya coba gagal ya ? gamuncul

Reply delete
avatar
Yose Phin
Admin
This comment has been removed by the author.
avatar
Yose Phin
Admin

November 2, 2018 at 10:21 PM
Ayo kunjungi situs kami dan daftarkan diri Anda www'dot'updatebetting'co'
deposit, mainkan dan menangkan taruhannya
Pin bb 7ACD8560

Reply delete
avatar

August 22, 2019 at 3:32 AM

My name is Leah Brown, I'm a happy woman today? I told myself that any loan lender that could change my life and that of my family after having been scammed separately by these online loan lenders, I will refer to anyone who is looking for loan for them. It gave me and my family happiness, although at first I had a hard time trusting him because of my experiences with past loan lenders, I needed a loan of $300,000.00 to start my life everywhere as single mother with 2 children, I met this honest and God fearing online loan lender Gain Credit Loan who helped me with a $300,000.00 loan, working with a loan company Good reputation. If you are in need of a loan and you are 100% sure of paying the loan please contact (gaincreditloan1@gmail.com)

Reply delete
avatar
Samsi Arifin
Admin

October 26, 2023 at 11:40 PM
Gagal min , muncul tulisan about blank bloked

Reply delete
avatar