Cara Pasang Sticky Sidebar Dengan CSS Pada Blog AMP HTML

Cara Pasang Sticky Sidebar Dengan CSS Pada Blog AMP HTML

Cara Pasang Sticky Sidebar Dengan CSS Pada Blog AMP HTML


FLOBAMORApedia - Pada kesempatan kali ini saya akan membagikan cara memasang sticky sidebar pada template blog amp html tanpa javascript. Hanya dengan menggunakan kode CSS agar bisa menerapkanya.

Anda juga bisa baca posting saya sebelumnya disini, Cara Pasang Tabel Responsiv di Posting Blog AMP HTML .

Untuk diketahui bersama, untuk template AMP HTML tidak di sarankan penggunaan Javascript didalamnya hal tersebut akan terjadi error yang menyebabkan tidak Valid AMP HTML pada template tersebut.
Pada postingan kali ini, saya akan berbagi Cara Pasang Sticky Sidebar Dengan CSS Pada Blog AMP HTML yaitu dengan memanfaatkan kode CSS position: sticky; yang nantinya akan dipasang pada widget sidebar blog.

Berikut ini langkah pemasangan Sticky Sidebar di blog amp html :


Pertama


- Anda salin kode CSS dibawah ini lalu letakkan diatas kode </head>.

<style type='text/css'>
#sidebar-sticky {
  width: 300px;
  float: right;
  padding: 0;
  margin: 0 auto;
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}
</style>

Keterangan :

  • Untuk lebar (widht) silahkan Anda sesuaikan dengan lebar sidebar pada blognya, kemudian jika di blog Anda sudah menggunakan sticky header bisa disesuaikan pada top dari tinggi sticky pada headernya, supaya widget tidak terlihat terpotong nantinya.
  • Jika pada template blog Anda sudah menggunakan position: sticky; yang harus diperhatikan pada div induknya tidak boleh lagi menggunakan overflow. Dan umumnya pada div induk untuk aside dan main selalu menggunakan class='outer-wrapper', untuk itu Anda wajib perhatikan di CSS .outer-wrapper tidak ada lagi kode overflow.

Kedua

Amda cari kode seperti dibawah ini :


<aside itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
<div id='sidebar-right'>
...........
...........
...........
</div>
</aside>


Anda salin kode dibawah ini dan letakkan tepat di dibawah kode </aside>.

<div id='sidebar-sticky'>
  <b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
  </div>

Nantinya akan jadi seperti dibawah ini :

<aside itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
<div id='sidebar-right'>
...........
...........
...........
</div>
</aside>
<div id='sidebar-sticky'>
  <b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
  </div>

Setelah selesai klik tombol SAVE, kemudian Anda buat gadget baru pada sidebar. Silahkan buat sticky di posisi sticky_sidebar. Selamat mencoba semoga bermanfaat.

Sekian artikel Cara Pasang Sticky Sidebar Dengan CSS Pada Blog AMP HTML, semoga bermanfaat :)
Blogger
Disqus
Pilih Sistem Komentar

No comments

۝ Peraturan dalam berkomentar :

☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

Copyright © 2018 - Blogger NTT® Bloggerntt.com✓

Advertiser