1. Login ke akun blogger.
2. Masuk menu Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu paste di atas kode
]]></b:skin>
kemudian Simpan Template.div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFvVR1zDcB1BS9uoSU7locOrqYcvOo2Ja7Vfua3d2y1lsJ8FvD3JJwuRY03ygmOsorl2o8I9OTgH_uF5X5kaMQ72lgvIOKt76RIj8Ao2BlKb2ma0xw8alWWKL4K6APACbech7mhSaCh8/h120/bg1.gif); border:1px solid #000; font-size:0; } div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQtFhc0nC4ybRRUIi0b9m_JdCJR3nq41LrAf3uwSOiK0lhgnyXPE9dWY1MOI7wmZcJlZ0glHyE8JWcnQ_sG9tbuk64VYwK6jGWGPgGKbz-V8KT4ZpQ__W8l0oxt4SwUVocGLZ8akYF3ZI/h108/bg.gif); color:#fff; text-decoration:none; font: bold 12px Arial; line-height: 32px; } div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; } div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }4. Lalu langkah selanjutnya untuk menampilkan Menu Navigasi Horisontal di Blog caranya copy kode berikut ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut didalamnya.
<div class='redmenu'> <a expr:href='data:blog.homepageUrl' class='current'>Home</a> <a href='http://mas-andes.blogspot.com'>Menu 1</a> <a href='http://mas-andes.blogspot.com'>Menu 2</a> <a href='http://mas-andes.blogspot.com'>Menu 3</a> <a href='http://mas-andes.blogspot.com'>Menu 4</a> <a href='http://mas-andes.blogspot.com'>Menu 5</a> <a class="end"> </a> </div>Keterangan:
Ganti http://mas-andes.blogspot.com dengan URL label blog anda.
5. Langkah terakhir klik Simpan, maka selesai dan seperti ini nanti hasilnya dari Cara Membuat Menu Navigasi Horisontal Blog.
Atau apabila ingin menggunakan Menu Navigasi Horisontal Blog dengan warna lain seperti yang ada dibawah, maka langkah-langkah penerapannya seperti pada yang sudah tertera di atas. Berikut ini live demo beserta source kode menu navigasi horisontal blog.
CSS*
#bluemenu { border: solid 1px #39F; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiRXNXmcKPHWtkF8D2lq3DoNuluUvnITkI2EABOHnIJfHFzew-a3xRMozLAOMGJa53Vlw_G-LPNQdldQWBDRSUY8iyZ7l7hUiiSgM1q4LCYKU5xn-EIug4XEOdlrTB8nBiq9PssJF2u28/h120/bluebg.gif) repeat-x; } #menublues{ font-size:0; } #menublues ul, #menublues li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; } #menublues a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSj0Cq8CO8NZoQb53dbslYO8n6ZGh4gTWWt-5SdxdR-kFcXFnXm8FVC8eZz_A5ewUP2ppP2pU-D7ZxKUF6aMkCaQJF7vEMy0vCB2S6dmRadSHj3Q4gr-kg66Xep-U7WKJB5PLlpS9Q4x8/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; } #menublues a:hover, #menublues a.current{ background-position: 0% -60px; color: #fff; } #menublues a.end{ width:2px; padding-left:0;padding-right:0; }HTML*
<div id='bluemenu'> <div id='menublues'> <ul> <li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li> <li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li> <li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li> <li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li> <li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li> <li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li> <li><a class='end'> </a></li> </ul> </div> </div>
CSS*
#greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBfjqa3sL2JuYSgm5p1PTnEStz4D7qI_9B2F_4Y9LQ5p5em07_G6daKszuOLTiPyu91YXHuDg2OQUZEPMEAAd4GU3QXXpLT-BVyE-2ZakhXCF93EguVFzp_O0NBE7KOH03H4kr4Zf-25Q/h120/greenbg.gif) repeat-x; } #menugreen{ font-size:0; } #menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; } #menugreen a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8oYjU8652H2EmQUZ9B0apCRY4ib6kpNUbg2AEnxXodfWCrP0RPLJYHpQ5YPmcHBiidnvp9ZQqSsO5d2Mzra-qGu7uTvFhn6Kp4DmgW2bnbtGhOPgXgiIckeIrx-Myamwkd3B2KBzgt9w/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; } #menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; } #menugreen a.end{ width:2px; padding-left:0;padding-right:0; }HTML*
<div id='greenmenu'> <div id='menugreen'> <ul> <li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li> <li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li> <li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li> <li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li> <li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li> <li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li> <li><a class='end'> </a></li> </ul> </div> </div>
0 komentar:
Posting Komentar