Scribd
Upload
42 views9 pages

Klik Rancangan (Tata Letak) 3. Klik Edit HTML 4 Cari Kode) ) 5. Letakkan Kode Dibawah Ini, Diatas Kode No 4 Tadi

The document provides instructions for adding a navigation menu to a Blogspot blog in 8 steps: 1. Log into Blogspot 2. Click Layout (Design) 3. Click Edit HTML 4. Find and insert CSS code for the navigation menu 5. Find and insert HTML code for the navigation menu below a certain point 6. Customize the menu items and links to point to the correct blog labels and pages 7. Save the changes

Uploaded by

Irfan Arifin
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
42 views9 pages

Klik Rancangan (Tata Letak) 3. Klik Edit HTML 4 Cari Kode) ) 5. Letakkan Kode Dibawah Ini, Diatas Kode No 4 Tadi

The document provides instructions for adding a navigation menu to a Blogspot blog in 8 steps: 1. Log into Blogspot 2. Click Layout (Design) 3. Click Edit HTML 4. Find and insert CSS code for the navigation menu 5. Find and insert HTML code for the navigation menu below a certain point 6. Customize the menu items and links to point to the correct blog labels and pages 7. Save the changes

Uploaded by

Irfan Arifin
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

1. Login ke blogspot.com 2. Klik Rancangan (Tata Letak) 3. Klik Edit HTML 4 Cari kode ]]></b:skin> 5.

Letakkan kode dibawah ini, diatas kode no 4 tadi

/* ----- NAVBAR MENU ----- */ #NavbarMenu {

width: 875px; height: 35px; background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbarhitam.png) repeat-x top; color: #ffffff margin: 0 auto 0; padding: 0; font: bold 11px Arial, Tahoma, Verdana; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; }

#NavbarMenuleft { width: 680px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; }

#nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { color: #ffffff; display: block; text-transform: capitalize; margin: 0; padding: 9px 15px 8px; font: normal 15px Georgia, Times New Roman; } #nav li a:hover, #nav li a:active { background:#FF6600; color: #ffffff; margin: 0;

padding: 9px 15px 8px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbarhitam.png) repeat-x top; width: 150px; color: #ffffff; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; font: normal 14px Georgia, Times New Roman; }

#nav li li a:hover, #nav li li a:active { background: #FF6600; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px;

margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover {

position: static; } 6. Kemudian cari kode ini: </b:section> </div> 7. Letakkan kode dibawah ini di bawah kode no 6 tadi <div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li> <li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a> <ul> <li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li> <li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li> </ul>

</li> <li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a> <ul> <li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li> <li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li> </ul> </li> <li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a> <ul> <li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li> <li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li> <li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li> </ul> </li>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li> </ul> </div>

</div> <!-- end navbar --> Keterangan: => www.tamanbelajarblog.blogspot.com diganti dengan alamat blog anda => Nama Label diganti dengan nama label pilihan anda yang ada di blog anda => Judul Menu diganti dengan judul menu yang anda inginkan

8. Simpan

You might also like