Skip to main content

Cara Membuat Menu Navigasi Horizontal

By
Cara membuat menu navigasi horizontal - Nah sebelumnya saya sudah memposting artikel yang sehubungan, yaitu apa / mana yang disebut menu navigasi ? Sobat sudah tahu menu navigasi ... ? Jika belum baca posting ini terlebih dahulu. Nah sudah paham apa yang disebut menu navigasi ... ? Tertarik membuatnya untuk blog sobat ... ? Oke langsung ke TKP ...

1. Dasbor > Rancangan / Layout

2. Ke Edit HTML, " download template lengkap " terlebih dahulu untuk mencegah apabila terjadi kesalahan

3. Copy kode dibawah ini

/*-- Nav --*/
#nav {
width:980px;
float:center;
background:#821818 url(http://lh5.ggpht.com/_7Y9pl24WpQY/S9Ihr-pTe9I/AAAAAAAADjs/04jHwZSVwn8/red%20nav_thumb%5B2%5D.jpg) repeat-x;
height:40px;
border-top:1px solid #646464;
padding:0;
margin:10px 0 5px 0;
border: 1px solid rgb(204, 204, 204);
-moz-border-radius: 5px 5px 5px 5px
}

#nav-left {
float:left;
display:inline;
width:680px;
}

#nav-right {
float:right;
display:inline;
width:270px;
}

#nav ul {
position:relative;
overflow:hidden;
font:12px arial,verdana,trebuchet ms,Helvetica;
font-weight:700;
line-height:1.4em;
margin:0;
padding:0;
}

#nav ul li {
float:left;
list-style:none;
}

#nav ul li a,#nav ul li a:visited {
display:block;
color:#f2f2f2;
text-shadow:1px 1px 1px #222;
text-decoration:none;
margin:0;
padding:10px;
}

#nav ul li a:hover {
color:#f2f2f2;
text-shadow:1px 1px 1px #222;
background-color:transparent;
text-decoration:none
margin:0;
padding:10px;
}

4. Cari kode #main-wrapper

5. Paste kode no.3 tepat sebelum (diatas) kode #main-wrapper

Simpan ! Istirahat sejenak dahulu, jika sudah selesai istirahat kita lanjut lagi baca posting ini ...

1. Dasbor > Rancangan / Layout

2. Ke Edit HTML

3. Copy kode dibawah ini
<div id='nav'>
<ul>
<li><a href='http://caratrikblog.blogspot.com'>HOME</a></li>
<li><a href='http://caratrikblog.blogspot.com'>Tutorial Blogging</a></li>
<li><a href='http://caratrikblog.blogspot.com'>Widget Kode Warna</a></li>
<li><a href='http://caratrikblog.blogspot.com'>Widget Parse Kode</a></li>
<li><a href='http://caratrikblog.blogspot.com'>Donasi</a></li>
</ul>
</div>
4. Paste kode no.3 tepat setelah (dibawah) kode <div id='header-wrapper'>

Oh ya sedikit keterangan, jangan dipaste dulu kode no.3nya, saya mau memberi penjelasan dulu. Setiap kode <div ......> pasti akan diakhiri dengan kode </div>, kode <a ......> juga akan diakhiri </a>, jadi kode no.3 itu dipaste setelah kode akhiran kode <div id='header-wrapper'>.
Contoh : ( kode yang ada dibawah ini adalah kode dari template milik saya, jadi di template sobat pasti tidak terdapat kode dibawah ini )

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Trik Blog (Header)' type='Header'/>
</b:section>
</div>

<---- Paste kode no.3 ---->

Simpan !
Ket :
- Pada tahap kedua (setelah istirahat) kode no.3 terdapat kalimat yang berwarna merah dan biru.
- kalimat yang berwarna merah adalah link yang akan dituju
- kalimat yang berwarna biru adalah kalimat yang akan tampil

Huuh .. Pusyiang kepalanya, jelasin nih tutorial, biasanya cuma posting trik yang sederhana dan simple, tapi sekarang yang lumayan ruwet. Mungkin ada tutor yang belum jelas diatas (baru pertama posting tutor yang ribet) mohon dimaklumi kawan, dan boleh bertanya ^^ .... Sekian Cara membuat menu navigasi horizontal
Selesai
Labels:

