Cara Membuat Menu Sidebar Unik PanduanI'M

Beberapa hari yang lalu, disalah satu grup facebook gue melihat sebuah pertanyaan yang cukup menarik buat gue. Pertanyaannya kurang lebih seperti ini "Gimana yah cara buat menu sidebar seperti di panduanim.com?" Awalnya gue penasaran, iseng-iseng gue mengunjungi situs tersebut dan melihat sekeren apa menunya?, Gue arahkan cursor ke menu dan Wow..! Zoom effect.

Menurut gue menunya cukup unik dan keren, bukan hanya design gambarnya yang bagus tapi juga penambahan effect ZOOM sangat cocok dan menyatu dengan bagian lainnya. Menu sebagus ini pasti susah untuk dibuat, lagipula gue juga pake Blogger tidak sepeti panduanim.com yang menggunakan WordPress. Namun setelah gue intip source kodenya ternyata tidak sesusah pada kenyataanya. Malah justru ini sangat mudah hanya tinggal mengubahnya sedikit, menu sidebar ini muncul diblog ini. Bahkan siapapun bisa membuatnya hanya dengan mengikuti langkah-langkah dibawah ini, Menu sidebar keren ini akan terpajang disidebar kamu. PERHATIAN CARA INI HANYA BEKERJA PADA BLOGGER.

Cara Membuat Menu Sidebar Unik & Keren

1. Pertama: Buat Widget/Gadget Baru
Buka blog kamu, masuk ke TATA LETAK dan klik TAMBAHKAN GADGET, lalu pilih HTML/JAVASCRIPT.


2. Copy Paste Kode HTML
Salin kode dibawah ini dan letakan pada KOLOM KONTEN.

<a href="http://adiharistwn.blogspot.com" target="_blank"><div class="sidebar-membuatblog"></div></a>
<a href="http://adiharistwn.blogspot.com" target="_blank"><div class="sidebar-jualanonline"></div></a>
<a href="http://adiharistwn.blogspot.com" target="_blank"><div class="sidebar-kontenpenjualan"></div></a>
<a href="http://adiharistwn.blogspot.com" target="_blank"><div class="sidebar-strategiblog"></div></a>

Bisa dilihat seperti dibawah ini:


KALO SUDAH SELESAI JANGAN LUPA TOMBOL SIMPAN DIKLIK.

3. Copy Paste Kode CSS
Salin kode dibawah ini, kamu bisa letakan diatas kode tadi pada KOLOM KONTEN atau juga bisa diletakan ditemplate kamu. Kedua cara ini sebenarnya sama-sama baik, tergantung kamu lebih suka cara yang mana. Tapi kalo saran gue lebih baik letakan pada template.

.sidebar-membuatblog {
    background: url('http://panduanim.com/wp-content/uploads/2015/01/Membuat-Blog.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-membuatblog:hover {
 background-size: 120% auto;
}
.sidebar-strategiblog {
    background: url('http://panduanim.com/wp-content/uploads/2015/06/Tips-Blog.jpg') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-strategiblog:hover {
 background-size: 120% auto;
}
.sidebar-jualanonline {
    background: url('http://panduanim.com/wp-content/uploads/2015/06/Jualan-Online.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-jualanonline:hover {
 background-size: 120% auto;
}
.sidebar-kontenpenjualan {
    background: url('http://panduanim.com/wp-content/uploads/2015/08/Konten-untuk-Meningkatkan-Penjualan.png') no-repeat 50% 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-kontenpenjualan:hover {
 background-size: 120% auto;
}

* Bagi yang ingin meletakan di KOLOM KONTEN bersamaan dengan kode HTML kamu harus menambahkan kode ini : <style type="text/css">KODE CSS DIATAS</style>

* Sedangkan untuk yang ingin meletakannya diTEMPLATE, kamu harus masuk kehalaman TEMPLATE dan klik EDIT HTML. Terus kamu cari kode ]]></b:skin> dengan cara menekan tombol [ Ctrl + F ] pada keyboard untuk menampilkan box pencarian. Dan untuk lebih lengkapnya bisa kamu lihat seperti gambar dibawah:


Setelah ketemu, kamu letakan KODE CSS diatas kode ]]></b:skin> dan klik SIMPAN TEMPLATE.

4. Terakhir, Penyesuian/Kustomisasi

Kalo kamu ingin gambar menu lebih bagus dan menyatu dengan tampilan blog, kamu bisa mendesignnya sendiri sesuai tema blog kamu. Sedangkan untuk merubah gambar pada menu, kamu tinggal mengganti string link gambar pada KODE CSS dengan link gambar milik kamu. Contoh: http://panduanim.com/wp-content/uploads/2015/01/Membuat-Blog.png kamu ganti dengan http://YOURBLOG.blogspot.com/Menu1.png.

Selanjutnya merubah URL/LINK menu, Untuk merubah url/link menu kamu tinggal merubah url/link pada KODE HTML WIDGET kamu menjadi link tujuan yang kamu inginkan. Contoh: href="http://adiharistwn.blogspot.com" diubah menjadi href="http://YOURBLOG.blogspot.com."

Untuk penyesuaian lebih lanjut gue ngga akan menjelaskan secara detail. Karena, kalo kamu sudah mengenal kode CSS dan HTML lebih dalam, penyesuaian lebih lanjut bisa kamu lakukan dengan mudah.

Semoga saja ini berguna untuk mempercantik tampilan blog kamu. Dan tolong beritahu gue kalo cara ini bekerja pada situs/blog kamu.

Untuk DEMO bisa kamu lihat pada di sidebar menu blog ini atau langsung dari situsnya di panduanim.com.

Jika kamu memiliki pertanyaan mengenai Cara Membuat Menu Sidebar Unik PanduanI'M, jangan ragu untuk menanyakannya dikomentar. Dan kalo kamu merasa ini bermanfaat silakan SHARE ini kepada temanmu.