- Gunakan tombol berbagi custom buatan sendiri atau buatan para senior blogger saja (cari tutorial di google, termasuk tutorial editblogtema, cieelah :D)
- Jangan sertakan lagi tombol Gplus karena itu hanya sia sia, google plus telah lama mati.
- Jangan sertakan tombol Linkedin karena akhir akhir ini linknya sudah tidak bekerja sebagaimana mestinya
- Hindari tombol berbagi yang di 'embed' melalui cara pemasangan link eksternal, misalnya hindari menggunakan tombol berbagi pihak ketiga seperti sharethis, addthis addtoAny dll ke dalam template karena itu sangat merugikan kecepatan halaman blog. (Saya tidak melarang ya, cuma menyarankan kepada Kalian yang mulai perduli terhadap kecepatan loading halaman blog)
- Masuk ke dalam dasbor pengaturan blog
- Pilih tema
- Pilih edit HTML
.Share{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;margin-top:20px}
.Share svg{width:17px;height:17px;vertical-align:-4px}
.Share svg path{fill:#fff}
.Share a{width:100%;padding:7px 0;text-align:center;box-shadow:none}
.Share a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25)}
.Share a.facebook{background-color:#3a579a}
.Share a.twitter{background-color:#00abf0}
.Share a.pinterest{background-color:#cd1c1f}
.Share a.tumblr{background-color:#314358}
.Share a.whatsapp{background-color:#4dc247}
Langkah kedua:
<div class='Share'>
<a class='facebook' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' onclick='window.open(this.href,"sharer"," toolbar=0,status=0,width=626,height=436");return false;' rel='nofollow' title='Share to Facebook'><svg viewBox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg></a>
<a class='whatsapp' expr:href='"whatsapp://send?text=" + data:post.title + " - " + data:post.url' onclick='window.open(encodeURI(this.href)," sharer" ,"toolbar=0,status=0,width=626,height=500"); return false;' rel='nofollow' title='Share to WhatsApp'><svg viewBox='0 0 24 24'><path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/></svg></a>
<a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title + " (by: @sufyan331) "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow' title='Share to Twitter'><svg viewBox='0 0 24 24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg></a>
<a class='pinterest' data-pin-config='beside' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow' title='Share to Pinterest'><svg viewBox='0 0 24 24'><path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/></svg></a>
<a class='tumblr' data-notes='right' expr:href='"https://www.tumblr.com/share/link?url=" + data:post.url' onclick='window.open(this.href," sharer" ,"toolbar=0,status=0,width=626,height=500"); return false;' rel='nofollow' title='Share to Tumblr'><svg viewBox='0 0 24 24'><path d='M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17'/></svg></a>
</div>
- Ringan karena tidak ada kode embed.
- Tidak ada javascript link eksternal, hanya HTML dan pengaturan CSS dan script internal saja.
- Menggunakan ikon SVG alami yang ringan dan kompatibel dengan struktur on page halaman blog.
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:
Nah kebetulan nih agan share, kebetulan saya lagi belajar bikin tombol share, kemarin saya belajar di sekolah w3 atau w3school hihi..
BalasHapusIni fungsinya apa gan onclick='window.open
perhatikan ada 5 tombol yang harus di buka, yakni facebook, whatsapp, twitter, pinterest dan tumblr jadi ada 5 jendela yang harus dei buka dengan onclick='window.open
Hapus