Cara Memasang Widget Reaction Tepuk Tangan di Blogger

Posting Komentar
Fernn.id - Pada kesempatan kali ini admin ingin sedikit berbagi kembali seputar blogging yaitu Cara Memasang Widget Reaction Tepuk Tangan di Blogger yang sudah banyak sobat minta dibuatkan tutorialnya, ya meskipun sebenarnya tutorial ini sangat mudah untuk diterapkan.

Dengan memasang widget seperti ini ternyata memiliki keuntungan lho, misalnya untuk memberikan informasi seberapa bagusnya kualitas postingan yang sudah kita publikasikan ke pengunjung ataupun ke pemilik website. Selain itu, informasinya bisa digunakan sebagai patokan pembayaran untuk penulis yang sudah bersedia menulis di blog sobat masing-masing.

Salah satu website yang memasang widget reaction ini adalah Medium, yaitu sebuah platform yang digunakan untuk menyalurkan ide dalam bentuk tulisan. Penulis di platform ini tentunya dibayar sesuai dengan durasi lama membaca, dan jumlah reaction tepuk tangan.

Jika anda sudah penasaran dan ingin membuatnya juga, silahkan ikuti tutorial berikut ini.

Cara Memasang Widget Reaksi Tepuk Tangan

Perlu diingat! sebelum melanjutkan, ada baiknya selalu lakukan backup terlebih dahulu.

1. Silahkan masuk ke dashboard Blogger.com
2. Lalu pilih menu Template > Edit HTML
3. Kemudian salin kode CSS berikut, dan letakkan tepat sebelum kode ]]></b:skin> atau </head>
Untuk mempermudah pencarian kode, silahkan gunakan tombol pintasan CTRL+F pada keyboard.
*/ Applause Button Reaction */
applause-button{position:relative;cursor:pointer}applause-button .style-root{position:absolute;top:0;left:0;right:0;bottom:0}applause-button .style-root:after{position:absolute;top:0;left:0;right:0;bottom:0;content:" ";display:block;border-radius:50%;border:1px solid}applause-button .style-root:hover:after:not(.clap-limit-exceeded){border-color:inherit}applause-button.loading{opacity:0.5}applause-button .shockwave{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%}applause-button svg{position:absolute;width:60%;height:60%;margin-left:20%;margin-top:20%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.8;stroke:none;overflow:visible !important}applause-button svg g.flat{visibility:hidden}applause-button svg g.outline{visibility:visible}applause-button.clapped svg g.flat{visibility:visible}applause-button.clapped svg g.outline{visibility:hidden}applause-button .count-container{position:absolute;top:-40%;width:100%;color:gray;user-select:none}applause-button .count-container .count{text-align:center}applause-button g.sparkle circle{opacity:0;stroke-width:0}applause-button g.sparkle g:nth-child(1){transform:rotate(0deg) translateX(10px)}applause-button g.sparkle g:nth-child(2){transform:rotate(72deg) translateX(10px)}applause-button g.sparkle g:nth-child(3){transform:rotate(144deg) translateX(10px)}applause-button g.sparkle g:nth-child(4){transform:rotate(216deg) translateX(10px)}applause-button g.sparkle g:nth-child(5){transform:rotate(288deg) translateX(10px)}applause-button:hover:not(.clapped) .shockwave{animation-name:shockwave;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-in}applause-button.clap{animation-name:pulse;animation-duration:0.5s;animation-iteration-count:1}applause-button.clap .sparkle circle{animation-name:explode;animation-duration:0.5s;animation-iteration-count:1}applause-button.clap .count{animation-name:hideThenShow;animation-duration:0.5s;animation-iteration-count:1}@keyframes explode{0%{transform:translateX(10px);opacity:0}20%{opacity:1}50%{opacity:1}100%{opacity:0;transform:translateX(25px)}}@keyframes shockwave{0%{transform:scale(1);box-shadow:0 0 2px;opacity:1}100%{transform:scale(1);opacity:0;box-shadow:0 0 50px, inset 0 0 10px}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes hideThenShow{0%{opacity:1;transform:translateY(0)}20%{opacity:0;transform:translateY(-10px)}50%{transform:translateY(10px)}80%{transform:translateY(10px);opacity:0}100%{opacity:1;transform:translateY(0)}}
4. Salin juga kode JS berikut ini, dan letakkan tepat sebelum kode </body>
<script src='https://cdn.statically.io/gh/shofisetiawan/bangopit-applause-button/8ce883e7/bangopit-applause-button.js'></script>
5. Terakhir, letakkan kode HTML berikut sesuai dengan keinginan kalian masing-masing.
<applause-button style='width:58px;height:58px;'/>
Keterangan:
Jika ingin menampilkan dibawah postingan, maka tempelkan kode diatas pada class post body.
6. Save Template.
Live Preview

Penutup

Jika sobat belum paham dengan apa yang sudah admin sampaikan, silahkan bertanya melalui kolom komentar yang tersedia dibawah artikel ini. Pastikan sesuai topik agar pertanyaan sobat bisa kami tanggapi secepatnya.

Mungkin sekian dulu artikel dari Cara Membuat Widget Reaction Tepuk Tangan di Blogger, semoga bermanfaat.
Terimakasih
Fernand
Fernand
Hanya seorang blogger yang hobinya coding

Related Posts

Posting Komentar

Dapatkan artikel terbaru!