Cara Modifikasi Sidebar Agar Mirip Seperti Kompiajaib Pada Blog Non AMP

www.azid45.web.id - Cara Modifikasi Sidebar Agar Mirip Seperti Kompiajaib Pada Blog Non AMP. Assalamaualaikum.Wr.Wb, Pada kesempatan kali ini saya akan membuat tutorial agar sidebar teman-teman terlihat seperti miliki bang Adhy Suryadi www.kompiajaib.com. Blog profesional yang satu ini pastinya sudah banyak digemari para blogger, selain banyak tutorial yang dishare juga mehir dalam membuat template. Salah satu template yang terkenal adalah Kompi Flexible, template ini terkenal menurut saya karena seorang blogger mastimon.com memiliki ratusan ribu visitor karena menggunakan template tersebut. Hal ini sudah pasti nyata, karena selain responsive, template kompi flexible juga SEO Friendly dan Mobile Friendly.

Apakah ada template milik kang Adhy Suryadi yang terkenal juga selain kompi flexible?. Ternyata selain kompi flexible ada satu template yang sering diinginkan oleh para blogger baru yaitu template pribdi yang digunakan oleh kang Adhy Suryadi di situs www.kompiajaib.com dan sangat disayangkan template tersebut tidak dijual, kerena memang sebagai ciri khas template Adhy Suryadi. Jikalau teman-teman ingin memiliki template tersebut, cara satu-satunya adalah dengan dicloning seperti pada situs bungmadaf.com. Cerita dari blog tersebut mengcloning template milik Adhy Suryadi dengan menggunakan template kompiajaib AMP. Jadi jika teman-teman ingin mengkloning pastikan download kompiajaib AMP terlebih dahulu dan source-view atau inpact di www.kompiajaib.com. Pastinya teman-teman akan kesusahan karena script cssnya sudah di gabung tidak dikelompokkan, tetapi ada cara lain untuk kloning agar lebih mudah yaitu dengan mengkloning di situs www.kangimin.com.

Baiklah, namun jika teman-teman tidak suka mengkloning dan ingin membuat mirip seperti kompiajaib, maka disini saya akan share membuat sidebar seperti kompiajaib. Sidebar milik kompiajaib ini sangat unik dan berbeda dengan template lainnya, jadi perlu dicoba. Dengan sidebar ini, teman-teman tidak usah lagi membuat sidebar sticky karena sudah menggunakan scroll sendiri, dan perlu diketehui menurut saya kompiajaib memodifikasinya dari DTE:]. Langsung saja bagi penggunaa blog non AMP, jika tertarik membuat sidebar seperti kompiajaib, maka ikut langkah-langkah berikut;

Langkah Pertama, masuk ke blogger, pilih theme/tema - edit HTML. Setelah itu copas kode dibawah ini dan taruh diatas kode </head>

</style>
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
@media only screen and (min-width:801px){#sidebar-wrapper{position:fixed;height:90.4%;height:calc(100vh - 60px);right:0;top:55px;overflow-x:hidden;overflow-y:auto;margin-top:5px;direction: rtl;padding-left:10px;padding-right:10px;} #footer-container, #footer-navmenu{width: 70%;float: left}}
</b:if></style>

Langkah Kedua, edit angkah seperti top:55px dengan tinggi header teman-teman, kode #sidebar-wrapper, #footer dengan kode template teman-teman, karena kadang ada perbedaan kode pada setiap template, serta pastikan lebar sidebar dan postingan sesuai dengan template teman-teman karena dipositngan saya lebarnya 70% dan lebar sidebar 30%, ganti angka tersebut jika berbeda dengan lebar yang ada ditemplate teman-teman. Adapun direction:rtl adalah agar scroll beradaa di sebalah kiri, jika milik teman-teman sidebarnya disebalah kiri maka bisa mnghapusnya saja kode direction:rtl, namun jika disebelah kanan maka biarkan saja.

Langkah Ketiga, Jika sudah diedit semuanya langkah selanjutnya adalah Save TEMPLATE dan lihat hasilnya.

Keterangan:
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'> adalah tag kondisional dimana kode tersebut akan aktif hanya dipostingan dan versi dekstop saja. Jika teman-teman ingin menampilkannya di mode Homepage juga maka bisa menghapus kode data:blog.pageType == &quot;item&quot; and. Jika belum mengetahui tentang tag kondisional bisa lihat artikel saya.

Baca Juga: Kumpulan Tag Kondisional Untuk Menampilkan Widget di Halaman Tertentu

DEMO

Demikianlah Cara Modifikasi Sidebar Agar Mirip Seperti Kompiajaib Pada Blog Non AMP. Semoga membantu dan bermanfaat, Amin.