Blogodolar Tips & News

Cara Membuat Navigasi Header di Theme ProSense

Posted: 17 Jul 2010 07:02 AM PDT

Kalau membuat menu navigasi header seperti Blogodolar ini bagaimana caranya? Kebetulan saya juga menggunakan theme ProSense Grey. Begitulah pertanyaan yang saya terima dari beberapa sahabat yang menghubungi saya via email. Karena perlu penjelasan detail, maka dalam postingan ini saya menjawab pertanyaan tersebut.

Sebelumnya, saya informasikan terlebih dahulu bagaimana saya sampai bisa membuat menu navigasi header di blog ini. Padahal, bila Anda sering berkunjung ke sini, tentunya Anda melihat selama setahun terakhir header Blogodolar dibuat “apa adanya”. Hal ini karena saya belum tahu cara membuat navigasi header yang relatif baik.

Solusinya datang dari theme buatan Zaiful Anwar yaitu 579 dolar. Saya “mencomot” kode CSS navigasi theme tersebut dan “mencangkokkannya” di theme ProSense Grey.

Saya mengontak Zaiful Anwar untuk meminta ijin mempublikasikan kode CSS yang saya comot itu. Dia pun mengijinkannya sehingga saya tidak menyalahi hak cipta.

Tahapan membuat navigasi header

Navigasi header yang saya maksudkan terdiri dari menu halaman (Home, About, Kontak, dan sebagainya) dan kotak pencarian. Tahapan membuatnya seperti berikut:

1. Login ke dasbor blog Anda yang menggunakan ProSense (bisa ProSense Grey, ProSense Blue, atau ProSense).

2. Klik Editor pada fitur Appearance.

3. Tekan Ctrl+F pada papan ketik komputer Anda, lalu ketikkan navigation.

4. Akan ada kode seperti di bawah ini:

.navigation {
display:block;
margin-bottom: 20px;
}

#nav {
list-style-type : none;
text-align : center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 3.15em;
height : 40px;
}

#nav a {
margin: 0px;
width : 94px;
height : 20px;
font-weight : bold;
font-style : normal;
display : block;
padding: 0 0 10px 0;
}

#nav a:hover {
background: #000;
}

#nav li {
float: right;
list-style-type: none;
margin: 0px;
border-right: solid 1px #fff;
}

5. Blok kode di atas lalu hapus. Copy dan paste kode berikut.

.navigation {
display:block;
margin-bottom: 20px;
}

#nav {
background: #006699;
clear: both;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
color: #fff;
font-family: Arial, Tahoma, Verdana;
height: 35px;
margin: 0;
padding: 0;
font-size: 12px;
text-transform: none;
width: 980px;

}

#nav .wrap { }

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%; }

#nav li {
float: left;
list-style: none;
margin: 0;
padding: 0; }

#nav li a {
border-right: 0;
display: block;
margin: 0;
padding: 10px 15px 10px 20px;
position: relative;
text-decoration: none; }

#nav a, #nav a:visited {
background: #006699;
color: #fff;
display: block;
font-weight: bold;
margin: 0;
padding: 10px 15px 10px 20px;
text-transform: none; }

#nav a:hover {
background: #F18000;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-top: 1px solid #cccccc;
color: #fff;
height: 24px;
margin: 0;
padding: 5px 15px 5px 20px;
text-decoration: underline;
}

#nav1 {
width: 280px;
float: right;
height: 35px;
margin: -35px 10px 0px 0px;
padding: 0px 20px 0px 0px;
text-transform: uppercase;
}

#nav1 li {
list-style: none; }

.cari {

height: 35px;
font-family: Arial, Tahoma, Verdana;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px; }

#subboxcari {
background: #fff;
width: 280px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 5px 0px 0px 0px;
padding: 3px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
display: inline;
}

7. Anda bisa mengganti width, color, dan background kode di atas sehingga sesuai dengan lebar dan warna blog Anda.

8. Klik Update File.

9. Klik header.php yang ada di sebelah kanan Anda.

10. Pada bagian akhir header.php ada kode seperti ini:

</div>
<hr />

11. Arahkan kursor sebelum kode <hr/> lalu tekan enter satu kali. Copy dan paste kode berikut di atas kode <hr/> tersebut.

<ul id=”nav”>
<li><a href=”<?php echo get_settings(‘home’); ?>”>Home</a></li>
<li><a href=”http://www.blogodolar.com/about-blogodolar/”>About</a></li>
<li><a href=”http://www.blogodolar.com/contact-me/”>Kontak</a></li>
<li><a href=”http://www.blogodolar.com/sahabat/”>Sahabat</a></li>
<li><a href=”http://www.blogodolar.com/arsip/”>Arsip</a></li>
<li><a href=”http://www.blogodolar.com/tips-pemula/”>Panduan Pemula</a></li>
</ul>
<ul id=”nav1″>
<li><form id=”cari” method=”get” action=”<?php echo $_SERVER['PHP_SELF']; ?>”>
<input type=”text” value=”Pencarian…” name=”s” id=”subboxcari” onfocus=”if (this.value == ‘Pencarian…’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Pencarian…’;}” />
</form></li>
</ul>

</div>

12. Ganti alamat-alamat href di atas dengan URL halaman, postingan, dan atau kategori yang hendak Anda tampilkan di menu navigasi header.

13. Klik Update File.

14. Refresh atau tekan Ctrl+F5 tampilan blog Anda.

15. Bila berhasil, navigasi header-nya akan seperti blog ini.

Itulah cara yang saya lakukan untuk menambahkan navigasi header di theme ProSense. Sebagai catatan, kode CSS navigasi di atas bisa diganti juga dengan kode CSS navigasi header theme lain yang Anda kehendaki.

Semoga bermanfaat bagi Anda yang membutuhkannya.

Bonus ebook untuk Anda: Make Money Blogging, Adsense Secret, & SEO for Beginner

artikelotomatis.blogspot.com

Sabtu, 17 Juli 2010