Cara Membuat Widget Sederhana Follow Saungjiwa Blog di Blogger

gambar tangkapan layar blog saungjiwa

Tutorial Blog: Cara Membuat Widget Sederhana Follow Saungjiwa Blog di Blogger

Masih tentang widget Twitter di Blog nih sobat. Mumpung waktu luangnya lumayan, saya gunakan untuk buat posting. Kali ini saya akan membahas Cara Membuat Widget Sederhana Follow Saungjiwa Blog di Blogger.
Berbeda dengan Widget Burung Twitter terbang atau 'Share' melayang Shareaholic Sassy Untuk Blogger, Widget Follow ini menampilkan tombol follow, logo icon follower, jumlah follower, dan angka diketikan secara manual.

Untuk lebih jelasnya lihat gambar disamping. Itulah screenshot Widget yang akan kita buat kali ini.  Apakah meurut sobat widget ini menarik? Jika sobat tertarik dengan widget ini, simaklah cara-cara membuatnya:
1. Login pada akun Blogger sobat.
2. Masuk padaa bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut.

<center><a href="https://www.facebook.com/sharer/sharer.php?u=" onclick="this.href += encodeURIComponent(window.location.href);" target="_blank" rel="noopener noreferrer" style="display:inline-block; padding:10px 18px; background:#1877f2; color:#fff; text-decoration:none; border-radius:6px; font-weight:bold;"> Bagikan ke Facebook </a> </center> <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">(328)</span> <!-- Ganti angka di sini --> </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> <!-- Ganti angka di sini --> </div> </a> <a class="social-btn blogger" href="https://www.blogger.com/follow-blog.g?blogID=6786013530695459380" 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> <!-- Ganti angka di sini --> </div> </a> </div> </div> <style> /* Kontainer utama untuk pembatasan layout */ .kustom-social-container { width: 100%; max-width: 500px; margin: 0 auto; box-sizing: border-box; } /* 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> <script> async function ambilPengikutBlogger() { const targetEl = document.getElementById('angka-blogger-otomatis'); const blogId = "6786013530695459380"; try { // Menggunakan proxy AllOrigins dengan sintaks Javascript ES6 Template Literals yang benar const res = await fetch(`https://allorigins.win{encodeURIComponent('https://blogger.com' + blogId)}`); if (!res.ok) throw new Error(); const data = await res.json(); const htmlString = data.contents; // Teknik scraping DOM virtual untuk membaca data teks jumlah pengikut dari server Google const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, 'text/html'); // Mencari elemen teks spesifik yang memuat info pengikut const kriteriaTeks = Array.from(doc.querySelectorAll('span, div, td')).find(el => el.textContent.includes('pengikut') || el.textContent.includes('followers')); if (kriteriaTeks) { // Mengambil angka saja dari susunan string teks profil const angka = kriteriaTeks.textContent.match(/\d+/); if (angka) { targetEl.innerText = `(${angka[0]})`; return; } } targetEl.innerText = "(Aktif)"; } catch (err) { // Jika gagal scraping/down, sistem beralih ke angka statis cadangan Anda agar tombol tidak rusak targetEl.innerText = "(2)"; } } document.addEventListener("DOMContentLoaded", ambilPengikutBlogger); </script>

#Keterangan: Ubahlah kode warna merah dengan ID Sosial Media sobat blogger. Tentukan ukuran dan warna widget pada kode warna Biru.

6. Klik Simpan, dan Selesai

Discl:

Blog ini berisi Artikel yang merupakan artikel dari Tahun 2013 lalu, namun dalam prakteknya masih dapat digunakan ataupun bisa juga tidak dapat digunakan pada era jaman sekarang Setelah di Perbaharui Kembali. Kalau teman teman blogger penasaran trik dan tips jadul ini, silahkan dicoba.  

• Khusus Artikel Game dan Aplikasi, untuk  link unduhan/download akan saya perbaharui sesuai yang disarankan oleh peraturan T.O.S Google tahun ini. Dan juga bisa saya link-kan pada situs lain (bisa situs resmi atau situs yang menyediakan) yang berhubungan dengan artikel tersebut. Terimakasih.

- Gambar diambil dari mana saja saat itu.

Demikianlah artikel saya tentang "Cara Membuat Widget Sederhana Follow Saungjiwa Blog di Blogger" Semoga dapat diambil manfaatnya untuk para pengguna blogger semuanya. Akhir kata saya ucapkan terimakasih telah berkunjung ke Saungjiwa Blog ini, semoga teman teman semua dapat berkreasi dengan tutorial yang saya tampilkan. 🙏 

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...