Skip to main content

follow us


www.azid.web.id - Cara Membuat Tampilan Sidebar Seperti Blog Kompiajaib. Jika sobat sangat tertarik dengan templatenya kang Adhy Suryadi pemilik blog www.kompiajaib.com dan ingin memilikinya maka jangan sampai berangan-angan seperti itu, mengapa demikian? Tentunya ada berbagai alasan misalnya bahwa secara resmi kang Adhy Suryadi mengatakan jikalau templatenya tidak akan dijual dikarenakan template itu khusus untuk blognya. Meskipun begitu, saya pernah searching banyak yang sudah cloning template beliau seperti pada situs www.webistemini.net, www.warim.id, www.kangimin.com, www.bungmadaf.com. Untuk situs websitemini dan warim sendiri merupakan website dengan satu pemilik, didalamnya terdapat berbagai tutorial blog yang menurut saya hampir 80% seperti milik kompiajaib dan kini tampilan templatenya sudah dirubah mirip seperti DTE. Mungkin bagi sobat yang ingin memiliki template kompiajaib bisa menghubungi pemilik situs tersebut. Untuk yang kangimin sampai saat ini (23/01/2019) masih menggunakan template yang mirip dengan kompiajaib akan tetapi sedikit dimodif dari segi tampilan warna dan jika disource kode cssnya masih tersusun rapi dengan pengelompokkan css hal ini tentunya berbeda dengan milik kompiajaib yang sudah dijadikan satu baris jadi sulit untuk dicloning bagi saya, jika sobat ingin mengcloning bisa menuju situsnya kang imin. Dan yang terakhir adalah situs bungmadaf, kalau yang ini menggunakan template kompiajaib persis tanpa ada perubahan, dan pada artikelnya juga terdapat download template seperti milik kompiajaib. Jika sobat tidak ingin terlalu ruwet mengedit sini-sana bisa membeli template hasil cloningnya di https://www.bungmadaf.com/2018/10/template-kompi-ajaib-amp.html

Itulah sedikit pembukaaan tentang template yang digunakan kompiajaib. Jika sobat ingin menampilkan sidebar pada template sobat mirip dan seperti template kompiajaib maka disini solusinya. Mengapa harus membuat sidebar seperti kompiajaib? Tentunya pertanyaan tersebut kadang sering dipertanyakan para blog baru seperti saya. Menuurt saya sendiri sidebar yang digunakan kompiajaib terlihat sangat keren, disisi lain kita tidak susah payah membuat sidebar sticky lagi yang membutuhkan JQuery karena dengan scroll disidebar maka lebih memudahkan kita dan yang paling penting blog kita fast loading serta menjadi profesional layaknya template milik kompiajaib.

Baiklah, mari kita menuju tutorial cara membuat tampilan sidebar seperti blog kompiajaib. Sebelum mengeksekusi dan mengedit, alangkah baiknya sobat membackup template sobat terlebih dahulu agar nantinya ketika ada kesalahan dan menjadi berantakan tidak bingung dan menyesal, karena untuk mengedit sidebar seperti milik kompiajaib butuh mengedit widget footer juga agar hasilnya menjadi bagus. Untuk langkah-langkahnya dapat mengikuti tutorial berikut ini;

Pertama, buka blog sobat dan menuju menu theme/tema - edit HTML.
Kedua, Setelah itu sobat cari kode style amp-custom='amp-custom', jika sudah menemukannya maka langkah selanjutnya adalah copas kode css berikut ini dan letakkan didalam bidang amp-custom


<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>

Keterangan:
Media screen min-width 801px adalah batas minimal sidebar ini aktif, jika sobat ingin meminimalkan tampilannya bisa mengurangi atau menambah, namun saran saya ukuran tersebut sudah relevan dan responsive pada template. #sidebar-wrapper adalah kode pemanggil tampilan sidebar, tidak semua pembuat template dalam memberikan coding sidebar sama serperti itu tetapi secara umum kodenya adalah #sideber. Oleh karena itu sobat harus tahu struktur kode sidebarnya, untuk mengetahuinya bisa dengan sourc-code atau inpact template sobat. top:55px adalah batas atas sidebar, atur batas tersebut sesuai dengan tinggi header sobat. width:30% adalah lebar sidebar, untuk blog saya, saya coding dengan persen agar responsive, atur sesuai lebar sidebar sobat. #footer-container, #footer-navmenu, sama seperti sidebar, sobat harus tahu kode pemanggil di footer sobat jika template sobat memiliki footer. Dan untuk width: 70% adalah menyamakan lebar postingan, sesuaikan dengan lebar postingan sobat.

Ketiga, setelah semua diedit maka langkah terakhir adalah save Template sobat. Dan lihat hasilnya, jika belum sesuai maka bisa diedit ulang agar tampilannya sesuai dan bagus.

Demikianlah tutorial Cara Membuat Tampilan Sidebar Seperti Blog Kompiajaib. Semoga bermanfaat, Amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar