MEMASANG TOP MENU BLOG

Posted by Cex | 15.38 | | 0 comments »

MEMASANG TOP MENU BLOG



Tips & Trik kali ini akan
meberikan cara memasang top menu di blog
agar lebih menarik ga usah repot-repot copy paste aja kode dibawah ini semuanya








<style>


#subnavbar {


border-bottom: 1px solid #ffffff;


background: #000000;


width: 980px;


height: 30px;


color: #F73340;


margin-left: 0;


padding-left: 0; }





#subnavbar li li a, #subnavbar li li a:link, #subnavbar li
li a:visited {


background: #000000;


width: 140px;


float: none;


margin: 0;


padding: 6px 10px;


border-bottom: 1px solid #ffffff;


border-left: 1px solid #ffffff;


border-right: 1px solid #ffffff; }


#subnav li li a:hover, #subnav li li a:active {


background: #4169FC;


margin: 0;


padding: 6px 10px; }





#subnav {


margin: 0;


padding: 0; }


#subnav ul {


float: left;


list-style: none;


margin: 0;


padding: 0; }


#subnav li {


list-style: none;


margin: 0;


padding: 0; }


#subnav li a, #subnav li a:link, #subnav li a:visited {


color: #F73340;


display: block;


font-size: 10px;


font-weight: bold;


text-transform: uppercase;


margin: 0 5px 0 0;


padding: 6px 13px; }


#subnav li a:hover, #subnav li a:active {


background: #4169FC;


color: #000000;


display: block;


text-decoration: none;


margin: 0 5px 0 0;


padding: 6px 13px; }


#subnav li li a, #subnav li li a:link, #subnav li li
a:visited {


background: #000000;


width: 140px;


float: none;


margin: 0;


padding: 6px 10px;


border-top: 1px solid #ffffff;


border-bottom: 1px solid #ffffff;


border-left: 1px solid #ffffff;


border-right: 1px solid #ffffff; }


#subnav li li a:hover, #subnav li li a:active {


background: #4169FC;


margin: 0;


padding: 6px 10px; }





#subnav li li a:hover, #subnav li li a:active {


background: #4169FC;


margin: 0;


padding: 6px 10px; }


#subnav li {


float: left;


padding: 0; }


#subnav li ul {


z-index: 9999;


position: absolute;


left: -999em;


height: auto;


width: 160px;


margin: 0;


padding: 0; }


#subnav li ul a { width: 140px; }


#subnav li ul ul { margin: -25px 0 0 161px; }


#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav
li.sfhover ul ul, #subnav li.sfhover ul ul ul { left: -999em; }


#subnav li:hover ul, #subnav li li:hover ul, #subnav li li
li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li
li.sfhover ul { left: auto; }


#subnav li:hover, #subnav li.sfhover { position: static; }





</style>








<div id='subnavbar'>


<ul id='subnav'>


<li>


<a href='#'>Home</a>


</li>





<li>


<a href='#'>Tutorial</a>





<ul>


<li>


<a href='#'>C++</a>





<ul>


<li>


<a href='#'>C++ Dasar</a>


</li>





<li>


<a href='#'>IF Bersarang</a>


</li>


<li>


<a href='#'>Pengulangan Dg For</a>


</li>


<li>


<a href='#'>Tahun Kabisat</a>


</li>


<li>


<a href='#'>Rumus Lingkaran</a>


</li>


</ul>





</li>


<li>


<a href='#'>CSS</a>





<ul>


<li>


<a href='#'>CSS Dasar</a>


</li>


</ul>


</li>


</ul>


</li>








<li>


<a href='#'>Artikel Menarik</a>


<ul>


<li>


<a href='#'>Rahasia Kesempurnaan</a>


</li>


<li>


<a href='#'>Beo Jadi Raja</a>


</li>


<li>


<a href='#'>Cerita Inspirasi</a>


</li>


</ul>


</li>





<li>


<a href='#'>News</a>


<ul>


<li>


<a href='#'>Lubang Dalam IE</a>


</li>


<li>


<a href='#'>Microsoft VS Google</a>


</li>


</ul>


</li>








<li>


<a href='#'>Cex Bicara</a>


<ul>


<li>


<a href='#'>Birokrasi Di Indonesia</a>


</li>


<li>


<a href='#'>Untuk Blogger</a>


</li>


</ul>


</li>





<li>


<a href='#'>Abouth Me</a>


</li>





<li>


<a href='#'>Contact</a>


</li>





</ul>


</div>


<div style='clear:both;'/>








Setelah copy kode diatas cara paste kode ini ada dua cara
terserah kalian mana yang paling dirasa pas buat
blognya





Cara pertama
Paste di edit Page Elements
Kalo di template nya sudah ada widget diatas, maka tinggal
buat baru dan pilih HTML/Java script
 diisi dan paste disana kodenya titlenya
kosongin aja
Cara kedua
Paste di edit HTML
Copy senmua kode diatas kemudian paste setelah <body> kalo
mau diatas header dan kalo mau top menu nya dibawah header maka paste setelah
Div tutup <div id='header-wrapper'> jadi jelasnya cari </div> dan paste deh
Kalo semua beres tinggal ganti # dengan link ke posting
yang diinginkan dan namanya sesuaikan juga
Dan atur warna dan ukurannya di CSS biar mecing sama
template yang digunakan


Tips and Trik Lainnya:

1. Pasang read more pada posting
2. Ganti Icon Blogger Dengan Gambar Sendiri
3. Mendapatkan penghasilan dari blog anda
4. Ganti bahasa bLog anda sesuai pengunjung secara otomatis


Terima kasih


Cex

0 comments

Posting Komentar

Silahkan Tuangkan semuanya disini,Comentar anda Modal buat saya lebih baik lagi.
Terima kasih.

Langganan: Posting Komentar (Atom)