Cara Menciptakan Sajian Sederhana Di Bawah Dan Di Atas Header

Diposting pada

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

Cara Membuat Simple di Atas atau di Bawah Header Cara Membuat Menu Sederhana di Bawah Dan Di Atas 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 instruksi Copy instruksi warna biru dibawah ini dan letakan diatas instruksi ]]></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 instruksi yang berwarna merah dengan instruksi yang sesuai dengan template milik sahabat
      

  3. Copykan instruksi warna biru di bawah ini di atas instruksi <header>  untuk sajian di atas header  dan copykan di bawah </header> untuk sajian 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.