Comments

Post a Comment

Berkomentar dengan menggunakan kalimat yang baik dan santun. Dimohon untuk tidak berkomentar SPAM, karena komentar akan dihapus!
Tips:" Berlangganan Via Email " terlebih dahulu agar komentar cepat dibalas!

Popular posts from this blog

Cara Meningkatkan Links In pada Alexa

By
Sebelumnya, ini adalah hasil copy paste. Entah cara seperti ini palsu atau nyata, tapi tidak ada salahnya mencoba. Oke, check this out .. Salam Blogger , pada kesempatan kali ini dan pada posting ini juga saya akan sedikit memberi sedikit trik untuk megoptimalkan semua static yang tertera di alexa. Jika sebelumnya saya membahas tentang cara meningkatkan links in alexa alhamdulillah di posting kali ini berkenaan dengan gimana caranya untuk meningkatkan atau menambah Link in pada alexa. alexa adalah salah satu situs yang memberikan pelayanan untuk trafik blog. Alexa dapat menghitung semua kegiatan lalu lintas blog anda, jadi dengan begitu sobat dapat mengetahui apakah blog anda sudah bagus trafiknya atau tidak. Alexa tidak hanya menghitung lalu lintas blog saja, tetapi alexa juga menyediakan widget untuk blog baik itu blogspot maupun wordpress dan alexa juga menyediakan toolbar untuk browser yang dipakai di komputer sobat. Dan ternyata banyak para blogger yang memil
24 comments
Read more

Dokumentasi Project Kontes Robot Indonesia dan Tugas Akhir

By
     Pada Kontes Robot Indonesia (KRI) 2017, tim dari Universitas Jenderal Soedirman lolos ke tahap nasional yang bertempat di Universitas Pendidikan Indonesia.      Robot Pemadam Api Berkaki yang dibangun pada tahap regional, dan yang meloloskan tim Universitas Jenderal Soedirman ke tahap nasional.      Tim Universitas Jenderal Soedirman divisi ABU usai berlomba. Pada tahap ini tim tidak berhasil lolos ke tahap nasional.       Melakukan pengkalibrasian sensor IMU (Inertial Measurement Unit). Sensor IMU merupakan gabungan dari 3 sensor lainnya, yaitu accelerometer , gyroscope , dan magnetometer. Pada penelitian yang saya lakukan hanya menggunakan sensor accelerometer yang ada di sensor IMU.       Pengujian sensor IMU dalam mengukur perubahan sudut pitch .       Pengujian sensor IMU dalam mengukur perubahan sudut roll .        Sensor IMU yang telah mendeteksi perubahan sudut, merupakan konversi dari nilai percepatan bumi yang dideteksi oleh ac
Post a Comment
Read more

Apa yang dimaksud dengan Cc dan Bcc?

By
Apa yand dimaksud dengan Cc dan Bcc? - Assalamu'alaikum! Akhir-akhir ini, saya sering membahas tentang cara mengirim email di gmail maupun yahoo!. Bukannya saya vacum dari membahas blogging , tapi saya hanya berbagi ilmu yang saya ketahui pada ilmu emailing . Karena, pastilah ada sobat-sobat di luar sana yang kurang paham akan hal emailing . Dan semoga saja, dengan membaca post ini, sobat-sobat semua bisa menjadi paham. :) Tapi tunggu sebentar, pada saat ingin mengirim pesan offline ke email lain, apakah sobat pernah melihat kata Cc dan Bcc ? Apa maksud dari kata Cc dan Bcc ? Ingin tahu? Silakan baca sampai tuntas post ini. Cc adalah singkatan dari Carbon Copy . Maksud dari Cc adalah apabila kita mengisi email pada kolom Cc , maka email tersebut akan menerima pesan yang telah kita buat dengan pemberitahuan bahwa pesan yang ia dapatkan adalah hasil salinan dari pesan yang telah kita kirimkan kepada email lain. Contoh: saya@gmail.com mengirim pesan kepada anda@gmail.com.
9 comments
Read more