Menu navigasi horizontal
ini bisa ditambahkan pada blog anda jika pada blog anda belum memiliki,
menu navigasi horizontal ini akan mempermudah dan memperindah tampilan
blog anda dimata pengunjung, penambahan menu ini disarankan bagi blog
anda yang belum memiliki navigasi horizontal.
seperti apa menu navigasi horizontal
dengan CSS menu navigasi horizontal ini biasanya terletak tepat dibawah
element header, anda bisa melihat pada tampilan blog ini! atau bisa
langsung melihat demo menu navigasi yang akan dibuat disini, nah untuk menambahkan menu tersebut anda bisa menggunakan kode/script punya saya dibawah ini :
Cara membuat navigasi horizontal dengan CSS:
1. Login ke blogger
2. Klik Rancangan
3. Klik Edit HTML
4. Carilah kode ]]></b:skin> kemudian letakkan CSS berikut tepat diatasnya (tekan Ctrl + F untuk memper mudah pencarian)
ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5lVaxfz_VB3ozooiEdXhPp56RupD1TZXQwYmzQs4HBZ0oZeeXLrsSMGpynX4GodBnYm7Cy5AZ-4-BNoruiA51o9MmuGsr7bjbB1x3BJ-sNTyiDMjB2E8ZGXN0oxE7zIm1s4RuyASekGP9/s320/OFF.gif") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:1px solid #74b0c6;
border-top:1px solid #74b0c6;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;}
ul#menu li a{
display:block;
float:left;
color:#6d7078;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhITG3zurSFW_9NWW56zEvgKi2jibchaUrGHkv2DQblgB-B19FmlBBX8KYIbAvrCBri0HQcwQ-ZR7ChSna0g0GNs4je0JD4KNW5TGsc7AcGqegFbulGGxEOAitWDpBskw4YKpErKF4RX_pZ/s320/DIVIDER.gif") no-repeat top right;
}
ul#menu li a:hover{
background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB6BqjlfM7aVNFZVostv0YxmaqIP6P5BzvPveGvdsUMF4vnqD99oJQbwHjkO6JuCEtzWziGG4LMYjfpiF0rioJWLW3-UdmgbV43OICjjpOXGpP8PK_RV4IYz4jmL-6upaubOctDkD_-aRK/s320/HOVER.gif") no-repeat top right;
}
5. Selanjutnya tuju bagian bawah cari kode seperti dibawah ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
6. Pastekan kode berikut tepat di bawah kode tadi "Langkah 5" :
<ul id='menu'>
<li><a href='http://u-sup.blogspot.com' title=''>Home</a></li>
<li><a href='http://templatemaxs.com' title=''>Free templates</a></li>
<li><a href='http://spot-id.co.cc' title=''>Spot-id</a></li>
<li><a href='http://zonablogger.com' title=''>Artikel Directory</a></li>
<li><a href='http://www.techradar.com/' title=''>Techradar</a></li>
</ul>
<li><a href='http://u-sup.blogspot.com' title=''>Home</a></li>
<li><a href='http://templatemaxs.com' title=''>Free templates</a></li>
<li><a href='http://spot-id.co.cc' title=''>Spot-id</a></li>
<li><a href='http://zonablogger.com' title=''>Artikel Directory</a></li>
<li><a href='http://www.techradar.com/' title=''>Techradar</a></li>
</ul>
7. Rubahlah teks warna merah dengan URL milik anda
8. Jika sudah simpan template
8. Jika sudah simpan template
Untuk menyesuaikan dengan tampilan blog anda rubahlah gambar dengan
gambar yang sesuai warnanya dengan blog anda dibawah ini contoh
gambarnya silahkan simpan dan edit menggunakan PhotoShop sesuaikan
dengan warna tampilan blog anda, Kemudian uploadlah gambar tersebut,
jika sudah diupload rubahlah teks berwarna hijau diatas "langkah 4" dengan URL gambar yang baru saja anda upload.
Tidak ada komentar:
Posting Komentar