--!>
Home » Widget » Cara Buat Menu Sidebar Mirip PanduanIM

Sunday, July 23, 2017

Cara Buat Menu Sidebar Mirip PanduanIM

         11 Disqus  
Sidebar_PanduanIM

Aibou (あいぼう).  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:

STEP 1 -  Memasang CSS di Edit HTML


  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('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('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('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;
}
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="http://www.klikdanbo.com" target="_blank"><div class="sidebar-membuatblog"></div></a>
<a href="http://www.klikdanbo.com" target="_blank"><div class="sidebar-jualanonline"></div></a>
<a href="http://www.klikdanbo.com" target="_blank"><div class="sidebar-kontenpenjualan"></div></a>
<a href="http://www.klikdanbo.com" target="_blank"><div class="sidebar-strategiblog"></div></a>
Mungkin cukup sekian dari atikel ini semoga bermanfaat dan terima kasih atas kunjungannya :)

Sumber : ladaskipzen[dot]logspot[dot]com

11 comments


EmoticonEmoticon