Mengatur Letak ShareButtons Brosense v2

Apakah anda pengguna template gratis yang telah dibuat oleh sang maestro template Indonesia, Mas Sugeng?. terutama template Brosense v2. Dan mungkin juga template template yang lain yang menggunakan share button dengan html tertulis persis seperti ini :
<div class='share-buttons'>

Secara umum, Brosense adalah template yang sangat bagus, seo friendly, fast loading dan masih banyak kelebihan lain yang membuat guruKATRO pernah menggunakan template ini dalam waktu yang cukup lama.

Awalnya, (kalau tidak salah) di tahun tahun 2015 ke bawah, template yang sangat cocok untuk adsense itu, sepertinya tidak ada suatu kelainan yang muncul. Namun belakangan, guruKATRO tahu dari pertanyaan seseorang tentang posisi share buttons pada template Brosense di suatu forum, tampilan share buttons yang pada awalnya tepat berada dibawah postingan, namun kali ini dia melompat ke atas judul posting, menindih judul posting, bahkan menutup total judul bila secara kebetulan judul postingnya pendek. lebih jauh bahkan bisa menutupi bagian paling atas isi postingan.

Bukannya guruKATRO ingin menistakan Mas Sugeng, karena pada awalnya letak share buttons itu berada pada tempat yang semestinya. Bukan pula ingin menggurui para blogger, karena pada dasarnya guruKATRO sangat tidak menguasai ilmu coding. Tapi hanyalah sekedar memenuhi rasa ingin berbagi tentang apa yang pernah guruKATRO lakukan dan ternyata mendapatkan hasil yang tidak terlalu mengecewakan.

Karena pada saat ini guruKATRO sudah tidak menggunakan template brosense, jadi mohon maaf kepada blog Belajar Seo Google yang pada kesempatan ini halaman anda guruKATRO ambil sebagai screenshoot image penjelas posting ini.

Seperti yang kita lihat pada image yang guruKATRO ambil dari blog Belajar seo google diatas, share buttons berada tepat dibawah breadcrumbs, itu artinya menutupi judul posting.

mengapa demikian ???

masalah itu muncul dari nama <div class="share-buttons"> .... yang mana nama itu juga sudah digunakan oleh sharebutton default blogger, artinya, nama itu css nya diatur dalam css bundle blogger.

silakan amati bagian bagian yang di kurungi

div class share-buttons .....
nama share-buttons sudah digunakan sebagai share button default blogger !
dan pastinya terkena imbas pengaturan dari css bundel milik blogger

yang paling utama dibicarakan disini adalah perintah css "position : absolute"

ockey biar lebih jelas ayo kita amati yang ini :

position absolute dari css bundle itulah yang membuat share buttons naik ke atas,

bila kita menambahkan position: relative pada css buatan brosense, maka share button akan langsung terjun ke tempat semula.

namun untuk lebih meyakinkan dalam melawan css bundle, sebaiknya tambahkan ajian important dibelakangnya.

itu guruKATRO hanya bisa edit css melalui halaman inspeksi, bila halaman di refresh maka akan kembali seperti semula ....

bagi pemula yang ingin mencoba edit sendiri, silakan

buka dashboard blogger,
pilih navigasi tema,
klik edit HTML
cari css ini :

cara mencari yang paling cepat, bila halaman edit html sudah terbuka, klik Ctrl dan F secara bersamaan,
kemudian ketik .share-buttons,

bila sudah ketemu, silakan tambahkan :
position:relative !important;

sehingga menjadi seprti ini :

klik simpan tema, dan lihat hasilnya, bila nasib sedang baik pastinya sharebutton sudah berada pada tempatnya.

bila tujuan kita hanya ingin mengembalikan letak share buttons tersebut, berarti selesai sudah proyek ini

=========================

Namun bagi yang merasa risi dengan keadaan garis tepi yang kurang pas, dan ingin mempertahankan cantiknya garis tepi tersebut, perlu tahu bahwa sesungguhnya itu adalah bukan border, melainkan box-shadow. Box shadow itu memiliki posisi diluar box, sehingga untuk bisa menampilkan box-shadow itu kita mesti mengatur tepi box share buttons tersebut, maka :

css yang asalnya :
margin: 0 0;

diganti dengan
margin: 5px;

atau
margin: 10px,

atau
margin: 10px 5px;

atau silakan atur nilai px itu sesuai kebutuhan masing masing.

Intinya, bila sudah dibuat jarak tepi (margin) diatas nilai 0, maka box- shadow itu pasti akan tampak cantik.

Tapi untuk blog tertentu yang memilih halaman sempit, mungkin menambah nilai margin itu membuat halaman blog tidak cukup untuk menampung lebar share button,

itu bisa disiasati dengan membiarkan margin: 0; lalu buang box-shadow dengan menambah css dibawah position : relative;

position: relative !important;
box-shadow: none;

box-shadow: none; itu berfungsi untuk membatalkan tampilan box-shadow milik css bundle

dengan demikian, garis tepi yang asalnya kelihatan tidak sempurna itu kini menjadi sama sekali tidak terlihat

Ya Allah ya Tuhan Kami Yang Maha Bijaksana,
Berikanlah keberkahan yang melimpah,
kepada pembaca kami
yang tidak memblokir iklan
pada halaman ini

Demikian Posting tentang Mengatur Letak ShareButtons Brosense v2 yang dapat guruKATRO sajikan, mohon maaf bila masih banyak kekurangannya, kritik dan saran serta pertanyaan dapat disampaikan melalui kolom komentar.

Terima kasih