Cara membuat Menu Sidebar Mirip PanduanIM

Published by Distrik Otaku Monday 4 December 2017

Halo sahabat Panduan ID.Bagi Anda yang ingin mempercantik tampil blog
dengan Sidebar seperti PanduanIM. Saya akan memberikan tutorial untuk memasang di blog Anda.


Silahkan ikuti cara yang ada dibawah ini:

1. Login Akun Blogger Anda.
2. Lalu pilih Template > Edit HTML.
3. Cari kode </style> [Ctrl + F].
4. Lalu letakan kode dibawah ini sebelum </style>.
5. Lalu klik Simpan Template

/*SIDEBAR PANDUANIM*/
.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:5px;
}
.sidebar-membuatblog:hover {
 background-size: 120% auto;
}
.sidebar-strategiblog {
    background: url('    background-size: 100% auto;    height: 100px;    -webkit-transition: all .2s ease-out;    transition: all .2s ease-out;    border-radius: 5px;    margin-bottom:5px;}.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:5px;
}
.sidebar-strategiblog:hover {
 background-size: 120% auto;
}
.sidebar-jualanonline {
    background: url('    background-size: 100% auto;    height: 100px;    -webkit-transition: all .2s ease-out;    transition: all .2s ease-out;    border-radius: 5px;    margin-bottom:5px;}.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:5px;
}
.sidebar-jualanonline:hover {
 background-size: 120% auto;
}
.sidebar-kontenpenjualan {
    background: url('    background-size: 100% auto;    height: 100px;    -webkit-transition: all .2s ease-out;    transition: all .2s ease-out;    border-radius: 5px;    margin-bottom:5px;}.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:5px;
}
.sidebar-kontenpenjualan:hover {
 background-size: 120% auto;
}    background-size: 100% auto;    height: 100px;    -webkit-transition: all .2s ease-out;    transition: all .2s ease-out;    border-radius: 5px;    margin-bottom:5px;}.sidebar-kontenpenjualan:hover { background-size: 120% auto;}

Pada bagian tulisan berwarnah putih adalah Link Gambar yang bisa Anda ganti dengan gambar yang sesaui dengan blog Anda 

STEP 2 -  Memasang HTML/Javascript di Tata Letak

1. Masuk Tata Letak.
2. Lalu tambahkan Gedget di bagian Sidebar.
3. Pilih HTML/Javascript.
4. Letak kan Kode dibawah ini pada bagian Konten
5. Klik Simpan (Save)

<a href="https://panduan-id.blogspot.co.id/" target="_blank"><div class="sidebar-membuatblog"></div></a>
<a href="<a href="https://panduan-id.blogspot.co.id/" target="_blank"><div class="sidebar-jualanonline"></div></a>
<a href="<a href="https://panduan-id.blogspot.co.id/" target="_blank"><div class="sidebar-kontenpenjualan"></div></a>
<a href="<a href="https://panduan-id.blogspot.co.id/" target="_blank"><div class="sidebar-strategiblog"></div></a>

Mungkin cukup sekian dari atikel ini semoga bermanfaat dan terima kasih atas kunjungannya :)