Cara Memasang Tab Menu Horizontal di Blog

Artikel ini ditulis atas permintaan seorang teman yang bertanya bagaimana cara memasang tab menu horizontal seperti yang ada di blog ini.
Ikuti cara-caranya di bawah ini :
  • Login ke akun blogger, kemudian masuk ke dasbor pilih rancangan
  • Pada tab Elemen Laman, klik Tambah Gadget pilih HTML/Java script
  • Copy kode berikut ini kemudian pastekan ke kotak content
<!--
/* CSS Tabs */
#navcontainer { /* none needed */ }
ul#navlist {
        margin: 0;
        padding: 0;
        list-style-type: none;
        white-space: nowrap;
}
ul#navlist li {
        float: left;
        font-family: verdana, arial, sans-serif;
        font-size: 9px;
        font-weight: bold;
        margin: 0;
        padding: 5px 0 4px 0;
        background-color: #eef4f1;
        border-top: 1px solid #e0ede9;
        border-bottom: 1px solid #e0ede9;
}
#navlist a, #navlist a:link {
        margin: 0;
        padding: 5px 9px 4px 9px;
        color: #95bbae;
        border-right: 1px dashed #d1e3db;
        text-decoration: none;
}
ul#navlist li#active {
        color: #95bbae;
        background-color: #deebe5;
}
#navlist a:hover {
        color: #74a893;
        background-color: #d1e3db;
}
-->
                <div id="navcontainer">
                        <ul id="navlist">
                                <!-- CSS Tabs -->
<li><a href="http://twilightpeak.blogspot.com">Beranda</a> </li>
<li><a href="http://twilightpeak.blogspot.com/search/label/Blogger">Belajar Ngeblog</a> </li>
<li><a href="http://twilightpeak.blogspot.com/search/label/Simkes">Simkes</a> </li>
<li><a href="http://twilightpeak.blogspot.com/search/label/Komputer">Informatika</a> </li>
<li><a href="http://twilightpeak.blogspot.com/search/label/My Novel">My Novel</a> </li>
<li><a href="http://twilightpeak.blogspot.com/search/label/My Life">My Life</a> </li>
<li><a href="http://twilightpeak.blogspot.com/p/about-me_03.html">About me</a></li> </ul> </div>
  • Ganti tulisan yang berwarna merah dengan alamat URL atau laman blog anda, kalau tidak yakin alamatnya, buka blog atau URL anda kemudian copy alamat URL yang terdapat pada jendela browser lalu pastekan di tulisan yang berwarna merah tersebut.Sedangkan untuk tulisan yang berwarna biru ganti dengan judul menu yang anda inginkan.
  • Kalau sudah selesai mengedit tulisan yang berwarna merah, klik simpan, simpan lagi, sekarang lihat blog maka jadinya seperti ini.

  • Kalau anda ingin meletakkan tab menu tersebut pada header atau kepala blog seperti di blog ini, tetapi tidak ada menu tambah widget maka sebaiknya anda membaca artikel saya berikutnya Cara Menambah Widget Pada Header Blog
Selamat mencoba dan semoga bermanfaat….

Komentar

  1. Anonim9 Oktober 2010 pukul 19.59

    Thanks tika, u r so kind 2 me

    BalasHapus
  2. Zanck27 Oktober 2010 pukul 17.29

    thaNks y,,

    BalasHapus
  3. Unknown28 Oktober 2010 pukul 07.04

    you're welcome..mudah2an bs dipraktekkan ya....

    BalasHapus
  4. Unknown23 November 2010 pukul 03.04

    maaf ganggu,,
    kenapa pas aku coba laman tab menunya tetap ga mau horizontal padahal dah di coba sama persis kek tutorial kakak...
    gmn kak??

    BalasHapus
  5. Unknown25 November 2010 pukul 19.14

    @berry : mksdnya ga mau horizontal, tampilan menunya jd vertikal atau gmn ya? penjelasannya mungkin krn template kamu udah banyak dimodifikasi jd ada beberapa script html tidak terpakai yang belum dihapus. saran saya coba di template standar bawaan blogspot dl, kalo berhasil berarti benar ada beberapa script htmlnya yang harus dihapus. Coba lagi ya, mudah2an berhasil....

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Love Story (Erich Segal)

Sewaktu mencari novel ini di toko buku aku pikir bukunya akan setebal novel Erich Segal yang lain seperti The Class dan The Doctor yang hampir seribu halaman, ternyata bukunya hanya sebesar komik dan tebalnya pun tidak sampai dua ratus halaman. Hampir aku tidak percaya ini adalah buku yang katanya telah terjual lebih dari dua puluh satu juta copy dan telah puluhan kali dicetak ulang. Tapi ada untungnya juga harganya jadi sangat murah untuk sebuah novel karya Erich Segal.
Selanjutnya...

Resensi Buku : Three Cups of Tea

Gambar
Judul          : Three cups of tea Pengarang : Greg Mortenson & David Oliver Relin Penerbit     : Mizan Halaman    : 629 halaman Harga        : Rp. 89.000,-  “…(Di Pakistan dan Afghanistan) kami minum tiga cangkir teh saat membicarakan bisnis; pada cangkir pertama engkau masih orang asing; cangkir kedua engkau teman, dan pada cangkir ketiga, engkau bergabung dengan keluarga kami. Sebuah keluarga yang siap untuk berbuat apa pun--bahkan untuk mati.”
Selanjutnya...

Dimanakah Hari Tuaku Berada?

Pulang dari pasar saat hendak membayar ongkos ojek, tiba-tiba aku dikejutkan suara seorang nenek yang berteriak minta tolong. Terburu-buru aku meletakkan barang belanjaan di depan pintu dan berlari ke rumah tetanggaku dimana teriakan minta tolong itu tadi berasal, karena pintu rumahnya terbuka dan tidak ada orang di dalam aku langsung saja masuk ke dalam. Aku cari-cari ternyata nenek ada di sumur, terjatuh dengan muka yang pucat pasi dan basah kuyup. Mungkin tadi beliau  mau ke WC tapi karena tidak ada orang dirumah dan anaknya di rumah sebelah tidak mendengar jadi dia berusaha sendiri.
Selanjutnya...