Cara Mudah Membuat tombol 'Share' melayang Shareaholic Sassy Untuk Blogger

Tutorial Blog: Cara Mudah Membuat tombol 'Share' melayang Shareaholic Sassy Untuk Blogger

Salam saungjiwa blog, kali ini saya mencoba mengulas widget tombol 'Share' melayang Shareaholic Sassy Untuk Blogger, apakah widget masih relate dengan dan era tahun 2026 sekarang? kasih pendapat teman teman blogger ya di komen.

  

Mungkin sobat blogger banyak menemukan widget sahreholic sassy ini, namun yang saya akan terapkan ini tidak melalui edit tamplate HTML, namun cukup memasukan kode HTML ke Tab HTML/JavaScript, jadi tanpa harus mengedit isi tamplate blog kita.

Langsung saja cara pengaplikasiannya :

1. Log-in akun blogger

2. Masuk tab 'Tata Letak', dan klik link 'Tambahkan Gadget'.

3. Lalu pilih HTML/JavaScript

4. Lalu, masukkan kode CSS berikut:

KODE INI GAK WORK LAGI SILAHKAN GANTI PAKE KODE DIBAWAH YA..

<!-- GAYA TAMPILAN (CSS) -->
<style>
/* Kontainer Utama di Sisi Kiri Layar */
#sticky-share-container {
  position: fixed;
  top: 30%;
  left: 0;
  z-index: 9999;
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-start;
}
/* Kotak Tombol Sosmed */
.sticky-share-box {
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: all 0.3s ease;
}
/* Gaya Tombol Individual (Melengkung di Ujung Kanan) */
.sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 40px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 18px;
  font-family: sans-serif;
  margin-bottom: 2px;
  border-top-right-radius: 8px; /* Membuat sudut kanan atas melengkung */
  border-bottom-right-radius: 8px; /* Membuat sudut kanan bawah melengkung */
  transition: width 0.2s ease, padding-left 0.2s ease;
}
.sticky-btn:hover {
  width: 55px; /* Efek memanjang sedikit saat disentuh kursor */
}
.st-wa { background-color: #25D366; }
.st-fb { background-color: #1877F2; }
.st-tw { background-color: #000000; }
/* Tombol Minimize (Buka/Tutup) */
.toggle-share-btn {
  background: #333;
  color: #fff;
  border: none;
  width: 20px;
  height: 30px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}
/* Efek saat widget di-MINIMIZE (Tersembunyi ke kiri) */
#sticky-share-container.minimized .sticky-share-box {
  transform: translateX(-50px);
  width: 0;
  overflow: hidden;
}
</style>
<!-- STRUKTUR TOMBOL (HTML) -->
<div id="sticky-share-container">
  <!-- Daftar Tombol Media Sosial -->
  <div class="sticky-share-box">
    <a id="st-wa" class="sticky-btn st-wa" target="_blank" title="Share to WhatsApp">💬</a>
    <a id="st-fb" class="sticky-btn st-fb" target="_blank" title="Share to Facebook">f</a>
    <a id="st-tw" class="sticky-btn st-tw" target="_blank" title="Share to X">𝕏</a>
  </div>
  <!-- Tombol Toggle Minimize menggunakan entitas HTML standar -->
  <button class="toggle-share-btn" onclick="toggleShareWidget()" id="sh-toggle">&lt;</button>
</div>
<!-- OTOMATISASI LINK & FUNGSI MINIMIZE (JAVASCRIPT) -->
<script type="text/javascript">
  (function() {
    // 1. Mengisi URL otomatis tanpa ribet
    var cUrl = encodeURIComponent(window.location.href);
    var cTitle = encodeURIComponent(document.title);
    
    document.getElementById('st-wa').href = "https://whatsapp.com" + cTitle + "%20" + cUrl;
    document.getElementById('st-fb').href = "https://facebook.com" + cUrl;
    document.getElementById('st-tw').href = "https://x.com" + cUrl + "&text=" + cTitle;
  })();
  // 2. Fungsi Buka-Tutup (Minimize) menggunakan kode HTML aman
  function toggleShareWidget() {
    var container = document.getElementById('sticky-share-container');
    var toggleBtn = document.getElementById('sh-toggle');
    
    if (container.classList.contains('minimized')) {
      container.classList.remove('minimized');
      toggleBtn.innerHTML = "&lt;"; // Mengembalikan tanda < saat terbuka
    } else {
      container.classList.add('minimized');
      toggleBtn.innerHTML = "&gt;"; // Mengubah tanda menjadi > saat tersembunyi
    }
  }
</script> 

5. Lalu klik Simpan atau Save. 

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 Mudah Membuat tombol 'Share' melayang Shareaholic Sassy Untuk 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...