Cara Membuat Sticky Share Button Blogger Theme Viomagz

Usuluddin, S.Kom    Kamis, April 23, 2020    TUTORIAL   

Cara Membuat Sticky Share Button Blogger Theme Viomagz

GoSEO.id - Jika  kita membahas tentang viomagz, pada dasarnya theme ini sudah mempunyai default button share yang terletak dibawah artikel. Seperti yang kamu ketahui, button share merupakan item penting yang harus digunakan pada blog untuk mempermudah pengunjung menyimpan atau ingin membagikan artikel tersebut ke berbagai sosial media.

Nah, pada kesempatan kali ini kita menggunakan theme Viomagz untuk membahas "Cara Membuat Sticky Share Button Blogger Theme Viomagz". Bagi kamu pengguna theme Viomagz silahkan ikuti tutorial ini jika ingin membuat button sticky share. Pada postingan sebelumnya pun kami telah "Membuat Menu Navigasi Keren Di Viomagz" jika kamu juga ingin mencobanya.

Berikut tahapan-tahapan cara membuat sticky share button blogger theme viomagz :

Cara Membuat Sticky Share Button Blogger Theme Viomagz

1. Pertama, silahkan login di blogger.com dengan menggunakan akun GMail kamu.
2. Setelah itu masuk ke menu TEMA ⇨ klik tombol Edit HTML.
3. Lalu cari kode yang seperti dibawah ini pada bagian CSS :
   

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

   Kemudian rubah kode overflow: hidden; menjadi overflow: unset; sehingga tampak seperti dibawah ini :
   

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

4. Selanjutnya cari lagi kode seperti dibawah ini :
   

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

   Kemudian hapuslah kode tersebut dan gantikan dengan kode seperti 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;
   }

5. Selanjutnya cari lagi kode berikut :
   

   <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'>

   Lalu hapuslah kode tersebut dan gantikan dengan kode seperti 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'>

6. Terakhir klik tombol Simpan dan Selesai.

Akhir Kata

Begitulah "Cara Membuat Sticky Share Button Blogger Theme Viomagz" pada kesempatan hari ini. Bagaimana, cukup mudah bukan?

Semoga postingan ini bermanfaat. Silahkan tinggalkan komentar jika ada bagian yang tidak kamu pahami. Jangan lupa untuk share dan subcribe kami pada kolom Newsletter agar tak ketinggalan informasi atau update-an terbaru GoSEO.id. Terima kasih sudah hadir dan membaca artikel ini.