Cara Membuat Page Navigasi Horizontal di Blog!

Sabtu, Januari 01, 2011Fachrin Aulia Rafaelmemiliki 2 komentar.

Kali ini ane akan menshare cara membuat page navigasi horizontal di blog, bagaimana contohnya? contohnya seperti yang dibawah ini:

 

Nah itulah yang dinamakan dengan page navigasi horizontal, menarik bukan? jadi bagaimana cara membuat page navigasi horizontal ini? gampang aja gan, ikutin cara ane yang dibawah ini:

• Login Ke Blogger
• Rancangan lalu EDIT HTML
• Masukkan kode CSS ini tepat sebelum tag </head>

<style>.navcontainer{background:#030;height:36px;padding:0 10px}#nav{height:36px;margin-bottom:1px}#nav li a,#nav li a:link{color:#fff;display:block;font-size:12px;font-weight:700;margin:0 3px;padding:12px 15px;text-decoration:none;text-shadow:0 1px 0 #1e1d1d;text-transform:uppercase}#nav li a:hover,#nav li a:active{background:#930;display:block;text-decoration:none;text-shadow:0 1px 0 #242323}#nav li.current-cat a{background:#360;color:#fff;text-shadow:0 1px 0 #242323}#nav,#nav ul{line-height:1;list-style:none;margin:0;padding:0}</style>

• Lalu Masukkan Kode HTML berikut disetelah tag <b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'/> (atau cari tag yang hampir sama dengan ini) karena disetiap template berbeda:

<div class='navcontainer'><ul id='nav'><li class='current-cat'><a href='http://www.fachrin.tk/' rel='dofollow'>Home</a></li><li><a href='http://www.fachrin.tk/search/label/Streaming' rel='dofollow' target='_blank'><span style='font-weight: bold;'>Tv Online</span></a></li><li><a href='http://www.fachrin.tk/search/label/Romy%20Rafael' rel='dofollow' target='_blank'><span style='font-weight: bold;'>Romy Rafael</span></a></li><li><a href='http://www.fachrin.tk/search/label/Hypnosis' rel='dofollow' target='_blank'><span style='font-weight: bold;'>Hipnotis</span></a></li><li><a href='http://www.fachrin.tk/search/label/Tips%20Ngeblog' rel='dofollow'><span style='font-weight: bold;'>Tips Ngeblog</span></a></li><li><a href='http://www.fachrin.tk/2010/10/chat-room.html' rel='dofollow'>Chatting Area!</a></li><li><a href='http://www.fachrin.tk/2001/01/daftar-isi-fantasy-blog.html' rel='dofollow'>Daftar Isi</a></li</ul></div>

• Silahkan rubah tulisan dan link diatas terserah dengan keinginan agan jika diinginkan.
• Save TEMPLATE.

Sumber: http://www.fachrin.tk/2011/01/cara-membuat-page-navigasi-horizontal.html#ixzz1GGPyFGFp