Widget Menu Keren di Sidebar Blog

Baiklah sobat pada kesempatan ini seocips akan membagikan sebuah widget menu yang dapat anda pasang di sidebar Blogger anda. Widget ini bisa anda pasangi gambar di depannya agar terlihat lebih keren dan ciamik. Widget ini juga ada efek animasi dengan CSS, jadi tanpa menggunakan script.

Lihat demonya di bawah ini:



Bagaimana sob? tertarik ingin menggunakannya? ok berikut adalah kode-kodenya yang dapat anda pasang pada Widget HTML Blog.

Menu Widget

<div class="seocipsmb">
    <input type="checkbox" id="tm" />
    <!-- The menu -->
    <ul class="sidenav">
      <li><a href="#"><i class="fa fa-check"></i><b>Tasks</b></a></li>
      <li><a href="#"><i class="fa fa-inbox"></i><b>Messages</b></a></li>
      <li><a href="#"><i class="fa fa-pencil"></i><b>New Post</b></a></li>
      <li><a href="#"><i class="fa fa-cog"></i><b>Settings</b></a></li>
      <li><a href="#"><i class="fa fa-star"></i><b>Starred</b></a></li>
      <li><a href="#"><i class="fa fa-power-off"></i><b>Logout</b></a></li>
    </ul>
    <section>
      <!-- Label for #tm checkbox -->
      <label for="tm">MENU<br/> ~ Click Me ~ </label>
    </section>
  </div>
<style>
@import url(http://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,300);
 #addku1,#addku2 {display:none;}
.seocipsmb {
  float: left;
  position: relative;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#tm {
  display: none;
}
.seocipsmb section {
  background: url("http://4.bp.blogspot.com/-XZ7sZ3r4rhs/VVlxgzV-GwI/AAAAAAAAEzI/PStopOT5KS4/s1600/seocips22.jpg");
  width: 300px;
  height: 500px;
  position: relative;
  transition: all 0.25s;
}
.seocipsmb section label {
  color: white;
  font: bold 14px Montserrat;
  text-align: center;
  border: 2px solid white;
  border-radius: 4px;
  display: block;
  padding: 10px 0;
  width: 60%;
  position: absolute;
  left: 20%;
  top: 100px;
  cursor: pointer;
  text-transform: uppercase;
}
.sidenav {
  background: rgb(50, 60, 60);
  width: 150px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding-top: 100px;
}
.sidenav li {
  list-style-type: none;
}
.sidenav a {
  color: white;
  text-decoration: none;
}
.sidenav b {
  font: bold 12px/48px Montserrat;
  display: block;
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.4s;
}
.sidenav i {
  display: block;
  width: 50px;
  float: left;
  font-size: 16px;
  line-height: 48px;
  text-align: center;
}
#tm:checked ~ section {
  transform: translateX(150px);
}
#tm:checked ~ .sidenav b {
  opacity: 1;
  transform: translateX(0);
}
#tm:checked ~ .sidenav li:nth-child(1) b {
  transition-delay: 0.08s;
}
#tm:checked ~ .sidenav li:nth-child(2) b {
  transition-delay: 0.16s;
}
#tm:checked ~ .sidenav li:nth-child(3) b {
  transition-delay: 0.24s;
}
#tm:checked ~ .sidenav li:nth-child(4) b {
  transition-delay: 0.32s;
}
#tm:checked ~ .sidenav li:nth-child(5) b {
  transition-delay: 0.40s;
}
#tm:checked ~ .sidenav li:nth-child(6) b {
  transition-delay: 0.48s;
}
</style>
Untuk Wallpaper depannya anda dapat mengganti kode berwarna merah diatas dengan gambar anda, oh iya ukuran gambarnya lebar 300px dan tinggi 526px. Kode berwarna hijau adalah lebarnya silahkan disesuaikan dengan lebar sidebar/tempat widget. Untuk kode # dapat anda ganti dengan Link/url tujuannya. Yang lainnya dapat sobat edit sendiri. Ok sekian, semoga bermanfaat.
15 Komentar untuk "Memasang Widget Menu Keren di Sidebar Blog"

Pertamaxxx.. mas . .
keren bangeetttt menunya . . ^_^
langsuung d comot yaah . . ^_^
#mampir

Yang dicari - cari ketemu makasih gang :)

Request Donk :) Cara Memasang Widget Selamat Datang Dan Sampai Jumpa Di blog :)

Lama ga ngesot kemari apa kabarnya bang..? hahahahyyy

takut berat ah :P , soalnya kalo dipasang di website ane yang paling unyu-unyu nanti takut berat kak.

Kang cara membuat Halaman Statis Full Widht Pada Halaman Tertentu Yang Valid Gimana Gan??
sepoel-cyber.blogspot dot com

Wah sobat harus ngerti bagian-bagian template yang sobat gunakan, misalnya mengatur lebarnya dan menyembunyikan sidebar.

Oh gitu yah, kayak blog ini berat...hehehe

ehh iya yah.. kabar baik sob. hahayhehehe

Nanto sob, kalau udah tahu caranya..hehehe

Bagus nih gan, numpang nyimak ya :-)

Wah ternyata yang ginian lumayan yang nyari yah..