Skip to main content
Azid Blogger

follow us

Cara Mudah Membuat Toggle Sidebar Ala Kompiajaib Pada Blog Non AMP

Cara Mudah Membuat Toggle Sidebar Ala Kompiajaib Pada Blog Non AMP

www.azid.web.id - Cara Mudah Membuat Toggle Sidebar Ala Kompiajaib Pada Blog Non AMP. Blogger terkenal di Indonesia menurut saya adalah kompiajaib.com, beliau merupakan orang yang kreatif bagi saya dan dalam penjelasan setiap tutorialnya sangat jelas dan mudah dipahami. Jika sobat ingin belajar tentang template blogger maka kompiajaib.com merupakan tempat belajar yang pas bagi sobat.

Terkait dengan kompiajaib, akhir-akhir ini blog beliau telah di rombak hampir 50% menurut saya. Hal tersebut beliau lakukan pasca melepaskan template kebangganannya kompiajaib AMP HTML Versi 3. Mungkin sebagai ciri khas agar tidak sama dan mirip seperti template yang sudah beliau jual, akhirnya beliau merombak templatenya kembali. Diantara hal yang menearik dan membuat perhatian bagi saya adalah toggle sidebar yang tampil pada menu item atau postingan. Jika tombol toggle sidebar di klik maka sobat akan melihat layar penuh tampa sidebar. Toggle sidebar tersebut, sama persis dengan yang digunakan pada blog AMP.dev

Tampilan baru tersebut membuat saya penasaran akan bagaimana cara membuatnya. Akan tetapi karena kode css pada template yang beliau gunakan bergabung jadi satu membuat saya tidak sanggup untuk bereksperiment lebih jauh. Apakah saya menyerah?, ya sempat saya menyerah dengan penasaran saya. Akan tetapi kemaren saat saya melihat postingan beliau terkait membuat tema kustom blogger, disana terdapat link tutorial terkait defer offscreen image dan pada demonya terdapat menu toggle sidebar. Dari sinilah awal saya menemukan kode css yang kemudain saya edit ulang agar bisa aktif pada blogger lainnya.

Pada eksperimen saya bak dua pulau terlampau dalam satu jalan. Selain sukses bereksperiment pada blog Non AMP saja juga berhasil menjalankan kode tersebut pada blog AMP. Berhubung pada blog kompiajaib.com belum memposting tutorial terkait toggle sidebar, maka disini saya akan share tutorial tersebut. Dengan share ini, mungkin sobat yang mempunyai penasaran atau ingin tampilan tersebut sebagaimana pada benak saya bisa menggunakannya dan meninkmatinya.

Membuat toggle sidebar pada blog Non AMP agar sidebar bisa di show hidden

Baiklah, untuk tutorialnya sobat bisa mengikuti langkah-langkah dibawah ini:
Pertama, login blogger, menuju menu thema atau template dan klik Edit HTML

Kedua, cari kode </head> dan letakkan kode berikut ini tepat diatas kode </head>
<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;}}
</style>

keterangan: lihat pada kode css yang yang kasih tulisan bold atau tebal, secara umum kode tersebut digunakan pada template dimana main-wrapper digunakan untuk menampilkan layout postingan (Blog1) dan sidebar-wrapper digunakan untuk menampilkan menu sidebar. Lihatlah kode css sobat barangkali ada perbedaan, karena jika berbeda maka toggle sidebar tidak akan berjalan atau tidak akan aktif. Untuk eskperimen yang saya lakukan, saya menggunakan template kompi flexible non AMP versi 8, jadi sobat yang menggunakan template tersebut tidak usah otak-atik kode diatas.

Ketiga, cari kode <div id='main-wrapper'> bisa jadi kode tersebut ditambah kode lainnya, untuk memudahkan sobat bisa langsung saja ketik pada pencarian dengan hanya 'main-wrapper ('=tanda petik satu). Jiksa sudah ketemu, copas kode berikut ini dan letakkan kodenya diatas kode <div id='main-wrapper'>

<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 ketemu langkah selanjutnya copas kode berikut ini dan letakkan kodenya diatas kode <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

<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> jika sudah ketemu letakkan kode berikut ini tepat diatas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  if (winScroll != 0) {
  document.getElementById("toggle-label-title").style.display = "none"
  } else {
   document.getElementById("toggle-label-title").style.display = "flex"
  }
}
//]]>
</script>
</b:if>

Keenam, langkah terkhir adalah Save Template sobat dan lihat hasilnya.

untuk Demonya sobat bisa melihat dibawah ini


Demikianlah tutorial Cara Mudah Membuat Toggle Sidebar Ala Kompiajaib Pada Blog Non AMP. 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