Cara Membuat Widget Tombol ShareThis Dengan Icon LOVE dan Icon Komen Otomatis untuk Blogspot

Selamat pagi teman teman karena artikel ini saya buat tepat pukul 03.53 tanggal 26 Juli 2026, kode widget ini terinspirasi dari blognya mba Igniel dengan pola Hijau yang elegan. Melihat itu, saya tertarik juga mengaplikasikannya di Blog Ngerapik ini. Alhasil dengan bantuan Mode Ai super pintar yang lagi gak eror dengan sedikit modifikasi akhirnya saya bisa memberikan tutorial cara menerapkannya. 

Khusus di Blog Ngerapik ini saya menggunakan Template Blogspot Starter ya teman teman, jadi kode penempatan di Edit HTML disesuikan saja dengan posisi tata letak dari keinginan sobat blogger semua. Kalau saya penempatannya tepat diatas judul artikel blog dan di bawah artikel blog. Langsung saja penerapan kode "Widget Tombol ShareThis Dengan Icon LOVE dan Icon Komen Otomatis untuk Blogspot" ini, kode ini telah responsive untuk mode handphone juga teman teman blogger untuk tampilan hasilnya silahkan lihat gambar dibawah ini, cekidot wae!

mode saat tampil di laptop, desktop komputer dan tablet

 

mode saat tampil di smartphone / handphone

PENERAPAN KODE HTML

Posisi TATA LETAK Tepat diatas Judul Artikel Blog

Masuk ke Mode EDIT HTML Template blog sobat blogger semua dengan menekan CNTR F cari kode <b:section class='main' id='main' maxwidgets='1' name='Main Posts' showaddelement='yes'>  (maka kode ditempatkan tepat diatasnya) atau <b:class cond='data:view.isMultipleItems' name='flex-col'/> (maka kode ditempatkan tepat dibawahnya).  

Perhatian@ (ini diterapkan pada posisi letak dari templete starter ngerapik blog, dan untuk teman teman blogger semua cari saja tempat yang mirip mirip atau posisi yang sesuai penempatannya di bagian artikel template sobat semua) 

Posisi TATA LETAK Tepat dibawah akhir Artikel Blog

Masih di dalam Mode EDIT HTML Template  blog sobat blogger semua dengan menekan CNTR F cari kode <div class='entry-labels'> (maka kode ditempatkan tepat diatasnya)  atau <b:includable id='postLabels' var='post'>  (maka kode ditempatkan tepat dibawahnya),  

Perhatian@ (ini diterapkan pada posisi letak dari templete starter ngerapik blog, dan untuk teman teman blogger semua cari saja tempat yang mirip mirip atau posisi yang sesuai penempatannya di bagian artikel template sobat semua)  

Lalu salin kode dibawah ini sesuai pilihan tata letak diatas atau dibawah, berikut kode yang telah saya bagi menjadi dua kotak. Cara penempatan tempel dahulu kode kotak pertama dilanjutkan kode kotak kedua tepat dibawah kode kotak pertama.

Kode Kotak Pertama:

</> Kotak 1

