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...

Yuk, bikin efek blingee pada foto...

Gambar
Pernah melihat foto atau tulisan dengan efek berkelip-kelip, atau pernah melihat foto orang tertawa dengan kilauan di giginya?Itu namanya efek blingee, tetapi waktu searching di google translate aku tidak menemukan  terjemahan kata blingee ke dalam Bahasa Indonesia. Mungkin asal katanya dari blink yang artinya berkedip. Banyak kreasi foto atau tulisan yang bisa dipercantik dengan efek blingee ini, setelah selesai hasilnya bisa dipajang di Facebook, Twitter, Blog dan lain-lain. Tetapi yang harus diingat hasil fotonya nanti berekstensi gif, jadi kalau kita menyimpannya dengan format jpeg maka efek blingeenya tidak akan terlihat.
Selanjutnya...