Monday, September 15, 2014

Cara Membuat Menu Sederhana di Bawah Dan Di Atas Header

sohib sanam
Cara Membuat Simple di Atas atau di Bawah Header -  Menu adalah salah satu yang banyak di pakai untuk mempercantik blog, dari macam menu kadang ada juga yang suka dengan menu drop down ada juga yang simpel seperti yang saya share di bawah ini, menu ini cocok bagi blog sobat yang menbahas sedikit pembahasan topik blog sehingga tidak memerlukan banyak kategori yang biasanya di kelompokkan di menu. tampilan menu blog yang akan sobat lakukan nanti akan tampak seperti gambar di bawah ini, simpel dan sederhana bukan..?

Cara-Membuat-menu di atas bawah header

Cara Memasang Menu Simple di Bawah Atau di Atas Header blog

  1. Silahkan login dan pilh TEMPLATE dan EDIT TEMPLATE 
  2. Silahkan cari  Cari kode ]]></b:skin>  gunakan tombol CTRL + F untuk mempermudahkan pencarian kode Copy kode warna biru dibawah ini dan letakan diatas kode ]]></b:skin>

     #menu-module{width:750px;}
    .mattblackmenu ul{margin:0;padding:0;list-style-type:none;background:#44619d;overflow:hidden;width:750px;margin:0 auto}
    .mattblackmenu li{display:inline;margin:0}
    .mattblackmenu li a{font-size:13px;float:left;display:block;text-decoration:none;margin:0;padding:10px 12px;color:#fff; font-family:Arial; border-left:1px solid #000; }
    .mattblackmenu li a:visited{color:#fff}
    .mattblackmenu li a:hover{background:#000}
    .mattblackmenu a.selected{background:#000}
    .downarrowpointer{padding-left:4px;border:0}
    .rightarrowpointer{position:absolute;padding-top:3px;left:100px;border:0}
    .markermenu{width:175px;clear:left;position:relative}
    .markermenu ul{list-style-type:none;margin:5px 0;padding:0;border:1px solid #9A9A9A}
    .markermenu ul li a{background:#F2F2F2 url(bulletlist.gif) no-repeat 3px center;font:bold 13px;color:#00014e;display:block;width:auto;padding:3px 0;padding-left:20px;text-decoration:none;border-bottom:1px solid #B5B5B5}
    .markermenu ul li a:visited,.markermenu ul li a:active{color:#00014e}
    .markermenu ul li a:hover,.markermenu ul li a.selected{color:white;background-color:black}


     Note : Silahakn ganti kode yang berwarna merah dengan kode yang sesuai dengan template milik sobat
      
  3. Copykan kode warna biru di bawah ini di atas kode <header>  untuk menu di atas header  dan copykan di bawah </header> untuk menu di bawah header
     <div id='menu-module'> <div class='mattblackmenu'> <ul> <li><a href='http://blogfacebookemail.blogspot.com/'>Home</a></li> <li><a href='http://blogfacebookemail.blogspot.com/search/label/Trik%20Blogger'>Blogger</a></li> <li><a href='http://blogfacebookemail.blogspot.com/search/label/Trik%20Facebook'>Facebook</a> </li> <li><a href='http://blogfacebookemail.blogspot.com/'>Komputer</a></li> <li><a href='http://blogfacebookemail.blogspot.com/search/label/Template%20Blog'>Template</a></li> <li><a href='http://blog.nguoiaolam.net/search/label/Marketing Online'>SEO</a></li> <li><a href='http://blogfacebookemail.blogspot.com/search/label/Android'>Android</a></li> <li><a href='#'>Kontak</a> </li> </ul> </div> </div> 
    jangan  lupa untuk megganti URL warna merah dengan milik sobat
  4. Terakhir simpan template ,
Terima kasih dan selamat mencoba. 


0 comments:

Post a Comment