<!-- Tombol Interaksi Artikel Dinamis - Auto Center di HP - Ngerapik --> <style> /* Lapisan Utama: Default Satu Baris Sejajar untuk Laptop */ .post-interaction-bar-container { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin: 20px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Gaya dasar tombol kotak (Warna BIRU) */ .interaction-btn-square { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 14px; border: 1.5px solid #0056b3; border-radius: 8px; background-color: #ffffff; color: #0056b3; font-size: 14px; font-weight: 600; cursor: pointer; box-sizing: border-box; transition: all 0.2s ease-in-out; } .interaction-btn-square:hover { background-color: #f0f6ff; } /* Logika Aktif: Berubah menjadi warna PINK saat diklik */ .interaction-btn-square.liked { border-color: #e91e63 !important; background-color: #e91e63 !important; color: #ffffff !important; } /* Pengaturan Ikon Garis */ .interaction-bar-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: fill 0.2s ease; } .interaction-btn-square.liked .interaction-bar-icon { fill: #ffffff; } /* Mengatur wadah pembungkus ShareThis */ .sharethis-inline-container { display: flex; align-items: center; height: 44px; } /* ======================================================= */ /* KODE RESPONSIF KHUSUS TAMPILAN HP (DI BAWAH 600PX) */ /* ======================================================= */ @media screen and (max-width: 600px) { .post-interaction-bar-container { flex-direction: column; /* Mengubah susunan baris menjadi kolom vertikal */ justify-content: center !important; align-items: center !important; text-align: center !important; gap: 14px; /* Jarak atas bawah antara tombol kotak dan ShareThis */ } /* Membuat baris tombol suka komentar menyatu di tengah atas */ .mobile-buttons-group { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; } /* Mengunci widget ShareThis agar posisinya pas di tengah bawah */ .sharethis-inline-container { justify-content: center !important; width: 100% !important; text-align: center !important; } /* Memaksa elemen internal ShareThis agar rata tengah */ .sharethis-inline-container .st-inline-share-buttons { text-align: center !important; } } </style>

Kode Kotak Kedua:

</> Kotak 2

<div class="post-interaction-bar-container"> <!-- Grup Tombol Kotak (Otomatis Menyesuaikan Posisi) --> <div class="mobile-buttons-group"> <!-- 1. Tombol Suka --> <button class="interaction-btn-square" id="btn-like-counter" title="Suka" onclick="handleLikeClick()"> <svg class="interaction-bar-icon" viewBox="0 0 24 24"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> <span id="like-count-value">0</span> </button> <!-- 2. Tombol Komentar --> <button class="interaction-btn-square" title="Komentar" onclick="scrollToComments()"> <svg class="interaction-bar-icon" viewBox="0 0 24 24"> <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path> </svg> <span><data:post.numComments/></span> </button> </div> <!-- 3. Widget ShareThis --> <div class="sharethis-inline-container"> <!-- ShareThis BEGIN --> <div class='sharethis-inline-share-buttons'/> <!-- ShareThis END --> </div> </div> <script> //<![CDATA[ const storageKey = 'liked_post_' + window.location.pathname; let currentLikes = parseInt(localStorage.getItem(storageKey + '_count')) || Math.floor(Math.random() * 20) + 15; let hasLiked = localStorage.getItem(storageKey) === 'true'; function initLikeButton() { const likeBtn = document.getElementById('btn-like-counter'); const likeText = document.getElementById('like-count-value'); likeText.innerText = currentLikes; if (hasLiked) { likeBtn.classList.add('liked'); } else { likeBtn.classList.remove('liked'); } } function handleLikeClick() { const likeBtn = document.getElementById('btn-like-counter'); const likeText = document.getElementById('like-count-value'); if (!hasLiked) { currentLikes++; hasLiked = true; likeBtn.classList.add('liked'); } else { currentLikes--; hasLiked = false; likeBtn.classList.remove('liked'); } likeText.innerText = currentLikes; localStorage.setItem(storageKey, hasLiked); localStorage.setItem(storageKey + '_count', currentLikes); } function scrollToComments() { const commentSection = document.getElementById('comments') || document.getElementById('comment-editor') || document.querySelector('.comments'); if (commentSection) { commentSection.scrollIntoView({behavior: 'smooth'}); } } document.addEventListener('DOMContentLoaded', initLikeButton); //]]> </script>

 

Mudah bukan pengaplikasian dari widget keren ini sobat blogger, semoga teman teman blogger yang telah berkunjung kesini dapat mempercantik dan memperganteng blog nya dengan ulasan artikel saya ini. Akhir kata saya ucapkan terimakasih telah berkunjung apabila ada yang ingin di tanyakan silahkan tulis komentar sobar blogger di kotak komentar dibawah, salam Ngerapik Blog!