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:
- Login Akun Blogger Anda.
- Lalu pilih Template > Edit HTML.
- Cari kode </style> [Ctrl + F].
- Lalu letakan kode dibawah ini sebelum </style>.
- 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
- Masuk Tata Letak.
- Lalu tambahkan Gedget di bagian Sidebar.
- Pilih HTML/Javascript.
- Letak kan Kode dibawah ini pada bagian Konten
- 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 :)