Cara Membuat Tombol Share Melayang (Sticky) di Template Viomagz

www.azid45.web.id - Cara Membuat Tombol Share Melayang (Sticky) di Template Viomagz. Pada kesempatan kali ini saya akan share cara mengubah share button menjadi melayang pada template Viomagz Versi 3.3.

Mungkin ada beberapa tutorial terkait hal ini akan tetapi bisa jadi kode sticky pada CSS tidak berfungsi sehingga meskipun sudah membuat tombol share sesuai dengan tutorial akan tetapi tetap tidak bisa melayang. Hal tersebut dikarenakan pada kode CSS position:sticky tidak boleh ada kode CSS overflow:hidden pada area sticky.

Baca juga: Cara Membuat icon Label Otomatis menggunakan Icon SVG

Agar berjalan dengan baik dengan baik. Kita butuh mengganti overflow:hidden menjadi overflow:unset atau bisa menghapusnya. Namun pada tahap ini kita harus mencari kode CSS tersebut dibungkus oleh selector yang mana? apakah #wrapper #post-wrapper atau yang lainnya.

Dalam kasus ini pada template Viomagz agar kode CSS sticky berjalan dengan baik kita perlu mengganti overflow:hidden menjadi overflow:unset pada selector #wrapper.

Baiklah untuk tutorial lengkapnya Anda bisa simak langkah-langkahnya dibawah ini:

Pertama, login Blogger

Kedua, menuju menu Tema - Edit HTML

Ketiga, cari kode #wrapper jika sudah ketemu ganti overflow:hidden menjadi overflow:unset. Untuk lebih jelasnya bisa lihat kode CSS dibawah ini

#wrapper {
background: #ffffff;
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow: unset;
}

Ketiga, cari kode #share-container maka Anda akan menemukan kode CSS kurang lebih seperti ini

#share-container {
margin: 20px auto 30px;
overflow: hidden;
}

Hapus saja kode CSS tersebut dan ganti dengan kode CSS #share-container dibawah ini

#share-container {
width:100%;
display: inline-block;
flex-wrap: nowrap;
align-items: center;
background-color: #ffffff;
margin-top: 30px;
padding: 10px 0px 0px;
position: sticky;
position: -webkit-sticky;
bottom: 0px;
z-index: 1;
}

Keempat, Save Template

Pada tahap ini secara default Anda sudah bisa menampilkan share button secara melayang. Namun mungkin saja pada jangkaun share buttonnya agak terlalu tinggi. Untuk mengatasi hal tersebut Anda bisa mengubah beberapa kode CSS sebagaimana berikut ini

Pada selector CSS #share-container pada langkah ketiga terdapat display:inline-block. Anda bisa menggantinya dengan kode display:flex dan tambahkan kode display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox;. Kurang lebih kodenya akan menjadi seperti ini

#share-container {
width:100%;
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-wrap: nowrap;
align-items: center;
background-color: #ffffff;
margin-top: 30px;
padding: 10px 0px 0px;
position: sticky;
position: -webkit-sticky;
bottom: 0px;
z-index: 1;
}

Kemudian cari saja kode CSS .label-line-c nanti akan tampil kode seperti dibawah ini

.label-line-c {
text-align: center;
margin-bottom: 20px;
}

Pada kode tersebut Anda bisa menghapus margin-bottom: 20px hingga menjadi seperti dibawah ini

.label-line-c {
text-align: center;
}

Selanjutnya agar tampil lebih responsive kita perlu mengubah tulisan "share this post" dan "Bagikan artikel ini" menjadi "share" saja. Untuk lebih jelasnya tampilannya akan seperti gambar dibawah ini

Bagaimana mudah bukan?. Untuk lihat demonya bisa klik dibawah ini

Demo

Demikianlah tutorial terkait Cara Membuat Tombol Share Melayang (Sticky) di Template Viomagz. Semoga bermanfaat. Amin

UPDATE 28 Maret 2020

Pada tampilan mobile terdapat kendala pada tombol Top yang menghalangi tombol share. Untuk mengatasinya kita harus edit tombol Top agar lebih keatas. Cara untuk mengedit Anda bisa cari kode .back-to-top kemudian ganti bottom:25px menjadi bottom:55px kurang lebih akan menjadi seperti ini

.back-to-top {
position: fixed !important;
position: absolute;
bottom: 55px;
right: 20px;
z-index: 998;
}

Demikian update tutorialnya. Terimakasih banyak untuk kak Putri Safitri atas koreksiannya.

UPDATE 31 Maret 2020

Jika Anda ingin membuat tombol share melayang ini waktu pertama kali membuka artikel tidak terlihat kecuali harus di scroll terlebih dahulu (lihat milik igniel.com) maka Anda bisa menambahkan java script dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
window.addEventListener("scroll", myFunction);
function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  if (winScroll != 0) {
  document.getElementById("share-container").style.display = "flex"
  } else {
   document.getElementById("share-container").style.display = "none"
  }
}
//]]>
</script>
</b:if>

Letakkan java script tersebut di atas kode </body>

Kemudian Anda cari kode CSS #share-container cari display:flex jika sudah ketemu ganti dengan display:none

Semoga bermanfaat.