Selasa, 22 Mei 2012

Cara Memasang Menu di Blog

Hmmm ... Hello! sobat blogger udah lama nieh kagak update blog ini. Oke kita mulai aja dagh kagak usah banyak bacot :)

Dari judul udah kagak nyambung amad yach pokoknya tampilan menunya kayak gini




Gimana sob jelek ea abis ini editan saya sieh :D bagi yang minat menggunakan menu editan saya langsung aja sob

1. Yang pasti sobat harus login ke blogger
2. Kemudian cari kode ]]></b:skin> kemudian copy kode di bawah ini dan letakan di atas kode berikut

#menu-bar {
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 0px 6px;
  height: 34px;
  line-height: 100%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #8B8B8B;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A);
  background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
  background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
  border: solid 1px #6D6D6D;
}
#menu-bar li {
  margin: 0px 6px 0px 6px;
  padding: 0px 0px 6px 0px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 8px 20px 8px 20px;
  margin: 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-shadow: 0px 0px 3px #000000;
}
#menu-bar .current a, #menu-bar li:hover > a {
  background: #0399D4;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  color: #444444;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar ul a:hover {
  background: #0399D4 !important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  color: #FFFFFF !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul {
  background: #DDDDDD;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 30px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
  display: block;
}
#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding:10px 0px 10px 15px;
  color:#424242 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
  border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
}
#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}

3. kemudian  cari kode <body> dan copy kode di bawah ini kemudian letakan di bawahnya

<ul id="menu-bar">
 <li class="current"><a href="#">Home</a></li>
 <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Products Sub Menu 1</a></li>
   <li><a href="#">Products Sub Menu 2</a></li>
   <li><a href="#">Products Sub Menu 3</a></li>
   <li><a href="#">Products Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">Services</a>
  <ul>
   <li><a href="#">Services Sub Menu 1</a></li>
   <li><a href="#">Services Sub Menu 2</a></li>
   <li><a href="#">Services Sub Menu 3</a></li>
   <li><a href="#">Services Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

Oke jika sudah selesai sobat pratinjau dulu jika tidak ada yang error sobat Save Template kemudian edit menu yang mau di isi

Berlangganan Artikel disini dengan memasukan Email anda, dan anda akan mendapatkan Artikel terbarunya langsung dari Free Sharing Inform dan dikirimkan ke-Email anda secara Otomatis dan Gratisss.
Description: Cara Memasang Menu di Blog
Rating: 4.5
Reviewer: Aamrol
ItemReviewed: Cara Memasang Menu di Blog
Comments
9 Comments
22 Mei 2012 18.08.00

thanks :D

25 Mei 2012 02.11.00

@Arga_Gokil cara bkin reply kek gni gmna pak??

29 Mei 2012 09.47.00

makasih ya triknya follow sukses no 15

4 Jun 2012 14.41.00

bisa di pkek buat blogzine?

29 Jun 2012 16.12.00

wew nice share sob.........^_^
ijin praktek......
oya ijin follow blog nya #16, di tunggu follback nya..^_^

19 Jul 2012 20.59.00

wah mantep banget tuh menunya :D ijin pakai sob.

1 Sep 2012 22.48.00

siapa bilang jelek gan, keren tuh....

18 Feb 2013 19.23.00

Selamat malam gan, maksih dah share tentang cara atau tutorial di atas, langsung bisa ane praktekin di blog ane gan, www.rangga-atmajaya.com dan ternyata berhasil. makasih banyak, dan ane udah follow blog ente gan, jangan lupa di follow back, kita sebagai blogger indonesia yang peduli terhadap sesama, makasih sekali lagi. Salam Blogger Indonesia. Jika sobat berkenan bisa juga tukar link gan, gimana??

Terima kasih telah membaca Cara Memasang Menu di Blog, Jika ada yang kurang faham kalian bisa bertanya melalui komentar, Terimakasih.

Posting Lama ►
 

Copyright 2012 Free Sharing Inform Template By Blog Bamz