.png)
Pernah merasa tombol share di blog kamu cuma ada tombol Facebook, tapi nggak ada Twitter atau WhatsApp? Itu seperti punya remote TV yang cuma ada tombol volume tapi nggak ada tombol channel, dipastikan terasa kurang lengkap, kan?
Jangan khawatir, kali ini kita bakal bahas gimana caranya mengubah tombol share bawaan di template Blogger supaya bisa lebih sesuai dengan platform sosial favoritmu atau karakter blog kamu. Biar blog kamu nggak cuma dibagikan lewat Facebook doang, tapi juga bisa langsung di-share ke Twitter dan WhatsApp. Jadi, siap-siap aja lihat artikel kamu menyebar lebih luas, kayak meme lucu yang viral!
Supaya kamu bisa lebih mengenal template blog, yuk kita pergunakan cara yang nggak instan, yaitu dengan cara ngoprek beberapa bagian tag pada kode HTML blog kamu!
Nah, karena kali ini kita hanya mengubah tombol share yang sudah ada, artinya kita hanya mengubah beberapa tag saja pada kode HTML, CSS, dan Javascript di template blog.
Pertama, pada Dashboard Blogger, masuk ke menu 'Tema', kemudian pilih 'Edit HTML'. Atau lihat pada peraga di bawah:
Kemudian, cari tag Javascript seperti contoh di bawah ini:
<p> <b:if cond='data:blog.pageType != "static_page"'> <div class='post-share'> <a class='social_share facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook-square'/>Facebook</a> <a class='social_share twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a> <a class='social_share whatsapp' expr:href='"https://wa.me/?text="+ data:post.url.canonical' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/>WhatsApp</a> <a class='social_share pinterest' expr:href='"http://pinterest.com/pin/create/button?url=" + data:post.url + "&media="+ data:post.firstImageUrl' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a> </div> </b:if> </p>
Pada setiap jenis template mungkin akan memiliki struktur kode yang berbeda, namun pada intinya sama. Silakan ganti atau sesuaikan tag yang berwarna merah dengan keperluanmu, bisa juga sesuaikan ukuran seperti nilai pada tag width, height, left, dan top.
Selanjutnya, kita sesuaikan kode CSS-nya. Berikut contoh kode CSS:
<p> /* POST SHARE
/* __________________ */
.post-share {
display: table;
margin: 2.5rem auto 1rem;
}
.post-share a {
background: #6d737a;
border-radius: 30px;
color: #eee;
display: inline-block;
font-size: 13px;
font-weight: normal;
line-height: 1;
margin-right: 15px;
margin-bottom: 15px;
padding: 10px 14px;
}
.post-share a .fa {
color: #eee;
font-size: 14px;
margin-right: 7px;
}
a.social_share.facebook {
background: #3b5998;
}
a.social_share.twitter {
background: #000000;
}
a.social_share.whatsapp {
background: #25D366;
}
a.social_share.pinterest {
background: #c8232c;
} </p>
Silakan ganti/sesuaikan juga tag yang perlu disesuaikan dengan kebutuhanmu. Setelah selesai menyesuaikan kode Javascript dan CSS-nya, pratinjau terlebih dahulu, lalu SAVE!
Nah, sekarang kamu udah siap untuk upgrade tombol share di blog kamu, kan? Dengan langkah-langkah yang udah dijelasin sebelumnya, kamu bisa bikin blog kamu lebih sosial dan kekinian, kayak influencer di Instagram.
Ingat, tombol share itu bukan cuma aksesori, tapi juga sebagai jembatan menuju pembaca baru yang mungkin belum pernah menemukan blog kamu. Jadi, jangan lupa untuk testing setelah perubahan supaya semua berfungsi dengan baik. Selamat mencoba, dan semoga artikel kamu bisa jadi viral lebih cepat dari trend dance terbaru di TikTok!
Kalau ada yang mau ditanya atau butuh bantuan lebih lanjut, feel free untuk komen di bawah. Happy blogging dan semoga sukses dengan semua share-nya!
