29.3.10

Membuat top menu di blogger

  • Pin It!

Kebetulan template yang saya gunakan sudah memiliki top menu. Sebenarnya, bisa saja kita membuat top menu pada blog yang belum memilikinya.

Sebelum Anda mengikuti langkah-langkah di bawah ini, sebaiknya salin dulu semua kode ke notepad untuk menyesuaikan dengan template Anda, baik ukuran, warna, dan sebagainya. Kalau sudah, silakan ikuti langkah di bawah ini.

  • Salin kode berikut lalu paste di atas ]]></b:skin>.

/* navbar

================== */

#bg_nav {

background: #0e3300;

width: 770px;

height: 29px;

font-size: 11px;

font-family: Arial, Tahoma, Verdana;

color: #caf99b;

font-weight: bold;

margin: 0px auto 0px;

padding: 0px;

border-top: 1px solid #0e3300;

border-bottom: 1px solid #0e3300;

overflow: hidden;

}

#bg_nav a, #bg_nav a:visited {

color: #FFFFFF;

font-size: 11px;

text-decoration: none;

text-transform: uppercase;

padding: 0px 0px 0px 3px;

}

#bg_nav a:hover {

color: #FFFFFF;

text-decoration: underline;

padding: 0px 0px 0px 3px;

}

#navleft {

width: 440px;

float: left;

margin: 0px;

padding: 0px;

}

#navright {

width: 200px;

font-size: 11px;

float: right;

margin: 0px;

padding: 6px 5px 0px 0px;

}

#navright a img {

border: none;

margin: 0px;

padding: 0px;

}

#nav {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav a, #nav a:visited {

background: #0e3300;

color: #FFFFFF;

display: block;

font-weight: bold;

margin: 0px;

padding: 8px 15px 8px 15px;

border-left: 1px solid #000000

}

#nav a:hover {

background: #729e51;

color: #FFFFFF;

margin: 0px;

padding: 8px 15px 8px 15px;

text-decoration: none;

}

#nav li {

float: left;

margin: 0px;

padding: 0px;

}

#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 150px;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #729e51;

width: 160px;

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #000000;

border-left: 1px solid #000000;

border-right: 1px solid #000000;

}

#nav li li a:hover, #nav li li a:active {

background: #0e3300;

padding: 7px 30px 7px 10px;

}

#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}

#nav li:hover ul {

left: auto;

display: block;

}

#nav li:hover ul, #nav li.sfhover ul {

left: auto;

}

clip_image002

  • Salin kode di bawah ini lalu paste di bawah widget id='Header1'. Setiap template bisa berbeda. Jika tidak ditemukan, cari yang mirip secara manual.

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://www.sudarma.info/'>home</a></li>
<li><a href='http://facebook.com/sudarma.sopian'>My Facebook</a></li>
<li><a href='http://templates.sudarmaster.com/'>Free Template</a></li>
<li><a href='http://blogkuring.com/'>Blogkuring</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://www.sudarma.info/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>

    </div>

</div><!-- akhir bg_nav -->

clip_image004

  • Klik SAVE TEMPLATE.

0 komentar:

Jangan asal komentar, ya...

Mohon isi komentar ini sesuai dengan topik yang diberikan. Jika ada pertanyaan, mohon menyantumkan alamat email yang valid, karena saya tidak akan menjawab di blog ini. Jawaban pertanyaan akan saya balas ke email.
"Oh ya, Anda ingin belajar bikin web hanya dengan 4 langkah mudah? Saya rekomendasikan belajar di sini. Khusus pemula & langsung praktek online."
Terima kasih.