Cara Membuat Sticky Share Button Blog di Template Viomagz

umojaforum.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Tombol Share Sticky di Template Viomagz, Seperti yang kita ketahui para blogger pastinya tidak terlalu mementingkan tombol share di blog mereka padahal hal tersebut adalah satu cara mencari sumber tambahan traffic apabila kamu memiliki artikel yang bagus untuk di share oleh pengunjung blog kamu. Dengan disediakannya tombol share tersebut, pastinya mempermudah bagi pengunjung apabila ingin membagikan artikel yang kamu publish.

Nah, pada tutorial kali ini kita terinspirasi dari sebuah blog legendaris yaitu blog igniel yang memiliki tombol share yang bisa melayang atau biasa disebut dengan sticky, untuk tutorial kali ini kita hanya menambah dan merombak sedikit pada bagian CSS sharenya saja. Nah bagi kamu yang ingin belajar lebih jauh mengenai dunia Islam jangan lupa selalu kunjungi Mencari Takbir. Dan untuk tutorialnya silahkan kamu simak dibawah ini.

Cara Membuat Sticky Share Button Blog di Template Viomagz

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Selanjutnya, cari kode persis dengan kode dibawah ini.

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

4. Ganti kode overflow: hidden; diatas dengan kode overflow: unset; seperti dibawah ini.

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

5. Berikunya kamu cari kode seperti dibawah ini.

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

6. Hapus kode diatas dan ganti dengan kode dibawah ini.

#share-container {
background: #fff;
width:100%;
display: inline-block;
flex-wrap: nowrap;
align-items: center;
position: -webkit-sticky;
position:sticky;
bottom: 0px;
z-index: 1;
}

7. Selanjutnya cari kode seperti dibawah ini.

<div id='share-container'>
<div class='label-line-c'>
<p class='share-this-pleaseeeee'><b:switch var='data:blog.locale'><b:case value='id'/>Bagikan Artikel ini<b:default/>Share this post</b:switch></p>
</div>
<div id='share'>

8. Hapus kode diatas dan ganti dengan kode dibawah ini.

<div class='label-line-c'>
<p class='share-this-pleaseeeee'><b:switch var='data:blog.locale'><b:case value='id'/>Bagikan Artikel ini<b:default/>Share this post</b:switch></p>
</div>
<div id='share-container'>
<div id='share'>

9. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial bagaimana Cara Membuat Sticky Share Button Blog di Template Viomagz, untuk kamu yang ingin melihat demonya bisa lihat di blog ini dan apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.