Membuat Tombol Share Artikel Keren dan Responsive,- Selamat siang sobat dimana pun kalian berada. Ketika kau membuka artikel ini, saya tau apa yang kau inginkan, tombol share artikel kan ? baiklah, ku beri kau satu permintaan. Eh, tiga permintaan. Tapi sayangnya hanya satu yang sanggup kau pasang. Kaprikornus silahkan di pilih saja yang cocok buat kamu. hihiii...Tombol share artikel memang sangat membantu bagi keberlangsungan hidup blog yang tengah kita kelola, alasannya yaitu dengan tombol itulah kita dan juga para pengunjung lainnya sanggup menshare artikel-artikel kita yang sangat berkualitas, dan juga sekaligus memperkenalkan blog kita kepada orang lain.
Selain sanggup memberi manfaat pada orang lain dengan artikel yang kita tulis, tombol share juga sanggup menciptakan blog kita terkenal, dan terlebih lagi sanggup meningkatkan kualitas blog kita di mata search engine. Hebat bukan ?
Mmm.. Sepertinya saya sudah cukup usang berceramah. Baiklah, kita eksklusif intip saja ke tiga tombol share itu ya sahabat.
#1. Tombol Share Pertama
Jika kau menginginkan tampilan tombol share di atas, langkah pertama yang harus kau 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 arahan dibawah ini tepat dibawah arahan <head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>6. Lalu cari arahan <data:post.body/> (pada satu tema, biasanya terdapat 4-5 kode, pilih bab kedua)
7. Jika ketemu, pastekan arahan dibawah sempurna diatas arahan <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 kau menginginkan tampilan button share yang sanggup mengembang dikala kursor di arahkan ke sana, maka langkah pertama yang harus kau lakukan yaitu :
2. Edit HTML
3. Cari arahan <data:post.body/> (dalam satu templete, biasanya ada 4-5 arahan tersebut. maka pilih yang kedua)
4. Jika sudah ketemu, salin arahan 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 arahan di bawah ini, sempurna di atas arahan ]]></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, bila kau menginginkan tampilan tombol sharenya lebih rensponsive dan lebih ringan, silahkan pakai arahan yang akan saya berikan di bawah ini :
1. Buka templete
2. Pilih edit HTML
3. Cari arahan <head>
4. Jika sudah ketemu, pasangkan arahan di bawah ini, sempurna di bawah arahan <head>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
5. Masih pada bab HTML, kini cari arahan <data:post.body/> (disarankan pada struktur yang kedua)
6. Jika sudah ketemu, masukan arahan 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 arahan ]]></b:skin> untuk mengaktifkan tombol share
8. Jika sudah ketemu, letakan arahan ini sempurna di atasnya
10. Lihat blog
Itulah 3 jenis share button yang sanggup kau pilih. Terima kasih, biar bermanfaat dan biar 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 sanggup kau pilih. Terima kasih, biar bermanfaat dan biar blog bos kuh semakin terkenal.