Begini Membuat Fitur Tombol Share di Blog Tanpa Plugin, Work

Tombol Share atau fitur Bagikan adalah salah satu fitur terpenting yag harus ada dalam sebuah blog/website. Fitur tersebut berfungsi untuk membagikan artikel yang kita tulis sehingga kemungkinan pembaca dan pengunjung semakin banyak.

Tombol share yang akan kita bahas ini bisa digunakan untuk blog ber Platform Blogger dan Wordpress dan kemungkinan platform yang lain tapi belum saya coba. Kemudian kode ini saya buat manual tanpa plugin, sehingga kamu harus berhati hati dalam mengedit nya. Kenapa saya buat tanpa plugin, karena tombol share pada blog adalah fitur simpel yang masih bisa dihendel tanpa membuat kode yang kompleks seperti plugin pada umumnya.

Fitur ini juga dibuat jika kamu tidak menemukan fitur default tombol share pada bawaan template dan juga jika kamu ingin mengganti dengan tampilan yang baru.

Cara Membuat Fitur Tombol Share di Blog Tanpa Plugin di Wordpress

Langkah-langkah yang harus kamu lakukan untuk membuat fitur Bagikan pada blog Wordpress adalah:

the_content();

4. Masukkan kode berikut ini, diatas kode poin no (3) jika ingin tombol share tampil diatas content, masukkan kode dibawah poin no (3) jika ingin fitur bagikan tampil dibawah content/ akhir artikel :

<!-- Tombol Share -->
<div class="social">
<a class="facebook" href="http://www.facebook.com/sharer.php?u=<?php the_permalink()?>&t=<?php the_title()?>" title="Share this post on Facebook" onclick="window.open(this.href); return false;">Share ke Facebook</a>
<a class="twitter" href="https://twitter.com/share?text=<?php the_title()?>&url=<?php the_permalink()?>" title="Share this post on Twitter" target="_blank">Share ke Twitter</a>
<a class="whatsapp" href="whatsapp://send?text=<?php the_permalink()?>" title="Share this post on Whatsapp">Share ke WhatsApp</a>
</div>

5. Save / perbaharui berkas.
6. Percantik tampilan dengan memberikan kode CSS. Pergi ke file style.css dan masukkan kode berikut ini:

/*social sharing buttons*/
.social a{
display:block;
margin:2px 0 0 0;
 padding:10px 15px;
color:#fff;
font-size:15px;
font-weight:bold;
text-align:center;
text-decoration:none;
width: auto;
}
/*Twitter*/
.twitter{
background:#1b8be0;
}
/*Facebook*/
.facebook{
background:#3B5998;
}
/*WhatsApp*/
.whatsapp{
background:#25d366;
}
/*end social sharing buttons*/