Tutorial cara membuat Widget Custom Sosial Pengikut (Follow) ketik Angka Secara Manual ala Ngerapik Blog

Pagi kemarin tepatnya dan banyak hal dalam membuat widget custom sosial pengikut seperti tampak pada gambar dibawah ini teman teman blogger, awalnya saya menginginkan widget ini ditampilkan secara otomatis jumlah pengikut tertera pada kotak sosmed Facebook, X, Blogger, dan Instagramnya dan saya coba konsul tuh ke Mode Pintar Google, Mode Ai, ternyata semua API yang menjadi jembatan pemanggil untuk menembus kode yang menampilkan angka secara otomatis semuanya telah berbayar. Waahh, dulu perasaan tahun 2015an semua Api tersebut masih bisa dan gratis untuk di aplikasikan. Ya udah deh, dari pada gak ada maka terbentuklah kode widget ini.

Untuk platform Blogger mungkin masih bisa kita terapkan, karena ada mode opsi tata letak yang langsung menampilkan widget Pengikut, dan langsung memunculkan jumlah serta icon thum pengikut namun tampilannya terasa jadul, dan saat di mode responsive terasa kurang minimalis untuk di tempatkan di template starter Ngerapik Blog ini dengan itulah saya dan Ai membuat kode ini.

Bagi teman teman blogger yang mau juga menerapkannya silahkan saja salin kode dibawah ini, pada mode TATA LETAK dashboard blogger sobat semua lalu pilih HTML. Berikut kode yang ditempel dan disalin, cekidot wae..

PENERAPAN KODE HTML

Masuk ke Dasboard lalu pilih mode Tata Letak dan Pilih HTML, bukan dari mode Edit HTML Template ya, berikut kode salinnya saya bagi menjadi dua kotak, cara pengaplikasiannya tempel dulu kode kotak pertama diawal kotak html tata letak, lalu tepat dibawah kode kotak pertama tempelkan kode kotak kedua.

Kode bagian kotak Pertama:

</> Kotak 1

<div class="kustom-social-container">
  <div class="kustom-social-follow">
    <a class="social-btn fb" href="https://www.facebook.com/aulia.tiloeagusta" target="_blank">
      <svg viewbox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></path></svg>
      <div class="txt-inline">
         <span>Facebook</span> 
         <span class="angka-manual">(77)</span> 
       </div>
    </a>
    
    <a class="social-btn x-twitter" href="https://x.com/agustaaulia" target="_blank">
      <svg viewbox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></path></svg>
      <div class="txt-inline">
         <span>X</span> 
         <span class="angka-manual">(2)</span> 
       </div>
    </a>
    
    <a class="social-btn blogger" href="https://www.blogger.com/follow-blog.g?blogID=1612403088898000066" target="_blank">
       <svg viewbox="0 0 24 24"><path d="M16.122 24h-8.244c-4.344 0-7.878-3.534-7.878-7.878v-8.244c0-4.344 3.534-7.878 7.878-7.878h8.244c4.344 0 7.878 3.534 7.878 7.878v8.244c0 4.344-3.534 7.878-7.878 7.878zm-4.14-14.156c.712 0 1.294-.582 1.294-1.294v-1.268c0-.712-.582-1.294-1.294-1.294h-2.122c-.712 0-1.294.582-1.294 1.294v1.268c0 .712.582 1.294 1.294 1.294h2.122zm4.244 5.912c.712 0 1.294-.582 1.294-1.294v-1.268c0-.712-.582-1.294-1.294-1.294h-4.244c-.712 0-1.294.582-1.294 1.294v1.268c0 .712.582 1.294 1.294 1.294h4.244z"/></path></svg>
       <div class="txt-inline">
         <span>Pengikut</span> 
         <span id="angka-blogger-otomatis">...</span>
       </div>
    </a>
    
    <a class="social-btn ig" href="https://instagram.com/auliatiloe" target="_blank">
      <svg viewbox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></path></svg>
      <div class="txt-inline">
         <span>Instagram</span> 
         <span class="angka-manual">(11)</span> 
       </div>
    </a>
  </div>
</div>

/* Grid responsif: otomatis 2 kolom, mengecil di layar super kecil */
.kustom-social-follow { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 12px; 
  padding: 8px; 
  width: 100%;
  box-sizing: border-box;
}

/* Mengatur basis style tombol */
.social-btn { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  padding: 14px 10px; 
  border-radius: 12px; 
  color: #ffffff !important; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600; 
  font-size: 14px; 
  text-decoration: none !important; 
  transition: transform 0.2s, opacity 0.2s; 
  text-align: center; 
  min-height: 85px; 
  box-sizing: border-box; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.social-btn:hover { opacity: 0.95; transform: translateY(-2px); }
.social-btn:active { transform: translateY(0); }

/* SVG Icon pembungkusan */
.social-btn svg { width: 24px; height: 24px; fill: #ffffff; display: block; margin: 0 auto; }

/* Varian warna latar */
.fb { background: #3b5998; }
.x-twitter { background: #111111; }
.blogger { background: #ff5722; }
.ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

/* Penyelarasan letak teks tulisan dan angka berdampingan */
.txt-inline { display: flex; gap: 4px; align-items: center; justify-content: center; width: 100%; flex-wrap: wrap; }
.txt-label { width: 100%; }

/* Responsivitas Layar Handphone (Lebar di bawah 360px) */
@media (max-width: 360px) {
  .kustom-social-follow { gap: 8px; padding: 4px; }
  .social-btn { min-height: 75px; font-size: 12px; padding: 10px 6px; border-radius: 8px; }
  .social-btn svg { width: 20px; height: 20px; }
}
</style>

Kode bagian kotak Kedua:

</> Kotak 2

document.addEventListener("DOMContentLoaded", ambilPengikutBlogger);
</script>

PERUBAHAN KODE HTML

Silahkan ganti dan rubah kode yang saya beri warna merah sesuai keinginan teman teman blogger semuanya:

Ganti dan rubah kode:

<a class="social-btn //baik FB, X, Blooger, Instagram sesuai url link sosmed sobat blogger semua.

Ganti dan rubah kode:

<span class="angka-manual">(2)</span> // ganti angka merah pada setiap social button sesuai yang sobat blogger inginkan, sebaiknya rela saja angkanya sesuai junlah pengikut sosmed kita.

Ganti dan rubah kode:

https://www.blogger.com/follow-blog.g?blogID=1612403088898000066 //Khusus untuk bloger ganti sesuai dengan id blog teman teman semua.

SIMPAN Edit HTML

Mudah bukan cara penerapan dan pengaplikasian artikel tentang "Tutorial cara membuat Widget Custom Sosial Pengikut (Follow) ketik Angka Secara Manual ala Ngerapik Blog" semoga dapat bermanfaat untuk kita semua. Apabila teman teman semua ada kode yang lebih modern dan otomatis angkanya dan ada yang ingin dipertanyaan silahkan berdiskusi di Komunitas Ngerapik Blog (KNB) di URL ini atau pada komentar dibawah ini. Akhir kata saya ucapkan, Salam Ngerapik Blog!

Tutorial cara membuat Widget Custom Sosial Pengikut (Follow) ketik Angka Secara Manual ala Ngerapik Blog

Posting Komentar

Formulir Kontak