cara membuat menu bar di blog

Cara Membuat Menu Bar ... Langsung kita lihat cranya dibawah ini

Ikuti Langkah-Langkah Berikut ini :

1. Buka akun blogger Anda.
2. Masuk ke menu edit HTML, jangan lupa cantang expand template widget
3. Cari kode dibawah ini :

   ]]></b:skin>

4.  Pastekan kode dibawah ini, diatas pada kode diatas :
   

   #container1 {
   width: 960px;
   margin: 0 auto;}
   .menu33{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FFFFFF;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
   a:link {color:#ffffff;}
   a:hover {color:#ffffff;text-decoration: none;}
   a:visited {color: #FFFDFD;text-decoration: none;}
   ul.menu33 li{list-style:none;float:left;height:40px;text-align:center;background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
   ul li a{display:block;padding:0 20px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(0,0,0,0.1);text-align:center;line-height:40px;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
   ul li a:hover{background:transparent none;}
   ul[rel=sam1] li a{background:#606060;}
   ul[rel=sam1] li a:hover{background:transparent none;}
   ul li.active a{background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
   <div id="container1">
   <ul class="menu33" rel="sam1">
   <li class="active"><a href="http://akuntansi20baru.blogspot.com/">Home</a></li>
   <li><a href="#"><blink>About Me</blink></a></li>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
   <li><a href="#">Menu 4</a>
   <ul id='sub-custom-nav'>
   <li><a href='#'>Sub Menu 1</a></li>
   <li><a href='#'>Sub Menu 2</a></li>
   </ul>
   </li>
   <li><a href="#">Menu 5</a></li>
   </ul>
   </div>

5. Keterangan : 
   Edit Tulisan Berwarna :
   -Biru dengan alamat yang anda ingin tuju contoh : http://akuntansi20baru.blogspot.com
   -Merah Dengan Nama Seperti Home-Hijau Itu adalah Sub Menu. Jika Kalian ingin memasang lebih dari satu kalian Coppy Paste Nih :

   <ul id='sub-custom-nav'>
   <li><a href='#'>Sub Menu 1</a></li>
   <li><a href='#'>Sub Menu 2</a></li>
   </ul>
   </li>

   Coppy Paste ini dibawah tetapi hapus </li> :

   <li><a href="#">Menu 4</a></li>  <   Hapus ini </li>

6.   Untuk Melihat Hasilnya Klik PRATINJAU terlebih Dahulu , Jika Sudah Merasa Puas Klik Simpan Template
7. sumber:http://x-vblog31.blogspot.com/

Unknown

Add Comment

tutorial blogger

Monday, 25 August 2014

Tweet

HIMAKA UNITRI
Published: 2014-08-25T16:25:00-07:00
Title:cara membuat menu bar di blog
Rating: 5 On 22 reviews

Related Articles