Cara Membuat Sticky Share Button Blog di Template Viomagz

Jagoandzgn.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.

Komentar

  1. Kode HTML svg AdSense apa ya kak, cari2 blm ketemu

    BalasHapus
    Balasan
    1. Itu menggunakan 2 path kak inspect aja ambil keduanya, terima kasih sudah berkunjung di Jagoandzgn

      Hapus
  2. Mantap keren bgt tutorialnya. Mungkin bisa saya coba di blog saya satunya. Makasih mas!

    BalasHapus
    Balasan
    1. Alhamdulillah siap makasih bang sudah berkunjung di Jagoandzgn

      Hapus
  3. Hello, How can we hide a post on Blogger on the homepage? Is there a code to set it so it just doesn't appear on the homepage? Can you help.

    BalasHapus
  4. Balasan
    1. Siap mas, terima kasih sudah berkunjung di Jagoandzgn

      Hapus
  5. Jumlah sharenya bisa ada count nya gak gan?

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Download Config Pubg Anti Reset Turnamen Boost

Download Template Kompaz News Premium Blogger Responsive