Memasang Tombol Share di Blog - Pada postingan ke dua di hari ini Arlina Design akan berbagi sebuah share button pada postingan yang dipakai blog ini. Tutorial ini Saya buat atas permintaan sobat blogger di sini.
Share button ini berguna untuk memudahkan pengunjung yang ingin berbagi artikel yang dirasa bermanfaat ke jaringan sosial media mereka. Seperti Facebook, Twitter, Google plus, dan Linkedin. Share button ini nantinya akan muncul di setiap postingan blog sobat.
Baca juga : Memasang Widget Share Button di Postingan
Untuk tampilan seperti screenshot di bawah ini atau bisa dilihat langsung di bawah artikel blog ini (jika belum diganti)
Berikut cara penerapannya :
1. Login ke Blogger > Template > Klik Edit HTML > Cari kode di bawah ini kemudian pilih yang ke dua dalam markup post (bukan mobile post)
<data:post.body/>2. Kemudian salin kode di bawah ini tepat setelah kode yang disebutkan tadi
<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>3. Selanjutnya terapkan kode di bawah ini tepat sebelum ]]></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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVIKMiYvvh0kUVQMaqkbq6-hha1tnSD4oUTIO5d_etBGxcRbLQyy8rC9I9xBrXxZELKp-e5NAIT7VvbwDXUQ3veWnOI8K14BY_7XfQs6HOQ6x_FDAWb7vWGlPjvkNLEGdwInYw2AuC5Puo/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}}4. Simpan template.
Demikian cara Memasang Tombol Share di Blog, semoga bermanfaat.
