SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Cara Membuat Tab Menu seperti Blog Bego

Salah satu kawan pengunjung Blog saya ini, bertanya cara membuat Tab Menu yang terpasang seperti di bawah Header Blog saya ini,
disamping hampir semingguan saya tak sempat posting lagi, :r karena ada kesibukan pribadi 
Sebenarnya banyak model Tab Menu penuh aksi dan gaya yang dipasang para Blogger pada Blognya masing-masing, ada yang Horizontal maupun Vertikal, tapi pada umumnya sangat memberatkan loading Blog atau mungkin kawan kita ini sama selera dengan saya yang inginnya simple-simple saja, entahlah itu semua kembali pada pribadi masing-masing :#
Langsung saja ke cara membuat Tab Menu seperti Blog Bego :
  • Masuk Account Blogger dengan ID kawan
  • Pada Perancang Template pilih Edit HTML
  • Copas Kode berikut dibawah Header atau di atas ]]></b:skin>
#menu {
margin: 10px auto;
width: 96%;
padding: 5px;
background-color: transparent;
font-size: 10px;
color: #FF0;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li {
display: inline;
text-align: center;
}
#menu a {
display: inline;
height: 30px;
padding: 5px;
background-color: background: #699AB8 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#699AB8');background:-moz-radial-gradient(top, #FFFFFF, #699AB8);background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to( #699AB8));
border: 0px solid #FFF;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: normal;
color: #00F;
}
#menu a:hover {
padding: 5px;
background-color: #000;
text-decoration: none;
color: #FFF;
}

  • Selanjutnya Copas Kode berikut dibawah <body> atau dibawah / diatas Header
<div id='menu'>
                        <ul>
<li><a href='http://tips-blogbego.blogspot.com/2011/08/daftar-isi.html' target='_blank'> DAFTAR ISI</a></li>
<li><a href='http://tips-blogbego.blogspot.com/2010/11/kontak-kami.html' target='_blank'> KONTAK</a></li>
<li><a href='http://tips-blogbego.blogspot.com/2011/06/x.html' target='_blank'>FORUM</a></li>
<li><a href='http://tips-blogbego.blogspot.com/search/label/Kreasi' target='_blank'> KREASI</a></li>
      </ul>
</div>


Catatan :
  1. Silahkan ganti URL / Link saya dengan Link kawan
  2. Warna, Lebar dan lain sebagainya silahkan diganti sesuai selera kawan
  • Jangan lupa Simpan template kawan


25 komentar pada “Cara Membuat Tab Menu seperti Blog Bego”

  1. Tutorialnya keren, kalo bisa uppdate postnya tiap hari gan soalnya tiap hari saya selalu mampir kesini disaat ngeupdate blog. Ini kunjungan balasan, soal kotak follow baru saya tampilkan kotak komentar karena khawatir yg follow sedikit. Maklum masih newbie...

    BalasHapus
  2. @Ruang Informasi trims kunjungan dan sarannya, :z posting saya memang jarang soalnya saya coba dulu setelah berhasil baru saya posting :r

    BalasHapus
  3. mkasih mas udah jadi, tapi kalau link-nya saya klik kok hasilnya seperti ini?
    "Laman tidak ditemukan
    Maaf, laman yang sedang Anda cari dalam blog SEKOLAH DASAR NEGERI SUMOGAWE 03 tidak ada."

    BalasHapus
  4. kayaknya blog saya ndak beres cara kerjanya, mohon kesediaanya kasih petunjuk dong, lebih bahagia jika berkenan dikirim langsung ke gmail saya di lasino77@gmail.com

    BalasHapus
  5. @Lasino komentar akan masuk juga di Gmail kawan, karena Komentar lebih bagus untuk memperkenalkan blog :z

    BalasHapus
  6. Bagus sekali share menunya kawan, kapa-kapan akan saya coba membuatnya :)

    BalasHapus
  7. @nurcahyaku10 wah kawan ini bikin saya tersanjung - trims sanjungannya :#

    BalasHapus
  8. wah boleh juga neh dicoba untuk blog lain :-d

    BalasHapus
  9. silahkan kalau kawan menginginkan :D

    BalasHapus
  10. maaf udh lama aq tdk kunjungi blog njenengan, dan keliatannya anda juga tdk pernh ke blog aq, memang udh agak lama aq tdk posting tema, selain lg sibuk tesis tdk pny bahan, skr udh kelar dan kmbali utak atik blog

    BalasHapus
  11. @Lasino Lasino ya sama kawan, lama nggak pernah blogwalking maklum ada sedikit kesibukan lain, Linknya kok ke G+ :z

    BalasHapus
  12. yaitu saya kan udh blg kalau masih gaptek, jika ngutak-atik blog, memang saya kadang salah memahami saran dari google, saat ini saya ada google+ dan netlog.saya mau buat kolom komentar seperti punya anda ini saja masih belum bisa padahal saran anda jelas tapi praktikknya belum jadi

    BalasHapus
  13. Apakah anda berkenan komunikasi lewat HP?, saya ingin sekali belajar blog dr anda scr langsung, jika menemui kesulitan saya bisa konsultasi, ini no HP saya 081225080356

    BalasHapus
  14. maaf no HP keliru Lasino 081225808356

    BalasHapus
  15. kawan saya juga buat blog di alamat http://lasino-stupa.blogspot.com, hal ini saya buat untuk jaga-jaga kalau salah satu error.silahkan juga kunjungi, blog sd untuk tempat dinas dan blog stupa untuk pribadi.

    BalasHapus
  16. Kawan apakah tampilan blog bisa seperti web?, ada saran desain di webmaster yang download gratis, saya mau tampilan blog seperti web apakah mungkin? mohon sarannya.

    BalasHapus
  17. @Lasino Lasino Kalau nggak salah WEB / SITE atau Blog pada prinsipnya sama, perbedaannya orang punya Blog belum tentu punya Web, sedang sebaliknya orang punya Web biasanya punya Blog juga karena :
    1. Web pakai Domain dan Hosting berbayar artinya kita mendapatkan fasilitas tanpa batas
    2. Blog pakai Domain pinjaman [Gratis] dari penyedia misalnya Blogspot, WordPress dll

    Masalah Komunikasi lewat HP, pada dasarnya nggak masalah, cuma saya ini pelupa banget, pas lagi diluar kan nggak nyambung juga [maaf ya saya bukan pelit dengan No. HP] :D
    Masalah Kotak Komentar sekarang lagi Ngetrend Thread Comment, silahkan baca-baca di Blog saya yang lain » BLOG CREATION

    Saya juga Gaptek kawan [tamatan SMEA, umur sudah tua] Pesan : kalau mau mencoba simpan dulu Templatenya baru melangkah ke percobaan
    Selamat Berkreasi - sukses selalu

    BalasHapus
  18. maksudnya diatas itu sebelum tulisan ]]> atau setelah mas

    BalasHapus
    Balasan
    1. Benar kawan tempatkan script tersebut sebelum tag ]]></b:skin>

      Hapus
  19. trims infonya
    isin di pake ilmunya
    visit my blog yach
    http://fotografiikm.blogspot.com/

    BalasHapus
    Balasan
    1. Trims kawan sudah berkunjung dan Komentarnya :z
      Kunjungan balik sudah pasti :x

      Hapus
  20. Sangat bermampat sekali terimakasih gan atas petuah and sharing nya apa lg ky aku yang newbie di IM ^_^

    BalasHapus
    Balasan
    1. sama kawan, saya juga pemula yang lagi belajar :y

      Hapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger