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
8 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....

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