Cara Mudah Membuat Tombol Share Artikel Pada Halaman Blog

Cara Mudah Membuat Tombol Share Artikel Pada Halaman Blog - Memasang Tombol share seperti Google Plus, Facebook , Twitter dan Linkedin di halaman artikel dapat  meningkatkan popularitas dan peringkat blog di halaman hasil pencarian (SERP), Cara ini salah satunya untuk mengoptimalkan SEO blog. Tombol share ini untuk 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.

Cara Memasang sangat mudah, caranya hanya dengan memasukkan kode script  ke dalam template dengan tambahan Cascading Style Sheet (CSS). Tombol share artikel pada halaman blog saya pakai juga di blog ini, kalau anda mau lihat secara tampilan tombol share ada di bawah setiap artikel blog ini.

Berikut ini Cara Mudah Membuat Tombol Share Artikel Pada Halaman 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 sudah terpasang di Bawah Postingan Blog. Silakan cek dengan membuka blog Anda di HP atau di laptop.

• Cara Membuat Tombol Share Artikel Ke Whatsapp di Halaman Blog