Membuat Menu Horizontal

Thank you for using rssforward.com! This service has been made possible by all our customers. In order to provide a sustainable, best of the breed RSS to Email experience, we've chosen to keep this as a paid subscription service. If you are satisfied with your free trial, please sign-up today. Subscriptions without a plan would soon be removed. Thank you!

Share

Bagaimana membuat tab view Horizontal menu tombol Home, tutorial blog, atau yang lain-lain Seperti terlihat pada gambar Horizontal menu yang akan kita buat:



Nah apakah anda berminat untuk membuatnya??? baiklah ini adalah cara membuatnya:
1. login ke blogger lalu masuk menu Layout kemudian masuk menu Edit HTML
2. Lalu taruh code dibawah diatas Code ]]></b:skin> pokoknya di barisan CSS pada Blog Anda:

.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}
.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}
.menuhorisontal li{
display: inline;
margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}
.menuhorisontal li a:visited{
color: white;
}

.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}

3. Kalau Sudah Cari Code dibawah Ini:

             <div id='header-wrapper'>

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
    </b:section>
    </div>

4. Code diatas Di Blog kamu  
berdeda-beda pokoknya kamu perhatikan Code yang berwarna hijau saja dan taruh Code dibawah ini tepat dibawah Code Diatas itu:

     <div id='footheader'>
    <b:section class='footheader' id='footheader' preferred='yes'>
    </b:section>
    </div>

5. Kemudian Simpan
6. kemudian klik Add A Gadget 
kemudian pilih HTML/JavaScript.. Lalu taruh Code dibawah ini:

    <div class='menuhorisontal'>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='http://uc1n.blogspot.com'>Kumpulan Tutorial   Blog</a></li>
    <li><a href='url '>nama</a></li>
    <li><a href='url '>nama</a></li>
    </ul>
    </div>

ket: nama dan url kamu ganti dengan nama dan url yang kamu inginkan
Nama : nama dari tema, misal : My Musik , My video, tutorilal blog, dll.
url : url yang dituju apabila nama di klik oleh pengunjung.

7. save




source

noreply@blogger.com (New bie) 28 Jun, 2011

--
Source: http://delapan-sembilan.blogspot.com/2011/06/membuat-menu-horizontal.html
~
Manage subscription | Powered by rssforward.com