Kali ini kita akan membuat page navigasi horizontal di blog, berikut ini contohnya seperti 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://info-nyuzz.blogspot.com/‘ rel=’dofollow’>Home</a></li><li><a href=’http://info-nyuzz.blogspot.com/search/label/Streaming‘ rel=’dofollow’ target=’_blank’><span style=’font-weight: bold;’>Tv Online</span></a></li><li><a href=’http://info-nyuzz.blogspot.com/search/label/Romy%20Rafael‘ rel=’dofollow’ target=’_blank’><span style=’font-weight: bold;’>Romy Rafael</span></a></li><li><a href=’http://info-nyuzz.blogspot.com/search/label/Hypnosis‘ rel=’dofollow’ target=’_blank’><span style=’font-weight: bold;’>Hipnotis</span></a></li><li><a href=’hhttp://info-nyuzz.blogspot.com/label/Tips%20Ngeblog‘ rel=’dofollow’><span style=’font-weight: bold;’>Tips Ngeblog</span></a></li><li><a href=’http://info-nyuzz.blogspot.com/2010/10/chat-room.html‘ rel=’dofollow’>Chatting Area!</a></li><li><a href=’http://info-nyuzz.blogspot.com/2001/01/daftar-isi-fantasy-blog.html‘ rel=’dofollow’>Daftar Isi</a></li</ul></div>

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