Membuat Menu Barner Sidebar Unik Mirip PanduanIM

Beberapa hari yang lalu, gue lagi lihat disalah satu grup blogger yang ada di facebook. Seseorang bertanya cara membuat slidebar menu seperti gambar diatas bagaimana? kebetulan gue tahu cara buatnya, namun dari pada gue njelasi panjang lebarkan mending gue posting ajah. Agar tersusun rapih dan mudah dimengerti. Langsung saja simak baik gan...!

Cara Membuat Menu Siderbar Ala PanduanIM :

1. Login ke Blogger 
2. Klik Template
3. Cari ]]></b:skin> [ Ctrl + F ]
4. Lalu letakan kode dibawah ini diatas ]]></b:skin>

.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;
}

5. Jangan lupa klik Simpan template 
6. Selanjutnya Klik Tata Letak
7. Klik Tambahkan Gadget
8. Pilih HTML/JavaScript
9. Masukan judul & kode dibawah ini

<a href="http://ladaskipzen.blogspot.com/membuat-blog/" target="_blank"><div class="sidebar-membuatblog"></div></a>
<a href="http://ladaskipzen.blogspot.com/jualan-online/" target="_blank"><div class="sidebar-jualanonline"></div></a>
<a href="http://ladaskipzen.blogspot.com/konten-untuk-meningkatkan-penjualan/" target="_blank"><div class="sidebar-kontenpenjualan"></div></a>
<a href="http://ladaskipzen.blogspot.com/tips-membuat-blog/" target="_blank"><div class="sidebar-strategiblog"></div></a>

10. Terakhir SIMPAN.

Untuk live demo bisa lihat pada di sidebar menu atau langsung dari situsnya bisa kunjungi panduanim.com.

Perlu Penyesuaian

1. Edit Gambar Menu
Untuk mengedit atau merubah gambar silakan ganti tulisan berwarna biru dengan link gambar yang baru. kamu bisa mendesignnya sendiri agar sesuai dan cocok dengan tampilan blog kamu.

2. Edit URL/Link Menu
Untuk url menu, tinggal merubah tulisan berwana merah dengan url/link kamu.