Skip to main content
Azid Blogger

follow us

Cara Mudah Membuat Toggle Sidebar Show Hidden Sidebar Pada Blog AMP Ala Kompiajaib

Cara Mudah Membuat Toggle Sidebar Show Hidden Sidebar Pada Blog AMP Ala Kompiajaib

www.azid.web.id - Cara Mudah Membuat Toggle Sidebar Show Hidden Sidebar Pada Blog AMP Ala Kompiajaib. Jika sebelumnya saya telah share membuat toggle sidebar pada blog Non AMP dengan beberapa deskripsi singkat latar belakang saya share tutorial tersebut, maka kali ini saya juga akan share membuat toggle sidebar khusus untuk blog AMP.

Baiklah langsung saja, untuk membuat toggle sidebar sobat bisa mengikuti langkah-langkahnya dibawah ini, akan tetapi jika sobat ingin melihat deskrispi singkat terkait toggle sidebar ini terlebih dahulu, sobat bisa melihat postingan sebelumnya disini.

Pertama, login blogger, pilih menu theme atau template pilih edit HTML. Setelah itu pastikan pada template sobat sudah ada kedua script AMP seperti dibawah ini

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/>
<script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/>
</b:if>

Jika sudah ada maka abaikan script tersebut, namun jika belum ada sobat bisa copas script tersebut dan letakkan  didalam kode <head> ...... </head>

Kedua, langkah selanjutnya copas kode css berikut ini dan letakkan didalam kode <style amp-custom='amp-custom> ..... </style>

input.check-sidebar{position:fixed;top:-100px;opacity:0}
.toggle-label-sidebar{position: -webkit-sticky;position:sticky;top:70px;z-index:16;margin-right:0;margin-top:-40px;font-size:12px;color:#fff;cursor:pointer;display:flex;align-items:center;float:right}
.toggle-label-sidebar:focus,.toggle-label-sidebar:active{outline:0}
.toggle-label-icon,.toggle-label-title{display:flex;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);background:#020c28;border-radius:4px;height:28px;padding:5px}
.toggle-label-title{border-radius:4px 0 0 4px;margin-right:-5px;padding-right:10px}
.toggle-label-sidebar svg{vertical-align:middle}
input.check-sidebar:checked~#sidebar-wrapper{display:none}
input.check-sidebar:checked~#main-wrapper{width:100%}
input.check-sidebar:checked~#main-wrapper .toggle-label-sidebar .toggle-label-icon svg{transform:rotate(180deg)}

@media screen and (max-width:800px){.toggle-label-sidebar {display: none;}}

KETERANGAN:
Pada tulisan yang saya bold merupakan kode pemanggil menu pada Blog1 dan sidebar. Pastikan kode tersebut sama, jika berbeda maka gantilah dengan kode yang ada pada template sobat. (penjelasan lebih jauh terkait hal ini klik disini)

Ketiga, setalah langkah kedua, langkah selanjutnya cari kode <div id='main-wrapper'> atau 'main-wrapper (dengan tanda petik satu sebelum kata main) karena pada setiap template kadang berbeda bisa jadi ketambahan kode class atu id lain. Jika sudah ketemu, copas kode berikut ini dan letakkan kodenya diatas kode <div id='main-wrapper'> tersebut.

<input class='check-sidebar' hidden='' id='check-sidebar' name='checksidebar' type='checkbox'/>

Keempat, cari kode <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'> atau 'post-body. Jika sudah ketemu copas kode berikut dan letakkan diatas kode <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'> tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<label class='toggle-label-sidebar' for='check-sidebar' role='toggle-sidebar' tabindex='0'>
<span class='toggle-label-title' id='toggle-label-title'>Show or Hidden</span>
<span class='toggle-label-icon'><svg height='18' viewBox='0 0 24 24' width='18'><path d='M12.08,4.08L20,12L12.08,19.92L10.67,18.5L16.17,13H2V11H16.17L10.67,5.5L12.08,4.08M20,12V22H22V2H20V12Z' fill='#fff'/></svg></span></label>
</b:if>

Kelima, cari kode </body> dan letakkan kode berikut ini tepat diatas kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<amp-animation id='showAnim' layout='nodisplay'>
<script type='application/json'>
        {
        &quot;selector&quot;: &quot;#toggle-label-title&quot;,
        &quot;keyframes&quot;: [{&quot;opacity&quot;: &quot;0&quot;,&quot;visibility&quot;: &quot;hidden&quot;}]
      }]
    }
  </script>
</amp-animation>
<amp-animation id='hideAnim' layout='nodisplay'>
<script type='application/json'>
        {
        &quot;selector&quot;: &quot;#toggle-label-title&quot;,
        &quot;keyframes&quot;: [{&quot;opacity&quot;: &quot;1&quot;,&quot;visibility&quot;: &quot;visible&quot;}]
      }]
    }
  </script>
</amp-animation>
</b:if>

Terakhir, Simpan Template dan lihat hasilnya.

Semoga berhasil.


Demikianlah tutorial Cara Mudah Membuat Toggle Sidebar Show Hidden Sidebar Pada Blog AMP Ala Kompiajaib. Semoga bermanfaat, amin.
PERHATIAN! File di Azid Blogger di redirect kurang lebih 5-7 kali oleh karena itu sobat harap bersabar untuk mendapatkan filenya.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar