Artikel Terbaru :
Home » » Cara Membuat Tab Menu laman Di Atas Header Blog

Cara Membuat Tab Menu laman Di Atas Header Blog

Wednesday, December 19, 2012 | 28komentar

 Cara Membuat Tab Menu laman Di Atas Header Blog
Ketika membuat blog dengan menggunakan platform Blogger atau Blogspot, maka secara default di atas header akan ditampilkan bilah mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau dapat pula disebut sebagai baris navigasi. Namun karena beberapa alasan (misalnya adalah untuk mempercantik tampilan halaman), maka tidak sedikit pengelola blog yang menyembunyikan bagian tersebut dengan cara menambahkan kode tertentu ke dalam template.

Lihat contoh gambar di bawah ini:


Atau lihat demo


 jika tertarik silahkan ikuti langkah-langkah berikut ini:
Pertama, buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan’.
Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.
#navbar-iframe {
  height:0px; visibility: hidden; display: none;
}
Keterangan:

Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.
Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> 



/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 0px auto;
}

.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}

.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}

.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}

.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}


Keterangan:
Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.
Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.
<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://blogzafar.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfX-Y26CuPsTxjJ9w9BUREwxBN0olhtzAF3JTiGoqef4rUqwm9OPknyRtCRXwuJqgEUWzLYmKfPoi-0oYHZmUsyaEngVQ2zqxntQuVOnIbxRtY2-kjoxu9D7y-wk1PSwVdaqVc75F3cFk/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>
Keterangan:
Ganti http://blogzafar.blogspot.com/ dengan URL blog Anda dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.
Kelima, simpan template.

Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.
Semoga berguna dan bermanfaat.
Salam.
Share this article :

ARTIKEL TERKAIT:

28 comments:

  1. terima kasih, sangat bermanfaat, langsung saya praktekkan, hhe

    salah kenal

    http://belajarguitarzone.blogspot.com

    ReplyDelete
  2. terimakasih mba tutorialnya..
    .saya sudah follow blog mba , kalau mba berkenan follow balik yah?

    ReplyDelete
    Replies
    1. sama" ok blog anda sudah saya follow back thank's

      Delete
  3. Terima Kasih, Info Ini Sangat Bermanfaat.

    ReplyDelete
  4. makasi gan atas informasinya yang sangat bermanfaat...
    follow ane ya,,
    http://agustinuskeo.blogspot.com

    ReplyDelete
  5. sudah saya coba dan work di blog saya
    ijin sedot ya gan
    artikel tidak akan saya rubah
    dan sumber tetap saya cantumkan
    terima kasih

    http://aeroaxel.blogspot.com/

    ReplyDelete
  6. makasih gan informasinya...

    sempetin mampir juga ya di
    http://klopmoth.blogspot.com/

    ReplyDelete
  7. Mksh info'x gan sangat membantu sekali..

    ReplyDelete
  8. makasih banyak atas infonya

    ipancrash.blogspot.com

    ReplyDelete
  9. keren mbak tutornya, ane coba dulu yeh... Kunbal ya mbak > rahman-ciblog.blogspot.com

    ReplyDelete
  10. kk kok saya mh ada nama menu kiri menu kanan gx ada lamannnya judul lamannya gx kelihatan

    ReplyDelete
  11. mudah2an bisa, bismillah...blog aku http://ethniclover.blogspot.com, maksih ya

    ReplyDelete
  12. Mudah-mudahan rating blognya naik,amin...


    Mohon Kunbalnya gan :www.war-dhana.blogspot.com
    Minta pendapatnya sekalian PM : m.dana98@yahoo.co.id di facebook...

    ReplyDelete
  13. itu cara ngisi menunya gimana yah?

    ReplyDelete
  14. sanggat bermanfaat gan ..

    kunbalik ya :)

    ReplyDelete
  15. mbak sya udh pnya tab menu tp kurang memuaskan, klo sya ganti tab menu'a kyk mbak ap lgkh2nya sma kyak ptunjuk mbak diatas, klo mbak ga kbratan mbak liat tab menu sya aul-al-ghifary.blogspot.com.
    mohon di bantu ya mbak...sya ga tw bljar ma sp...

    ReplyDelete
  16. makasih infonya
    saya baru bisa bikin blog,makanya pengen bagusin blog saya kyak punya mbak keren...makasih ya
    ini blog saya http://sliminggreenworld.blogspot.com/ pengen punya tab menu kyk punya mbak .salam sukses ya

    ReplyDelete
  17. makasih nok... Artikel yag sangat bermanfaat semoga amal ibadahnya diterima disisi Alloh swt amien... alfatihah....

    ReplyDelete
  18. saya coba praktekin ya ba hehe
    www.duniagame.info

    ReplyDelete
  19. saya mau nanya, kalau cara untuk menambahkan konten dalam menunya gimana???
    terima kasih.

    ReplyDelete
  20. ma kasih mbak postingan mbaknya sangat membantuuuuu
    http://maspurwoadmojo.blogspot.com/

    mbak jangan lupah join blog saya ya... saya uda follow mbknya

    ReplyDelete
  21. Bisa berbagi gimana cara buat headline news seperti diblog ini mbk? :D

    ReplyDelete
  22. Sangat bermanfaat, yuk kunjungi nisrinalailatulluqyana.blogspot.com ada banyak postingan keren!

    ReplyDelete
  23. Salam kenal..terima kasih buat infonya.

    ReplyDelete
  24. terima kasih infonya gan.. sangat bermanfaat.

    ReplyDelete

Silahkan tinggalkan komentar sobat , tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.

 
Support : Copyright © 2011. Tips Trik Blog | Dan Cara Buat Website - All Rights Reserved
Template Modify by Siti Saleha
Proudly powered by Blogger| Thanks For Visiting