Minggu, 13 Mei 2012

Membuat sub-menu Link blogspot

Dems Teknologi | kali ini membahas tentang cara Membuat sub-menu link blogspot atau yang di sebut sebagai menu navigasi blogspot contohnya seperti yang terlihat pada blog kami ini pada bagian atas.





Gak usah panjang lebar kita langsung ke permasalahan utama.
  • Login ke dashboard blogspot
  • pilih Rancangan »» Edit HTML
  • Tempatkan kode CSS berikut diatas kode ]]></b:skin> 
  #sub-menu {background:#0000AA; font-size:13px;  font-family:verdana,sans-serif;  color:#ffffff;  overflow:hidden;  padding:8px;  border:1px solid #BB0000;}  #sub-menu a:link {color:#fff;} #sub-menu a:visited {color:#fff;} #sub-menu a:hover {color:#BB0000;  text-decoration:none;}  #sub-menu ul {margin:0px; padding:0px;  text-align:center;} #sub-menu li {display:inline;  list-style-type:none;  margin:0px; padding:0px;} #sub-menu ul li a, #sub-menu ul li a:hover {font-size:13px; color:#fff; margin:0px; padding:px;  text-decoration:none;  text-transform:uppercase;} #sub-menu ul li a:hover {color:#BB0000;  text-decoration:none;}

  • kemudian tempatkan kode HTML berikut diatas kode <div id='content-wrapper'> atau biasanya bertuliskan <div id='wrapper-content'>

<div id='sub-menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl/http://demstekno.blogspot.com/'/>HOME</a></li>
<li class='page_item page-item-2'>
<a href='http://demstekno.blogspot.com/search/label/Blogger tips'>Bloger tips</a></li>
<li class='page_item page-item-2'>
<a href='http://demstekno.blogspot.com/search/label/Info%20%28HOT%29'>Info (HOT)</a></li>
<li class='page_item page-item-2'>
<a href='http://demstekno.blogspot.com/search/label/Software'>Software</a></li>
<li class='page_item page-item-2'>
<a href='//http://demstekno.blogspot.com'>LINK 2</a></li>
</ul>
</div>

0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | coupon codes