Membuat Tombol Share Artikel Keren dan Responsive,- Selamat siang sahabat Programmer SEO dimana pun kalian berada. Ketika kamu membuka artikel ini, saya tau apa yang kamu inginkan, tombol share artikel kan ? baiklah, ku beri kamu satu permintaan. Eh, tiga permintaan. Tapi sayangnya hanya satu yang bisa kamu pasang. Jadi silahkan di pilih saja yang cocok buat kamu. hihiii...Tombol share artikel memang sangat membantu bagi keberlangsungan hidup blog yang tengah kita kelola, karena dengan tombol itulah kita dan juga para pengunjung lainnya bisa menshare artikel-artikel kita yang sangat berkualitas, dan juga sekaligus memperkenalkan blog kita kepada orang lain.
Selain dapat memberi manfaat pada orang lain dengan artikel yang kita tulis, tombol share juga dapat membuat blog kita terkenal, dan terlebih lagi dapat meningkatkan kualitas blog kita di mata search engine. Hebat bukan ?
Mmm.. Sepertinya saya sudah cukup lama berceramah. Baiklah, kita langsung intip saja ke tiga tombol share itu ya sahabat.
#1. Tombol Share Pertama
Jika kamu menginginkan tampilan tombol share di atas, langkah pertama yang harus kamu lakukan ialah :
1. Silahkan buka dasbor blog kamu
2. Klik templete atau tema
3. Pilih edit HTML
4. Cari kode <head>
5. Jika sudah ketemu, simpan script kode dibawah ini tepat dibawah kode <head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>6. Lalu cari kode <data:post.body/> (pada satu tema, biasanya terdapat 4-5 kode, pilih bagian kedua)
7. Jika ketemu, pastekan kode dibawah tepat diatas kode <data:post.body/>
<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 .pinterest{background-color:#cc2127;}
.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}
</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><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
</ul>
</div> </b:if> #2. Tombol Share Mengembang
Jika kamu menginginkan tampilan button share yang dapat mengembang ketika kursor di arahkan ke sana, maka langkah pertama yang harus kamu lakukan yaitu :
2. Edit HTML
3. Cari kode <data:post.body/> (dalam satu templete, biasanya ada 4-5 kode tersebut. maka pilih yang kedua)
4. Jika sudah ketemu, salin kode di bawah ini dan letakan di bawah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='tombol-berbagi-arlina-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if> 6. Pasangkan struktur kode di bawah ini, tepat di atas kode ]]></b:skin> atau </style>
/* CSS Share Button */
.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}} #3. Tombol Share Responsive SEO
Nah, jika kamu menginginkan tampilan tombol sharenya lebih rensponsive dan lebih ringan, silahkan pakai kode yang akan saya berikan di bawah ini :
1. Buka templete
2. Pilih edit HTML
3. Cari kode <head>
4. Jika sudah ketemu, pasangkan kode di bawah ini, tepat di bawah kode <head>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
5. Masih pada bagian HTML, sekarang cari kode <data:post.body/> (disarankan pada struktur yang kedua)
6. Jika sudah ketemu, masukan kode ini dibawah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='bg-teks'>Bagikan ke orang lain!!</div>
<div class='tombol-berbagi'>
<a class='berbagi-gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google
</a>
<a class='berbagi-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='blank'>
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook
</a>
<a class='berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='blank'>
<i class="fa fa-twitter" aria-hidden="true"></i> Twitter
</a>
<a class='berbagi-in' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='blank'>
<i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin
</a>
</div>
</b:if>
7. Lalu cari kode ]]></b:skin> untuk mengaktifkan tombol share
8. Jika sudah ketemu, letakan kode ini tepat di atasnya
10. Lihat blog
Itulah 3 jenis share button yang bisa kamu pilih. Terima kasih, semoga bermanfaat dan semoga blog bos kuh semakin terkenal.
/*--Tombol Share Bloggars.com Design--*/
.tombol-berbagi {border-top: 2px solid;padding: 5px 10px 10px 5px;width: 100%;}
.tombol-berbagi a {color:#FFF;}
.tombol-berbagi a i {border-right: 1px solid;padding-right: 5px;}
.bg-teks {font-size: 16px;margin: 5px;text-align: left;font-weight: bold;}
.berbagi-gp, .berbagi-fb, .berbagi-tw, .berbagi-in {color: #fff;display: inline-block;font-size: 13px;line-height: 100%;margin: 7px;border-radius: 5px;margin: 2px;padding: 7px;text-align: center;}
.berbagi-gp {background: #dc4e41;}
.berbagi-fb {background:#3d5b99;}
.berbagi-tw {background:#1da1f2;}
.berbagi-in {background:#0077b5;}
@media only screen and (max-width:480px){
.berbagi-gp, .berbagi-fb, .berbagi-tw, .berbagi-in {width: 100px;}} 10. Lihat blog
Itulah 3 jenis share button yang bisa kamu pilih. Terima kasih, semoga bermanfaat dan semoga blog bos kuh semakin terkenal.
1 komentar so far
Scriptnya Work kak thx 😁
EmoticonEmoticon