Slide Out Navigatiaon With Apple Icon Style

Untuk melengkapi tutorial tentang Navigation Menu kali ini saya ingin share kembali dan masih di blog yang sama dalam judul dan articles berbeda-beda, ehm kali ini saya akan membahas tentang  Slide Out Navigatiaon With Apple Icon Style. Nah itulah yang akan kita bahas dan untuk examplenya sendiri, esh maksudnya untuk contoh dari menu ini sobat bisa lihat gambar berikut :

Seperti itulah contoh menu Slide Out Navigatiaon With Apple Icon Style yang akan saya bahas kali ini, udah pahamkan? kalo belum paham ni saya sediakan demonya, klick tombol di berikut untuk menuju demo.

Demo

Sekarang mari kita bahas cara memasang Slide Out Navigatiaon With Apple Icon Style di Blogger sobat.

1. Masuj ke akun blogger sobat.

2. Pada Dasbor klick ➨ Rancangan ➨ Edit HTML.

3. Centang Expand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang sobat copy kode CSS di bawah ini dan paste atau letakkan di atas kode tadi.

.navigation{

position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim1cw5hdg98_Ya3-BkC4exOGhvA0YnisAjYEV0BmR-kGQMf72d17sophnr7a2oBskM6rISMKLdK7ViGPfJ0USGLS-LQws9CV90XY30k4FUsRH6Z2Hztif5bX01Z8TZWSXkpu3vaFq2lCUN/s400/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
text-shadow: 0 1px 1px #fff;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.ipod{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8luBcQIrcu0mIVjwnSwPHO1ShtIQ9NbPqAZUi9pCAv95jcQcETRfalE-3o65wibEQhIi42vm9KepNVZ8OjkRNS7SKh1Uc5IZwxkzRc3BnSa5xG1l5zrxU7JJMqLAXj6zwjmFooVxKVV9I/s400/ipod.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9bOJX-Yvw8wHO2JBl7NvfuQMnJ_eedFzZzPNDBh5u_LMlML87IarWa1KokVrTzYh2yr-g8yiwouJMDxCZaLIIzhheGefrnqZAkNXosnmvdE0W-AOd35EStbv1uhdFyTs0g0LoedhxjaKh/s400/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7uV1kkPr5NiYqLDw-sSS_CM5qNkk7wElOriwGrLHcikfmOg_1N0oBlXpZxHfDvdztgizySYjYTHAqOJuMWdhjazO4hUXwjXwWbKttxS-EJLRdOhL5dPgMqo8DA_qstSMkMieO4oA4Mt8o/s400/television.png);
left:293px;
}
ul.menu li span.monitor{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQN1jouMg4xQyMiA6__Kix6_WptOEC0_OT8oDeF-NwAKMsXC-qduZRNTfvshDHYhUuF28JuCwz0NbM0Z-9oOovKcZeURBKQOB5LxjV4-cZt_wMjlMpLEazUTST_KdPYO3c6FG9H-CmO_b/s400/monitor.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovdJklUQKoOZV_aPzj1XZERdYZVJkp6wpdT5kWsLgC0lNQwE_rih82VV99vk6YZIrNiV4m5qLzKgIR6xi2NBzYv9m-Qi7_CPH4-52rq0oT1j1zRTOn-eUCC049j6hYbnSts-6jpFAV1_V/s400/toolbox.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTTAOlBj52pP8jUNLeyxlL2zRjCLsiRrsNpZKAoxOMmQ28QXMvh_IpQ2SXyUkG1BbHBuxqlX99CwKXjYy-GJ1gtL1CkbuTpJb0XaVh_8CbvcGO4QZDNWF4aYB-x5-G9SCqWtvztmEZrQM0/s400/telephone.png);
left:683px;
}
ul.menu li span.print{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhhwbkWyeK6e1Kq8JmozyKojF2jSPk2hOMK2H5BLOG5jBTafMYML6NLSUuZKERevElpQj1HzW5Z_hMWa_NrwDMZjlzyU07IQvUHanRbT5lOA_s0y9VX6AqX9eDnRCrGth61UuydWg_CBg/s400/print.png);
left:813px;
}

6. Selanjutnya sobat cari kode <body> lalu letakkan kode di bawah ini tepat di bawahnya.

<div class="navigation">
<ul class="menu" id="menu">
<li><span class="ipod"></span><a href="#" class="first">Players</a></li>
<li><span class="video_camera"></span><a href="#">Cameras</a></li>
<li><span class="television"></span><a href="#">TVs</a></li>
<li><span class="monitor"></span><a href="#">Screens</a></li>
<li><span class="toolbox"></span><a href="#">Tools</a></li>
<li><span class="telephone"></span><a href="#">Phones</a></li>
<li><span class="print"></span><a href="#" class="last">Printers</a></li>
</ul>
</div>

NB: Ganti tanda pagar (#) dengan url sobat.

7. Simpan template.

Sekarang lihat sendiri hasilnya.

Nah saya rasa cukup untuk kali ini, bila sobat berniat menggunakan atau copas jangan lupa komentarnya, ok.