Iklan Billboard 970x250

Artikel Terkait

Untuk Anda yang mau mengirimkan karya literasimu, baik itu cerpen, puisi, esai dan karya literasi lainya, silahkan Anda buka disini Kirim Artikel. LINK UNDUH SUDAH SAYA PERBAIKI. (Khusus Pada Artikel Aplikasi Android )

×
Cara Pasang Sticky Sidebar Dengan CSS Pada Blog AMP HTML

Iklan 728x90

Cara Pasang Sticky Sidebar Dengan CSS Pada Blog AMP HTML

    Bloggerntt.com - Cara Pasang Sticky Sidebar Dengan CSS Pada Blog AMP HTML- 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.

    Cara Pasang Sticky Sidebar Dengan CSS Pada Blog AMP HTML

    Baca juga :

    1. Cara Terbaru Pasang Iklan AdSense amp-ad di AMP Blogger 2019
    2. Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML
    3. Cara Pasang Tombol Search Box Di Template Blog AMP HTML
    4. Cara Pasang Widget Recent Comments Disqus di Blog AMP HTML


    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 :)
    Baca Juga
    SHARE
    Masukan Email Anda Untuk Dapatkan Update GRATIS!

    Artikel Terkait:

    Post a Comment

    Iklan Tengah Post