Cara membuat menu Horisontal di blogger alias blogspot

Halow sahabat blogger, ketemu lagi dengan saya di blog fayescool, oke kali ini saya akan mencoba share tentang Cara membuat menu Horisontal di blogger alias blogspot, oke langsung saja langkah-langkah nya sebagai berikut:

Pertama login ke akun blogger dulu....

Kedua masuk ke rancangan......

Ketiga klik edit html.....

Keempat centang bagian Expand Widget Template....

Kelima jangan lupa di back up dulu guna antisipasi bila gagal.....

Keenam Cari kode yang mirip-mirip di bawah ini:

/* Header

-----------------------------------------------

 */

#header-wrapper {

  background: url("http://i161.photobucket.com/albums/t219/freetemplates4/silhouettes-heading.jpg") no-repeat;

  width:880px;

  height:485px;

  margin:0 auto;

  padding:0;

  text-align:left;

  }

#header {

  margin:0;

  padding:350px 0 0 78px;

}

#header h1 {

  margin:0;

  padding:0;

  font-size: 150%;

  font-weight:bold;

  line-height: 1.4em;

  letter-spacing:.2em;

  font-style:italic;

  color:#91c348;

}

#header a {

  color:#91c348;

  text-decoration:none;

  }

#header a:hover {

  color:#91c348;

  text-decoration:underline;

  }

.descriptionwrapper p {

  margin:0;

  padding:3px 0 10px 0;

  line-height: 1.3em;

  font-style: italic;

  font-weight:bold;

  font-size:.8em;

  letter-spacing:.1em;

  color: #9205c6;

 }

Ketujuh taruh kode berikut ini di bawah kode tadi:

/* EDIT MENU part1 */

#top-nav ul {padding: 0;margin: 0 ; background-color: #1d1d1d color: #000000;float: left;width: 100%;font-weight:bold;}

#top-nav ul li {display: inline;}

#top-nav ul li a {padding: 0.2em 1em ; color: #6db201;text-decoration: none;float: left;border-right: 1px solid #000000;}

#top-nav ul li a:hover {background-color: #1d1d1d color: #000000;}

keterangan: #000000 adalah warna hitam pada backround bisa anda ganti sesuaikan dengan tema blog anda, #6db201 warna text.....

Kedelapan save template.....

Kesembilan buka rancangan Elemen laman....

Kesepuluh Buatlah sebuah gadget baru tipe html/java scrip dengan nama gadget kosongin aja...

Kesebelas copikan kode dibawah ini pada gadget tersebut....

<!-- EDIT MENU part2 </ul> -->

<div id='top-nav'>

  <ul class='nav'> 

   <li><a href='/'>HOME</a></li>

   <li><a href='http://linkanda'>menu anda</a></li>

   <li><a href='http://linkanda'>menu anda</a></li>

   <li><a href='http://linkanda'>menu anda</a></li>

  </ul>

  </div>

<!-- END OF EDIT MENU </ul> -->

Keduabelas ganti yang bercetak tebal dengan link dan nama menu anda...

Ketigabelas bila mau di tambah menunya copi    <li><a href='http://linkanda'>menu anda</a></li> sebelum </ul></div>

Keempatbelas jangan lupa save alias disimpan gadgetnya.

Ketujuhbelas letakkan gadget di bawah header agar menu keluar dibawah head atau terserah anda mau mengeluarkan menunya dimana bisa dibawah bisa diatas dan lain-lain....

Kedelapanbelas sebelumnya sadarkah anda kalau kelimabelas dan keenambelas diatas tidak ada?

Kesembilanbelas terima kasih dah mau baca yang mau komen dipersilahkan....

keduapuluh Demikian lah tipnya semoga berguna....

Posted by Fayes Cool » Rating 4.5 » at Thursday, June 16, 2011

Postingan Terkait