Cara memasang Menu Slide Out Navigasi Horisontal Yang Menggantung Di Atas Header

Kali ini, saya akan share artikel untuk modifikasi blog anda agar lebih tampak indah dan tentunya dengan menu navigasi ini akan jauh lebih mudah untuk di gunakan oleh pengunjung/visitors, menu ini saya beri nama Menu Slide Out Navigation horizontal yang menggantung di atas header dengan efek css atau dalam bahasa kerennya Beautiful Slide Out Navigation Horizontal atau kalau diartikan kedalam bahasa indonesia artinya adalah Menu Navigasi Horizontal cantik dengan efek slide out. Pastinya lebih keren, lebih waw gitu, dan lebih lebih deh.,

Tutorial ini saya buat untuk memenuhi request dari teman2 yang ingin mempercantik blognya, tentunya menu ini ringan dan tidak terlalu menjadi beban loading di blog anda, berikut screen shoot dari Menu Slide Out Navigation horizontal yang menggantung di atas header dengan efek css :




Buat yang udah tidak sabar untuk membuat menu navigasi horizontal (Menu Slide Out Navigation) ini, silahkan ikuti cara nya dibawah ini :

siapan :
- secangkir kopi dulu, sambil nyantai.... apalagi yang internetnya lemot, sambil nontontv juga tidak apa-apa.. wkwkwkwk :))

1. Masuk ke dashboard blogger anda
2. Pilih Rancangan --> Edit HTML --> centang Expand Template Widget
3. Cari kode ]]></b:skin> dan letakkan kode CSS berikut diatasnya kode ]]></b:skin>

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
{
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#fff url(title.png) no-repeat top left;
}
ul#navixed {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navixed li {
width: 103px;
display:inline;
float:left;
}
ul#navixed li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
background-color:#000;
}
ul#navixed li a span{
letter-spacing:2px;
font-size:11px;
color:#FFF;
}
ul#navixed .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5C6fmOylLgLofMKDrE-k0LwOleKKwuEVqdQRtkiXSAmOV2UuVPEA6s90L7lQn1gvxEKQjozhkvftt-Fl36KFdz_4APS_qyo8P2LYZOTd9xTmlGMg8GramMw7bvqKd10iPAAMz6wsZwo/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr_3CvpIEPkii-5wipyCCxy7_LwGEkrZZ2OVxXsM9tGEGqgbKTn9cr9IG1gJz2o6OIAX2k9rHRO3oGUAB6qVOxn8jmGE5AjN9pyJr19VzTKhl_SnWrWVIR-WzX6ufpZZ5pVOA31GCzcis/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4f9ggQ4uSGkuSzKBzJkBMQSLBoNnbF0vHA5nGp_5vAg-PVcUcmy_JH20tqqnBDfSoe1rrPn38DL3RpEt14BQz_a_8g1TMZ15HZPtQOCeJKxeRKmc4e5Yu8cEuslHnqNoJ_08vyGO-Sc/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8QEM2cMauobyA16ZyuNOkhB8RRQa_Pq1yjWKvwQ2nsluvDMp8VKHIX9Km7b1kU4-GrlAmsWH1n3Cm9B0G4UimaSublqH6s3GK5zFFHcjhyGfJ0buBQgoTbZdfoiFLajR69EcW9GyBPcg/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeb9GJvY36ogwq7_62X-iAl-qspjofbahsUZp4uFBsGj5p3mosJl9asnhAy99VRQgob-2Yc3OfOuDIgQ36rwZXzouVgqu74e16lSfWnu846Fvd1Hwxaz2fRysRNtOxyljT8nsh9kDYK7E/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoDiKI4RTYq4IEZIZTxCjBNAsF4VMUm85wgyriVP6zt6TGrxveLupjhIFhB9uTOvn_DwFtckbjOjZJgcuzAAqLU9NfZMNy1AuRV0rF6N-8VXJwVesz0JDplWtcnTQVEdD7fZMTRC0Ui1o/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicnfgzS4eml-IjjlfYF8Vc1qBXy8fZ4Igako9Qy2hSiDfUT31B9qY1Hcp6XJ9KlK3zcXtn07kUoE0CFEhYlVtAKV6TeC4NOyS18bvL2JsF-3T3QN0LwABzve0VLi4-oUI0-R-XuMJzbXQ/s1600/mail.png);
}

Penjelasan :
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5C6fmOylLgLofMKDrE-k0LwOleKKwuEVqdQRtkiXSAmOV2UuVPEA6s90L7lQn1gvxEKQjozhkvftt-Fl36KFdz_4APS_qyo8P2LYZOTd9xTmlGMg8GramMw7bvqKd10iPAAMz6wsZwo/s1600/home.png dst. adalah icon yang digunakan dalam menu tersebut, bisa di modifikasi sesuka kamu,
  • float:left; adalah posisi peletaklan menu, jika ingin meletakannya di sebelah kanan, ganti menjadi Float:right;
  • left:10px; adalah posisi menu dari sebelah kiri atau sebelah kanan yang bisa kamu tentukan sendiri besarnya,
  • yang lainnya silahkan di analisis sendiri, saya sudah capek nulisnya...:)) hehe, komen aja dibawah kalau ingin tahu yang lainnya..
4. Jika sudah, cari lagi kode </head>, kemudian letakkan script berikut ini diatasnya kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://kangdadang.googlecode.com/files/jcolor.js'/>
<script type='text/javascript'>
$(function() {
var d=300;
$(&#39;#navixed a&#39;).each(function(){
$(this).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},d+=150);
});
$(&#39;#navixed &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-2px&#39;
},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},200);
}
);
});
</script>

Catatan :
khusus kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> merupakan kode/ script jquery, apabila dalam blog anda sudah terdapat kode tersebut, maka tidak perlu sobat memasangnya lagi,
5. Untuk menampilkan menu navigasi horizontalnya, sisipkan kode CSS berikut sebelum kode <body>

<ul id='navixed'>
<li class='home'><a href='#'><span>Home</span></a></li>
<li class='about'><a href='#'><span>About</span></a></li>
<li class='search'><a href='#'><span>Search</span></a></li>
<li class='photos'><a href='#'><span>Photos</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
<li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
<li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>

6. Selesai, selahkan di simpan dan lihat hasilnya dari Menu Slide Out Navigation horizontal yang menggantung di atas header dengan efek css yang telah anda buat


Itulah tutorial carav membuat Beautiful Slide Out Navigation Horizontal Menu, Cara Membuat Menu Slide Out Navigation horizontal yang menggantung di atas header dengan efek css, silahkan dicoba :) semoga bermanfaat, apabila ada kesulitan, bisa komentar di bawah...

Author : Prayit

Blog sederhana ini hanya untuk tempat berbagi,. Maaf buat yang merasa terganggu dengan adanya blog ini.

Share this

Related Posts

Previous
Next Post »

3 komentar

komentar
15 June 2014 at 22:26 delete

Di template saya kok gagal terus ya sob. error terus

Reply
avatar
12 July 2014 at 11:06 delete

Mungkin ada yang terlewatkan sob,, di cek lg. Mf ru on.

Reply
avatar
16 May 2015 at 19:56 delete

manhtap bikin blog jadi lebih terlihat lebih menarik, ditunggu kunjungannya giribig.com

Reply
avatar

Komentar yang menyertakan link aktif, sara, spam, iklan, akan di masukkan ke folder SPAM.