Memasang menu navigasi dapat mempermudah pengunjung blog dalam mengeksplor isi blog kamu. Nah berikut ini saya akam membagikan menu navigasi yang berbeda dan lain dari biasanya, menu navigasi ini dapat kamu pasang di sidebar blog kamu sebagai widget menu. Widget ini bisa anda pasangi gambar di depannya agar terlihat lebih keren dan lebih menarik. Widget ini juga ada efek animasi dengan CSS, jadi tanpa menggunakan script.

Widget Menu Keren di Sidebar Blog
Widget Menu Navigasi Blogger

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 kamu dapat mengganti kode berwarna merah diatas dengan gambar yang kamu inginkan, oh iya ukuran gambarnya lebar 300px dan tinggi 526px. Kode berwarna hijau adalah lebarnya silahkan disesuaikan dengan lebar sidebar/tempat widget. Agar tampilannya seperti dengan demo sebaiknya kamu juga memasang CSS font awesome di blog kamu. Untuk kode # dapat anda ganti dengan Link/url tujuannya. Yang lainnya dapat sobat edit sendiri.
19 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..

kurang keren bro, gak responsive

Bikin aja jadi resposnive gan :)

ini yang saya cari-cari kakak
thanks infonya