✓ Cara Membuat Sticky Share Button di Blogger

Selamat datang di repick.net, disini saya akan membahas cara membuat / memasang sticky share button atau bisa di sebut tombol share yang melayang. 

Guna dari sticky share ini adalah sebagai tombol untuk berbagi. Dan sticky share button ini sendiri bisa mempermudah visitor jika ingin membagikan postingan anda. Tanpa harus mencari terlebih dahulu letak tombol share nya. Karena sudah melayang di bawah layar.

Sticky share button ini banyak sekali di pasang para blogger pada template seribu umat, apa lagi kalo bukan viomagz, ya tidak terkecuali saya ketika menggunakan template karya mas sugeng tersebut.

BACA JUGA : Cara Membuat Syntax Highlighter

Nah disini saya akan membagikan cara memasang sticky share button di blogger. Khususnya bagi pengguna viomagz. Mengapa saya memilih template tersebut? Ya karena sangat mudah untuk di otak atik (Mungkin sudah dirancang untuk mempermudah pengguna).

Cara Membuat / Memasang Sticky Share Button di Blogger

Seperti biasa, pertama - tama silahkan anda login ke dashboard blogger terlebih dahulu.

Lalu pilih tema, kemudian Edit HTML

Cari kode di bawah ini 

#wrapper {

background: #ffffff;

max-width: 1000px;

margin: 0 auto;

padding: 70px 30px 30px;

overflow: hidden;

}

Dan ganti kode overflow: hidden; menjadi overflow: unset; sehingga menjadi seperti dibawah ini

#wrapper {

background: #ffffff;

max-width: 1000px;

margin: 0 auto;

padding: 70px 30px 30px;

overflow: unset;

}

Jika sudah, ganti lagi kode seperti dibawah ini

#share-container {

margin: 20px auto 30px;

overflow: hidden;

}

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;

}

Yang terakhir, ganti kode di bawah 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'>

Dengan kode di bawah 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'>

Kemudian klik save.

Jika anda sudah mengikuti langkah langkah cara membuat sticky share button di atas dengan benar, maka sticky share nya akan berfungsi dengan baik. Jadi jangan sampai salah ya!!!

www.repick.net