Cara Membuat Tombol Share di Bawah Postingan Blog

Cara Membuat Tombol Share di Bawah Postingan Blog | Pada kesempatan kali ini, Saya akan memberikan tutorial tentang Cara Membuat Tombol Share di Bawah Postingan Blog. Cara membuat tombol share di bawah postingan blog ini sebelumnya Saya mendapatkan tutorialnya dari blognya Arlina Design dan sudah Saya praktekkan di blog Saya sendiri. Cara membuat tombol share di bawah postingan blog kali ini ternyata sangat mudah sekali.

Tombol share ini sangat berguna sekali untuk memberikan kemudahan bagi pengunjung blog kalian yang mau membagikan artikel dari blog kalian yang mereka rasa penting atau bermanfaat untuk mereka bagikan ke sosial media. Tidak hanya berguna bagi pengunjung blog kalian saja, membuat tombol share di bawah postingan blog ini tentunya juga sangat berguna bagi kalian sendiri sebagai pemilik blog. Apabila ada pengunjung yang membagikan artikel kalian ke sosial media melalui tombol share di bawah postingan blog, pasti akan ada orang lain juga dari sosial media yang melihat artikel kalian. Tentunya hal ini dapat meningkatkan pengunjung blog kalian.

Sosial media yang terdapat pada tombol share pada tutorial kali ini meliputi Facebook, Google Plus, Twitter, dan juga Linkedin. Tombol share ini nanti akan tampil pada setiap di bawah postingan blog kalian. Contoh tombol share di bawah postingan blog kali ini seperti pada tombol share di bawah postingan blog Saya sendiri, atau seperti gambar berikut ini.

Sangat keren sekali bukan? Apabila kalian tertarik dan ingin membuat tombol share di bawah postingan blog seperti itu, kalian bisa mempraktekkannya pada tutorial berikut.

1. Masuk ke Blogger > Tema > Edit HTML, lalu tekan "CTRL + F" dan cari kode <data:post.body/>.
2. Lalu copy dan paste kode berikut ini setelah atau di bawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://ift.tt/KvaSOc; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://ift.tt/KvaSOc; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://ift.tt/1lwgqdf; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;http://ift.tt/1lwgqdf; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='&quot;http://ift.tt/1MbvkW5; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='&quot;http://ift.tt/1MbvkW5; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if> 

3. Langkah berikutnya copy dan paste kode berikut ini sebelum atau di atas kode ]]></b:skin>.

/* 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://ift.tt/1Ofmoxj') 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. Kemudian simpan tema dan lihatlah hasilnya.

Demikian tutorial tentang Cara Membuat Tombol Share di Bawah Postingan Blog kali ini. Semoga bermanfaat dan bisa membantu. Apa bila ada langkah yang kurang jelas, kalian bisa bertanya melalui komentar di bawah, dan sampai jumpa di artikel Cara Membuat Tombol Share di Bawah Postingan Blog : http://ift.tt/2toYkpO