Membuat Menu Sidebar Tampil SlideOut Pada Blog

Membuat Menu Sidebar Tampil SlideOut Pada Blog - Melengkapi beberapa posting saya sebelumnya yang membahas tentang Menu Blog, kali ini saya akan share satu lagi alternative menu sidebar pada blog yang mempunyai efek slideout. Berikut tutorialnya.

1. Masuk ke akun blogger sobat.
2. Masukk Tab Rancangan >> Template >> Edit HTML.
3. Backup terlebih dahulu template anda bila perlu.
4. (gunakan Ctrl + F atau F3 untuk memudahkan pencarian) Taruh Style berikut tepat diatas tag ]]></b:skin> atau </style>.

.pushmenu { 
  background: #3c3933;
  font-family: Arial, Helvetics, sans-serif;
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
  position:fixed;
}
.pushmenu h3 {
  color: #cbbfad;
  font-size: 14px;
  font-weight: bold;
  padding: 15px 20px;
  margin: 0;
  background: #282522;    
  height: 16px;
}
.pushmenu a {
  display: block; 
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-top: 1px solid #56544e;
  border-bottom: 1px solid #312e2a;
  padding: 14px;
}
.pushmenu a:hover {
  background:#00A287;
}
.pushmenu a:active {
  background: #454f5c;
  color: #fff;
}
.pushmenu-left {
  left: -240px;
}

.pushmenu-left.pushmenu-open {
  left: 0;
}

.pushmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}
.pushmenu-push-toright {
  left: 240px;
}
/*Transition*/
.pushmenu, .pushmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;  
}
#nav_list {
  background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
  cursor: pointer;
  height: 27px;
  width: 33px;
  text-indent: -99999em;
}
nav-list.active {
  background-position: -33px top;
}
 .buttonset {
      background: #00A287;
      height: 16px;
      padding: 10px 20px 20px;
 }

5. Berikutnya taruh kode berikut setelah wrapper atau outer-wrapper template anda (sesuaikan dengan template anda karna setiap template berbeda)

<nav class="pushmenu pushmenu-left">

    <h3>Menu</h3>

    <a href="#">Home</a>

    <a href="#">Navi2</a>

    <a href="#">Navi3</a>

    <a href="#">Navi4</a>

    <a href="#">Navi5</a>

    <a href="#">Navi6</a>

    <a href="#">Navi7</a>

</nav>

6. Taruh kode berikut setelah Tag pemuka <body>.

<script type='text/javascript'>

$(document).ready(function() {

$menuLeft = $('.pushmenu-left');

$nav_list = $('#nav_list');

$nav_list.click(function() {

$(this).toggleClass('active');

$('.pushmenu-push').toggleClass('pushmenu-push-toright');

$menuLeft.toggleClass('pushmenu-open');

});

});

</script>

7. Cari kode <body>, dan ganti kode tersebut dengan kode berikut.

<body class="pushmenu-push">

8. Taruh kode pemanggil berikut dimanapun anda inginkan. Atau taruh saja tepat sebelum Tag </body>.

<div id="nav_list">Menu</div>

9. Save template anda dan lihat hasilnya.

Sekian artikel dari saya semoga bermanfaat. :)

Thx God!!!

2 komentar

Unknown

April 21, 2014 at 11:03 AM ✖

Keren nie Mas. Saya ntar mau bikin blog pribadi dengan template seperti ini, navigasi menunya slid out di sidebar sebelah kiri :)

Balas

Anonymous Yang punya blog!!

April 24, 2014 at 12:19 AM ✖

silakan saja mas hendrik :)

✔ Berkomentarlah Dengan Baik dan Sopan.
✔ Mohon Tinggalkan Komentar Sesuai Artikel di Atas.
✘ Dilarang Memasukkan Link Hidup Pada Saat Berkomentar.
✘ Komentar yang bersifat spam, sara dan ancaman akan langsung di hapus.

Membuat Menu Sidebar Tampil SlideOut Pada Blog

2 komentar

Popular Posts

Labels