Cara buat menu navigasi Slide Out

Masih terus memperbanyak jumlah koleksi menu navigasi. Menu ini bukan termasuk jenis drop down melainkan hanya sekedar navigasi biasa. Tapi menu ini memiliki kelebihan tersendiri, sebab menu ini tampil mengambang pada bagian samping halaman blog kita. Jadi walaupun halaman kita scroll kebawah dan keatas menu ini tetap pada posisinya dan selalu dapat terlihat. Boleh dibilang menu ini sangat praktis dan bisa kita gunakan sebagai menu tambahan yang tidak memerlukan banyak tempat, tanpa harus mengganggu pandangan pengunjung yang lagi baca artikel kita.

Lebih bagus lagi karena menu ini hanya menggunakan fitur Css dan beberapa Html, tanpa menggunakan javascript juga jQuery. Sehingga menu ini akan bekerja lebih ringan.

LIHAT DEMO

OK... bila anda berminat memasang menu navigasi Slide Out ini, silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

• Berikut kode Css, bila menu ditampilkan disebelah kanan :

<style type='text/css'> ul#navigation-slide-out-kanan { position: fixed; margin: 0px; padding: 0px; top: 100px; right: 0px; list-style: none; z-index:9999; } ul#navigation-slide-out-kanan li { width: 100px; } ul#navigation-slide-out-kanan li a { display: block; margin-left:80px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; } ul#navigation-slide-out-kanan li a { display: block; margin-left:80px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:10px 0px 0px 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-top-left-radius: 10px; -khtml-border-bottom-left-radius: 10px; -khtml-border-top-left-radius: 10px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; opacity: 0.6; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation-slide-out-kanan li a:hover { display: block; margin-left: -2px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:10px 0px 0px 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-top-left-radius: 10px; -khtml-border-bottom-left-radius: 10px; -khtml-border-top-left-radius: 10px; -moz-box-shadow: 0px 3px 3px #000; -webkit-box-shadow: 0px 3px 3px #000; } ul#navigation-slide-out-kanan .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7YEb_6-HSxRkOLt2OtJzyjRzPjiEzZvabFfM3kaswqPJrAY-AFpRB8TQ7kej9vxrb9eFtLhVVuaCw3VaUlQAZ9ZIZU0j6df2NVPiSncHn7nUjyNtWd58ZTcNff_B9-DlVltDhMWhfOBDa/s104/home.png); } ul#navigation-slide-out-kanan .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXt5IW5-oQCnyGIXyLULQAlQxWA8JL7H8My_ezLUv25GgZKxvErLPlUADSfW8FxHEamOBZHLL5Ggjx9iRpDoOFJLTVNF3dfWZjQjhYuVhFSTZdl7iPtiMp4uBx8WwFw90NN-4s9AnboDX9/s104/id_card.png); } ul#navigation-slide-out-kanan .news a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrfWAU28eoew3INhTZ-R55sQX_HFjAe73-g66km7KP3cgf7YCO7B6pTEftJJL6ypohhzkSIIgP1H4PXroibAtU-7u1p87BMD0cAQKVj_HTawLZJ-g4QvumAkNYA64qJW0tsI69ZjdMuoy/s104/promotion_new.png); } ul#navigation-slide-out-kanan .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisoM_gWilfK0GkMNaDAhZJMaJQMpNZqhRuiAsJQySGFMmE115zal1FGJ2j4sbvCPFe5tchC4tziHEfj4bVLHxz4z6_Wtkz9Gy0eYk0fez8HOmTMquVdIzm_LiX9py7BLAus2HNZ6ArSEfV/s104/rss.png); } ul#navigation-slide-out-kanan .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_N7PBpVu9hhGrUykyNxxN5YFL3vB_tkmppRUpkWjjVvmBQmQJdaJcxklP_rf-P977cQbuC_xtd4WyHKT863gNo3zlo99ymgjcHsMiDNa2Ik1dHubFd6daQOZcmcvRgek7OqLLMuVa6fIR/s104/mail.png); } </style>

• Berikut kode Css, bila menu ditampilkan disebelah kiri :

