Halo Semuanya, Kali ini saya akan memberikan Cara Membuat Tombol Tepuk Tangan Pada Postingan Blogger. Tombol ini digunakan untuk memberi tanda Suka untuk Postingan yang dibuat oleh Kita.
Jika anda ingin memasang Tombol Memberikan Reaksi untuk Postingan, anda dapat Melihat Caranya Di Postingan ini.
Sebelum Memasang Tombol ini pada Postingan Blogger Anda, Anda dapat Melihat Contohnya terlebih dahulu disini.
Lanjut ke Cara Pemasangannya.
Cara Membuat Tombol Tepuk Tangan Pada Postingan Blogger
1. Buka Dashboard Blogger.
2. Pada Dashboard Blogger, Klik Tema.
3. Kemudian Klik Dan Klik Edit HTML.
4. Cari Bagian /*]]>*/</style> atau ]]></b:skin> Dan Tempel Kode CSS Berikut Tepat Diatasnya.
/* Clap button CSS */ @keyframes clap {0% {opacity: 0;transform: scale(0);}60% {opacity: 1;transform: translateY(-100px) scale(1);}80%{transform: translateY(-190px) scale(0.6);}100% {opacity: 0;}}@keyframes pulse {0% {box-shadow: 0 0;}70% {box-shadow: 0 0 5px 10px rgba(255, 255, 255, 0);}100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}}.claps_button {border-radius: 50%;background-color: #fff;border: 1px solid;color: #f4a900;width: 50px;height: 50px;outline: 0;cursor: pointer;filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.05));transform: scale(1);transition: all .1s ease-in;z-index: 1;fill: #f4a900;pointer-events: visible;}.drK .claps_button{background-color: #2d2d30}.claps {border-radius: 50%;background-color: #f4a900; color: #fff;position: absolute;width: 50px;height: 50px;border: none;z-index: 0;}button.is_clicked ~ button.claps {animation: clap 1s ease-in-out forwards;}button.claps_button:hover {border-color: #f4a900;color: #f4a900;fill: #f4a900;animation: pulse 2s infinite;}.clpN{box-shadow: 0 0 25px rgb(0 0 0 / 7%); max-width:200px; padding:15px 15px; border-radius:10px}/* Clap neumo */ .clpN{box-shadow: 0 0 25px rgb(0 0 0 / 7%); max-width:200px; padding:15px 15px; border-radius:10px}.drK .clpN{background:#2d2d30;box-shadow:none}Lalu Tempel Kode ini pada bagian Bawah Tag </body>.
<b:if cond='data:view.isPost'><script>/*<![CDATA[*//* Clap button JS */ var claps_button=document.querySelector(".claps_button"),claps=document.querySelector(".claps");claps_button.addEventListener("click",clap),claps.innerText="+"+(localStorage.getItem("claps")?localStorage.getItem("claps"):0);let count1=Number(localStorage.getItem("claps"))?Number(localStorage.getItem("claps")):0;function clap(t){count1+=1,localStorage.setItem("claps",count1),claps.innerText="+"+count1,claps_button.classList.toggle("is_clicked"),setTimeout((()=>claps_button.classList.remove("is_clicked")),1e3)} /*]]>*/</script></b:if>Postingan Terkait
Kemudian Tempelkan Kode berikut Dibawah Tag <data:post.body/>.
<b:if cond='data:view.isPost'> <!--[ Clap button ]--> <div class='clpN'><span class='clap'><button class='claps_button'> <!--[ Clap SVG Icon ]--> <svg class='svgIcon-use' height='33' viewBox='0 0 33 33' width='33'><path d='M28.86 17.342l-3.64-6.402c-.292-.433-.712-.729-1.163-.8a1.124 1.124 0 0 0-.889.213c-.63.488-.742 1.181-.33 2.061l1.222 2.587 1.4 2.46c2.234 4.085 1.511 8.007-2.145 11.663-.26.26-.526.49-.797.707 1.42-.084 2.881-.683 4.292-2.094 3.822-3.823 3.565-7.876 2.05-10.395zm-6.252 11.075c3.352-3.35 3.998-6.775 1.978-10.469l-3.378-5.945c-.292-.432-.712-.728-1.163-.8a1.122 1.122 0 0 0-.89.213c-.63.49-.742 1.182-.33 2.061l1.72 3.638a.502.502 0 0 1-.806.568l-8.91-8.91a1.335 1.335 0 0 0-1.887 1.886l5.292 5.292a.5.5 0 0 1-.707.707l-5.292-5.292-1.492-1.492c-.503-.503-1.382-.505-1.887 0a1.337 1.337 0 0 0 0 1.886l1.493 1.492 5.292 5.292a.499.499 0 0 1-.353.854.5.5 0 0 1-.354-.147L5.642 13.96a1.338 1.338 0 0 0-1.887 0 1.338 1.338 0 0 0 0 1.887l2.23 2.228 3.322 3.324a.499.499 0 0 1-.353.853.502.502 0 0 1-.354-.146l-3.323-3.324a1.333 1.333 0 0 0-1.886 0 1.325 1.325 0 0 0-.39.943c0 .356.138.691.39.943l6.396 6.397c3.528 3.53 8.86 5.313 12.821 1.353zM12.73 9.26l5.68 5.68-.49-1.037c-.518-1.107-.426-2.13.224-2.89l-3.303-3.304a1.337 1.337 0 0 0-1.886 0 1.326 1.326 0 0 0-.39.944c0 .217.067.42.165.607zm14.787 19.184c-1.599 1.6-3.417 2.392-5.353 2.392-.349 0-.7-.03-1.058-.082a7.922 7.922 0 0 1-3.667.887c-3.049 0-6.115-1.626-8.359-3.87l-6.396-6.397A2.315 2.315 0 0 1 2 19.724a2.327 2.327 0 0 1 1.923-2.296l-.875-.875a2.339 2.339 0 0 1 0-3.3 2.33 2.33 0 0 1 1.24-.647l-.139-.139c-.91-.91-.91-2.39 0-3.3.884-.884 2.421-.882 3.301 0l.138.14a2.335 2.335 0 0 1 3.948-1.24l.093.092c.091-.423.291-.828.62-1.157a2.336 2.336 0 0 1 3.3 0l3.384 3.386a2.167 2.167 0 0 1 1.271-.173c.534.086 1.03.354 1.441.765.11-.549.415-1.034.911-1.418a2.12 2.12 0 0 1 1.661-.41c.727.117 1.385.565 1.853 1.262l3.652 6.423c1.704 2.832 2.025 7.377-2.205 11.607zM13.217.484l-1.917.882 2.37 2.837-.454-3.719zm8.487.877l-1.928-.86-.44 3.697 2.368-2.837zM16.5 3.293L15.478-.005h2.044L16.5 3.293z' fill-rule='evenodd'/></svg> <button class='claps'/></button></span></div> </b:if>
5. Lalu Klik Simpan, Selesai.
Catatan
Hasil dari Tombol tepuk tangan ini tidak dapat dilihat Orang lain Karena Tombol ini Menggunakan localStorage sehingga Hasilnya hanya akan tersimpan Di Browser Pengguna dan jika Pengguna menghapus Cookie pada Situs anda. Hasil dari Tombol Tepuk Tangannya akan Hilang.
Kesimpulan
Jadi Ini Adalah Cara Membuat Tombol Tepuk Tangan Pada Postingan Blogger. Saya harap Artikel ini dapat membantu anda, Jika ada yang ingin ditanyakan maka tanyakan Di Kolom Komentar.