Tombol share Blogger
Mengkustom tampilan tombol share dihalaman postingan.
Part ini akan menjelaskan cara kustom tombol share agar langsung menampilkan ikon medianya.
Menampilkan ikon media tombol berbagi
Ikuti langkah demi langkah yang dijelaskan dibawah ini untuk memulai.
Aktifkan pencarian template :
Pada halaman edit HTML, klik didalam template dimana saja lalu tekan ctrl + F.
Copy paste teks hijau ini dikolom search HTML: 'share-buttons hidden' dengan tanda kutipnya lalu tekan enter
Jika sudah ditemukan, hapus nama class='share-buttons hidden' dan menjadi class='shareButtons'.
Ulangi cara yang sama sekali lagi, karena terdapat 2 tombol yang sama didalam template.
Setelah diganti, kodenya akan tampak seperti ini:
<div class='share-buttons-container'>
<ul aria-hidden='true' class='shareButtons' ... >Jika sudah, tekan untuk menyimpan. Tampilan share button akan menjadi seperti dibawah ini :
Menyejajarkan tombol ikon berbagi.
Untuk mengatur tampilan agar tampil sejajar adalah mengkustom CSSnya. Lakukan pencarian seperti sebelumnya. Copy paste teks hijau ini di kolom search HTML :
.byline.post-share-buttons .sharing lalu tekan enter.
Jika sudah, hapus property CSS : float:$(endSide), ganti dengan display: flex;
| Kode awal | Menjadi |
|---|---|
| .byline.post-share-buttons .sharing{
float:$(endSide) } | .byline.post-share-buttons .sharing{
display: flex; } |
Selanjutnya, lakukan pencarian lagi seperti sebelumnya dengan copy-paste teks hijau ini di kolom pencarian HTML: .share-buttons{ ,keseluruhan kode tersebut tampak seperti ini:
.share-buttons{
background-color:$(sharing.background.color);
border-radius:2px;
box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
color:$(sharing.text.color);
list-style:none;
margin:0;
padding:8px 0;
position:absolute;
top:-11px;
min-width:200px;
z-index:101
}Hapus semua kode tersebut lalu ganti dengan kode dibawah ini :
.platform-sharing-text{ display:none;}
.shareButtons{
display: flex;
justify-content: end;
background-color:$(sharing.background.color);
border-radius:2px;
color:$(sharing.text.color);
list-style:none;
margin:0 0 0 20px;
padding:8px 0;
min-width:200px;
z-index:101
}Hasilnya :
Untuk tampilan sudah selesai, sekarang untuk fungsi tombol masih belum berfungsi.
Kustom fungsi tombol berbagi
Agar tombol dapat berfungsi untuk membagikan postingan, langkah terakhir sekali lagi lakukan pencarian dalam template seperti sebelumnya. Copy-paste teks hijau ini di kolom pencarian template : 'sharingButton'
Jika ditemukan kodenya, tepat dibawahnya terdapat kode yang tampak mirip dengan kode dibawah ini,
Klik 3x pada kode tersebut lalu hapus dengan kode dibawah ini :
<a expr:aria-label='data:platform.shareMessage' expr:class='"sharing-platform-button sharing-element-" + data:platform.key' expr:data-url='data:originalUrl' expr:href='data:shareUrl + "&target=" + data:platform.target' expr:title='data:platform.shareMessage' onclick='window.open(this.href, 'windowName', 'width=550, height=650, left=24, top=24, scrollbars, resizable'); return false;' role='menuitem' tabindex=''>Simpan dan klik ikon pada tombol berbagi unutk melihat efeknya.
Catatan:
Khusus untuk fungsi copy url tidak berfungsi.
Copy-paste CSS ini untuk menghilangkan ikon Copy URL :
.sharing-element-link{display: none;}