<style type='text/css'> ul#navigation-slide-out-kiri { position: fixed; margin: 0px; padding: 0px; top: 100px; left: 0px; list-style: none; z-index:9999; } ul#navigation-slide-out-kiri li { width: 100px; } ul#navigation-slide-out-kiri li a { display: block; margin-left: -82px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; } ul#navigation-slide-out-kiri li a { display: block; margin-left: -82px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; opacity: 0.6; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation-slide-out-kiri li a:hover { display: block; margin-left: -2px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; -moz-box-shadow: 0px 3px 3px #000; -webkit-box-shadow: 0px 3px 3px #000; } ul#navigation-slide-out-kiri .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7YEb_6-HSxRkOLt2OtJzyjRzPjiEzZvabFfM3kaswqPJrAY-AFpRB8TQ7kej9vxrb9eFtLhVVuaCw3VaUlQAZ9ZIZU0j6df2NVPiSncHn7nUjyNtWd58ZTcNff_B9-DlVltDhMWhfOBDa/s104/home.png); } ul#navigation-slide-out-kiri .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXt5IW5-oQCnyGIXyLULQAlQxWA8JL7H8My_ezLUv25GgZKxvErLPlUADSfW8FxHEamOBZHLL5Ggjx9iRpDoOFJLTVNF3dfWZjQjhYuVhFSTZdl7iPtiMp4uBx8WwFw90NN-4s9AnboDX9/s104/id_card.png); } ul#navigation-slide-out-kiri .news a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrfWAU28eoew3INhTZ-R55sQX_HFjAe73-g66km7KP3cgf7YCO7B6pTEftJJL6ypohhzkSIIgP1H4PXroibAtU-7u1p87BMD0cAQKVj_HTawLZJ-g4QvumAkNYA64qJW0tsI69ZjdMuoy/s104/promotion_new.png); } ul#navigation-slide-out-kiri .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisoM_gWilfK0GkMNaDAhZJMaJQMpNZqhRuiAsJQySGFMmE115zal1FGJ2j4sbvCPFe5tchC4tziHEfj4bVLHxz4z6_Wtkz9Gy0eYk0fez8HOmTMquVdIzm_LiX9py7BLAus2HNZ6ArSEfV/s104/rss.png); } ul#navigation-slide-out-kiri .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_N7PBpVu9hhGrUykyNxxN5YFL3vB_tkmppRUpkWjjVvmBQmQJdaJcxklP_rf-P977cQbuC_xtd4WyHKT863gNo3zlo99ymgjcHsMiDNa2Ik1dHubFd6daQOZcmcvRgek7OqLLMuVa6fIR/s104/mail.png); } </style>

8. Selanjutnya cari lagi kode di bawah ini atau yang mirip dengan kode ini :

</body>

9. Copy kode dibawah ini dan paste sebelum kode </body>:

• Berikut kode Html, bila menu ditampilkan disebelah kanan :

<ul id="navigation-slide-out-kanan">
 <li class="home"><a href="ULR HALAMAN/ARTIKEL" title="Home"></a></li>
 <li class="about"><a href="ULR HALAMAN/ARTIKEL" title="About"></a></li>
 <li class="news"><a href="ULR HALAMAN/ARTIKEL" title="news"></a></li>
 <li class="rssfeed"><a href="ULR HALAMAN/ARTIKEL" title="Rss Feed"></a></li>
 <li class="contact"><a href="ULR HALAMAN/ARTIKEL" title="Contact"></a></li>
</ul>

• Berikut kode Html, bila menu ditampilkan disebelah kiri :

<ul id="navigation-slide-out-kiri">
 <li class="home"><a href="ULR HALAMAN/ARTIKEL" title="Home"></a></li>
 <li class="about"><a href="ULR HALAMAN/ARTIKEL" title="About"></a></li>
 <li class="news"><a href="ULR HALAMAN/ARTIKEL" title="news"></a></li>
 <li class="rssfeed"><a href="ULR HALAMAN/ARTIKEL" title="Rss Feed"></a></li>
 <li class="contact"><a href="ULR HALAMAN/ARTIKEL" title="Contact"></a></li>
</ul>

10. SIMPAN TEMPLATE

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Judul: Cara buat menu navigasi Slide Out; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara hanya menampilkan judul posting saja pada halaman depan blogUpdate kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat te ... readmore
• CSS PaddingProperti CSS padding berfungsi untuk mengatur jarak antara  elemen dengan isi elemen, misalnya mengatur posisi teks yang ada didalam border, tabel dll. Seperti ... readmore
• CSS BackgroundFitur dari css Background berfungsi untuk memberi efek latar belakang suatu elemen. Beberapa properti dan kelebihan dari fitur ini diantaranya kita bisa memberi efe ... readmore
• Cara membuat background warna gradasiUntuk membuat background dengan warna gradasi, kita tidak perlu lagi menggunakan gambar sebagai backgroundnya. Tapi sekarang kita bisa menggunakan salah satu dari f ... readmore
• Cara membuat gambar melayangCara membuat gambar melayang menggunakan properti float, properti float sangat sering digunakan untuk gambar. Dengan Properti float, sebuah gambar bisa dibuat melay ... readmore