Dalam kesempatan kali ini saya ingin berbagi cara membuat tombol berbagi yang sangat enteng karena tidak melibatkan Javascript dan link Awesome dan tentu saja dapat diterapkan dengan mudah ke dalam template bawaan blogger terbaru maupun template template blogger yang lebih lama. Perlu di ingat pembuatan Tombol berbagi atau share button biasanya melibatkan:
- CSS untuk mengatur tampilan dan warna latar (background) dan kadang warna ikonnya
- HTML untuk menampilkan wujud daripada tombol tersebut
- Link Awesome
- Javascript
Nah point ke 3 dan ke 4 biasanya sangat merugikan kecepatan loading blog salah satunya bisa mengurangi kecepatan loading hingga 20%. Bayangkan hanya karena menginginkan suatu tombol berbagi harus membayar begitu mahal.
Ada juga tombol berbagi dari pihak ketiga seperti AddThis, AddtoAny, ShareThis dll. Namun lagi lagi merugikan kecepatan kita di haruskan menanamkan kode link menuju ke situs mereka dan di dalam HTML kita mengkondisikannya sebagai Javascript. Atribut atribut yang mereka miliki sangat lengkap dan tampilannya indah dan dapat di kustomisasi. Tetapi sekali lagi harganya ya itu tadi: Mengorbankan kecepatan loading halaman blog secara signifikan.
Ada juga tombol berbagi berbayar, tapi itu tadi ya sudah bayar memperlambat loading halaman blog kita pula.
Sedangkan kecepatan adalah inti daripada SEO, dan demi kecepatan Google bela belain membuat halaman AMP (Accelaration Mobile Page). Loading halaman blog yang lambat akan membuat pengunjung terpental alias tidak jadi dan membatalkan kunjungan mereka ke suatu halaman website atau blog.
Jika sudah demikian alih alih meningkatkan trafik, halaman blog tersebut akan menjadi buruk, pengunjung satu satu menghilang. Mereka kapok mendengar nama halaman atau blog kita.
Akan tetapi tombol berbagi itu juga penting bagi SEO jika tepat sasaran dan penggunaannya akan membantu menaikan trafik blog.
Saya telah memodifikasi beberapa jenis tombol berbagi gratis yang saya temukan di Internet dan hasilnya seperti yang saya terapkan pada halaman blog ini.
Rencananya Tombol berbagi ini akan saya kembangkan dengan menambahkan lebih banyak media sosial seperti Pinterest, Tumblir, Linkiden dll. dan menambahkan tombol reponsif untuk membatasi tampilan dengan hanya beberapa tampilan media sosial.
Jadi kesimoulannya sekarang kita akan membuat tombol berbagi cantik.
- Tanpa javascript
- Tanpa link font awesome atau link pemanggil ikon lainnya. Namun tetap menampilkan ikon ikon media sosial (menggunakan ikon svg yang tidak mempengaruhi kecepatan)
Begini cara memasangnya dan sederhana saja:
A. UNTUK JENIS TEMPLATE BLOGGER TERBARU: CONTEMPO, EMPORIO, SOHO DAN NOTABLE
1. CSS
Masuk ke edit HMTL (halaman editorial HTML blogger) dan temukan kode </head> lalu masukan kode CSS berikut tepat di atasnya:
<style>#share-button {margin:0 0 8px;padding:0;overflow:hidden}2. HTML
#share-button p {float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px 8px!important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff;font-weight: 700;}
#share-button a {position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:30px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}
#share-button a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#222;margin:0 auto;padding:5px 3px;background:</style>
Masih di halaman editorial HTML blogger cari kode <data:post.body/> jika terdapat lebih satu silahkan pilih kode yang kedua atau yang ketiga dan letakan kdoe berikut tepat di bawahnya:
<div id='share-button' style='margin-top:8px;'>
<p>SHARE YA:</p>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'> <svg style='width:27px;height:27px' viewBox='0 0 24 20'>
<path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='currentColor'/>
</svg></a><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'><svg style='width:27px;height:27px' viewBox='0 0 24 20'>
<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' fill='currentColor'/>
</svg></a>
<a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url' style='background:#43d854'><i aria-hidden='true' class='fa fa-whatsapp'/> <svg style='width:27px;height:27px' viewBox='0 0 24 20'>
<path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z' fill='currentColor'/>
</svg>
</a>
</div>
Save template.
B. UNTUK TEMPLATE BLOGGER LAMA SEPERTI: SEDERHANA, JENDELA, PT.KEREN SEKALI DLL.
1. Menambahkan kode HTML:
Masuk ke pengaturan blogspot/blogger, pilih TEMA lalu klik "editHTML" cari salah satu kode di bawah ini:
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
Atau kalau tidak ketemu cari kode dibawah ini, kita dapat menerapkan ini dengan mudah pada template jenis sederhana, awsome dst:
<div class='post-share-buttons goog-inline-block'><b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>
Atau......
Perhatikan gambar baik-baik: Gunakan saja ctrl+F untuk mempercepat pencarian, dan kalau sudah ketemu hapus saja. Kode yang kita sebutkan diatas terlihat dalam HTML blogspot sebagai berikut:
Dan perhatikan setelah di hapus akan tertinggal sub-title kode : <!--share buttons--> di atasnya:
Sekarang kalian telah mengerti lalu gantikan kode yang telah di hapus tadi dengan kode berikut:
<div id='share-button' style='margin-top:8px;'>
<p>SHARE YA:</p>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'> <svg style='width:27px;height:27px' viewBox='0 0 24 20'>
<path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='currentColor'/>
</svg></a><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'><svg style='width:27px;height:27px' viewBox='0 0 24 20'>
<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' fill='currentColor'/>
</svg></a>
<a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url' style='background:#43d854'><i aria-hidden='true' class='fa fa-whatsapp'/> <svg style='width:27px;height:27px' viewBox='0 0 24 20'>
<path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z' fill='currentColor'/>
</svg>
</a>
</div>
2. Tambahka CSS berikut dan letakan di atas kode </head>
<style>#share-button {margin:0 0 8px;padding:0;overflow:hidden}
#share-button p {float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px 8px!important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff;font-weight: 700;}
hare-button a {position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:30px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}
#share-button a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#222;margin:0 auto;padding:5px 3px;background: </style>
Save template.
Tentu saja tombol berbagi ini juga dapat di terapkan ke halaman blogger AMP dengan cara yang hampir sama.
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!