Cara Mudah Membuat Tombol Share Sticky di Template Viomagz

Daftar Isi [Tampilkan]

Tombol Share Sticky

Salah satu fungsi tombol share di blog adalah satu cara mencari sumber tambahan traffic apabila kamu memiliki artikel yang bagus untuk di share oleh pengunjung blog kamu. Maka dengan adanya tombol share tersebut, pastinya mempermudah bagi pengunjung apabila ingin membagikan artikel yang kamu publish.

Sehingga pada tutorial kali ini saya akan berbagi bagaimana membuat tombol share sticky di Template Viomagz seperti yang bisa anda temukan di blog igniel yang memiliki tombol share yang bisa melayang atau biasa disebut dengan sticky. Dan untuk tutorialnya silahkan kamu simak dibawah ini.

Cara Membuat Sticky Share Button di Template Viomagz

1. Silahkan kamu login ke blogger.com
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. Lalu silakan 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. Langkah berikunya adalah silakan kamu cari kode seperti dibawah ini, untuk memudahkan, silakan tekan ctrl+f

#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. Ok, langkah selanjutnya adalah silakan anda 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.

Demikian tutorial mengenai Cara Membuat Sticky Share Button di Template Viomagz. Adapun untuk melihat demonya bisa lihat di blog ini. Terimakasih

Bagikan Artikel ini