Minggu

Membuat Menu Navigasi Slide Out

Membuat Menu Navigasi Slide Out

ARTIKEL TERKAIT:


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.

jika berminat, Silahkan ikuti langkah -langkah bertikut :
1. Login ke blogger kamu.
2. Klik Template
3. Klik Edit HTML.
4. Download Template Lengkap (back-up Template)  terlebih dahulu agar template aman, bila terjadi kesalahan tinggal di ulang kembali.
5. Cari kode </head>
6. Copy kode di bawah ini dan taruh 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/AVvXsEi0rVzQ1C8LzwHVrIKnDF1xsFUK9VQeN_4T-EmiRIoGkbnNT5nCq6piCux6mX75L7wBAl6rL6_vIV4Eu2A-w3-hQJ-92I9B7vByZma5bnFQUaC0KCrNzBdQUFtbynakC4Iy6DRXZbqY4CVc/s104/home.png);
}

ul#navigation-slide-out-kanan .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ8AIDHUO4R7RbQZMkJNWq4eRMl7OUn0j9zcEPcSWrGTHu0ebd5wPDA9QnbOCahILz1AajAfSp8aISzee02WKPpuo8RtUYhvWIuJ4c6weB-HMFAyWt1e5ZPO4xgAOBzuZm7QSh3HZeWlOl/s104/id_card.png);
}

ul#navigation-slide-out-kanan .news a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqziY0bwzXwXemF8nqCZtgICMwAPhZiM6sI87SQyhP3IRSFY5z_mWM05db10d68axACRvlrEspWxz-RwtwV4_uCC0G22EcALTsK0Qh6JCmvqf8_b9Wzlfid0iBG0oa12QzI_utoZQIZceI/s104/promotion_new.png);
}

ul#navigation-slide-out-kanan .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsgF53xXw5loIR-h9C_RRMDMe_mite3DUSJlAIOy_EaWSPSaUA43Qa79ZDLTWHvMf50mCnlKAbaEG-0ZVxj_z4sdwhEOijc3EKktnkIrxO2T3A6jwqUCzjWWbRGY-FTdpO3NK8Zg-zfK8I/s104/rss.png);
}

ul#navigation-slide-out-kanan .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkzqXjB3BvCfjmAXmJ14iyHHUg1IqSia8JYNVmp6DeXG7cxzLO76Z6scEL3UEtE5ZAUg_34KPKtO8XqKyRktso6jMZKv9FTWr04R2-JWPQfzY9aWL88L0gw9L_j2964ruT225frsYAd4v/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/AVvXsEi0rVzQ1C8LzwHVrIKnDF1xsFUK9VQeN_4T-EmiRIoGkbnNT5nCq6piCux6mX75L7wBAl6rL6_vIV4Eu2A-w3-hQJ-92I9B7vByZma5bnFQUaC0KCrNzBdQUFtbynakC4Iy6DRXZbqY4CVc/s104/home.png);
}

ul#navigation-slide-out-kiri .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ8AIDHUO4R7RbQZMkJNWq4eRMl7OUn0j9zcEPcSWrGTHu0ebd5wPDA9QnbOCahILz1AajAfSp8aISzee02WKPpuo8RtUYhvWIuJ4c6weB-HMFAyWt1e5ZPO4xgAOBzuZm7QSh3HZeWlOl/s104/id_card.png);
}

ul#navigation-slide-out-kiri .news a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqziY0bwzXwXemF8nqCZtgICMwAPhZiM6sI87SQyhP3IRSFY5z_mWM05db10d68axACRvlrEspWxz-RwtwV4_uCC0G22EcALTsK0Qh6JCmvqf8_b9Wzlfid0iBG0oa12QzI_utoZQIZceI/s104/promotion_new.png);
}

ul#navigation-slide-out-kiri .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsgF53xXw5loIR-h9C_RRMDMe_mite3DUSJlAIOy_EaWSPSaUA43Qa79ZDLTWHvMf50mCnlKAbaEG-0ZVxj_z4sdwhEOijc3EKktnkIrxO2T3A6jwqUCzjWWbRGY-FTdpO3NK8Zg-zfK8I/s104/rss.png);
}

ul#navigation-slide-out-kiri .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkzqXjB3BvCfjmAXmJ14iyHHUg1IqSia8JYNVmp6DeXG7cxzLO76Z6scEL3UEtE5ZAUg_34KPKtO8XqKyRktso6jMZKv9FTWr04R2-JWPQfzY9aWL88L0gw9L_j2964ruT225frsYAd4v/s104/mail.png);
}

</style>

Selanjutnya cari kode </body>
Copy kode dibawah ini dan paste sebelum kode </body>:

bila menu ditampilkan disebelah kanan :

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

bila menu ditampilkan disebelah kiri :

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

Lalu simpan Template.

Selamat mencoba dan Semoga bermanfaat.
Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.

1 komentar :

  1. ANANTA12:25 PM

    makasih atas gadgetnya dik,, saya izin pakai yah..salam

    BalasHapus

Komentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini,

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Klik Link Ini Untuk Berlangganan Artikel Kumpulsuka.

Langganan: Posting Komentar (Atom)

kumpul suka