Cara Membuat Beautiful Slide Out Navigation Di Blog

 

Mohon maaf sebelumnya kepada pengunjung tetap blog ini karena dalam 2 hari kemari saya tidak berkesempatan untuk membagi sedikit informasi kepada anda. Untuk menebus semua itu kali ini saya akan share pada anda tips blogger yang saya rasa anda pasti menyukainya. Pokok bahasan kita kali ini yaitu mengenai bagaimana " Cara Membuat Beautiful Slide Out Navigation Di Blog ". Mari langsung ke TKP.

Step 1 :

• Pertama login ke blog anda.
• Selanjutnya masuk ke dasbord pilih rancangan => edit Html, cari code "]]></b:skin>"
• Copy dan paste code berikut ini di atas code "]]></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/AVvXsEjz4rbEYXbWQP6YoQoZeAaUmlgIFqwU1_9WGKH-ZmTAQo8734j9PKR8wfSnd2g5Klw33NA1YxEhz1bGcP6bwRFLEcaWq48RU5_yAIzKb5M2Uvu9OruUqnFHcRyHVBn9tGSOSMYz-nDnn3w/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlmKniqPceXAWW9gpV8pRBQRYhAiascYDlALg2SWbC_ElDAYyIFo69ZO9qF9s6YDHDxmn2t3LI-M3lyxIt-le25BmLDQpdq6E0SYjI27cIUNzqFfCFP6G2IRIAEK5EcprQQgWoyjdX_Z4/s1600/id_card.png); } ul#navixed .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_l16RQ0Vg9wZVQ70AceHmmYjSMF4-IuMmHdu_r8yc18sL-6gSZYYOEvUtTX3p0XZnPJLsYqp3Gyo-hhjWwzEgkJ1sKLDNYM1h2_QhyYg5ov6psFxbWq98i1MHuipjKOj7oKQm4Iro2IE/s1600/search.png); } ul#navixed .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-H46RYS90EtSHhKWXNLyRynyh6GyGXmAjj5bWvcuuNZOU3TsCmOWboclU8ZK9F1e-alS-o6RlAu2Ku0PriaOIuAHUsTeNdKHTHpKuDtdWa20uAxvL5ptBBguCiBOf1thUNosK0ktWHTQ/s1600/ipod.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdnULjbx-S_j_pa1gaiV0zOOtuoP8mPlTMArm2baqzNJo601TIt8dC5DClvhpx2QyhGHN0seuQtT06nR8SphjQXWfn21wpQeRcBw4m5YeKU02hDZST-OSO_YqPo-h_QSjGDB6iSh8FAaU/s1600/rss.png); } ul#navixed .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsknJPxOSS-HqZRQU-Ym5V1vWCUNKD5sMWpSwMQXiBJr1SIipn4MLrpJvNcG_OWn_roGKpgp0_wJu1ZlAYQh_Qx7MCmeDxgMvzMyDFc-_UZVaqquCErYV1Q7PAom3WCDuW7HckJn5VqOc/s1600/camera.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Z0OUs2tjZ4bB1gEEfXXi9lh5_EdxosPs1WqqVZ2t43EiujCalCh0TzpGQQxXn_ZvHE9e__y3r8mpFWYAO8bsHtXg57Xoy6WNN-klNM0EIn8NR3Fm7uyfaWIH8-FxOxBzHvvo3TH6Dpo/s1600/mail.png);

Step 2 :

• Copy dan paste code berikut ini di atas code "</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; $('#navixed a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navixed > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script> <br/>

Step 3 : 

• Untuk memanggilnya copy dan paste code berikut ini di atas code "<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>

• Finally,save as untuk menyimpan and melihat hasilnya.

Keterangan :

• Silahkan ganti code "#" dengan link yang akan anda inginkan.