logo blog

2016-10-30T11:52:00+07:00

Cara Mudah Membuat Tombol Share Artikel Pada Halaman Blog

share button
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.
Subscribe to this Blog via Email :
Author commando98

Author:

Dalam Bekerja Harus Menantang Menantang Itu Harus Menyenangkan

4 comments

Write comments

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
BANTUAN
Admin

January 25, 2019 at 1:33 AM
Fansbetting aman dan terpercaya
buruan daftar, main dan menangkan
PIN BB : 5EE80AFE :)

Reply delete
avatar
tganu
Admin

May 19, 2019 at 7:43 PM
Awat hangpa jadi lagu ni...?

http://15i27.cn/26giy5hNlj5I

Reply delete
avatar