Home » » Tutorial Blog : Cara Membuat Menu Horizontal di Blogspot.

Tutorial Blog : Cara Membuat Menu Horizontal di Blogspot.

Tutorial Blog : Cara Membuat Menu Horizontal di Blogspot.
http://letsbegins.blogspot.com/
Tutorial Blog : Cara Membuat Menu Horizontal di Blogspot.

Kali ini ada yang istimewa dengan postingan tentang tutorial kali ini,karena biasanya saya selalu mempostingkan tentang tutorial autoCAD,atau solidwork dsb yang kaitanya erat dengan dunia drawing / gambar desain engineering atau pembuatan moulding,tapi untuk episode kali ini saya akan membagikan sebuah tutorial blog tentang bagaimana cara membuat menu horizontal pada blogspot.

Menu horizontal tentu bukan hal yang baru dan asing bagi para blogger kawakan alias master blogger,dan cara membuatnya pun sudah hapal luar kepala fasih sampai ketitik yang paling dalam,tetapi tentu ada rekan rekan blogger yang belum tau dan mengerti cara membuat menu horizontal pada blogspot,atau sudah lupa cara caranya.

Unutk itulah saya mencoba mengungkap kembali tutorial bagaimana cara membuat menu horizontal pada blogspot  seperti yang bisa rekan rekan lihat pada blog autoCAD tangerang kesayangan saya ini,baiklah sebelum memulai cara membuat menu horizontal pada blogspot alangkah lebih baik kita mengetahui terlebih dahulu tentang makna menu horizontal itu sendiri.

Menu horizontal adalah sebuah menu yang berisi rangkuman dari beberapa kategori dari seluruh postingan yang ada di blog tersebut,dengan kata lain menu ini adalah menu rangkuman dari segala jenis postingan yang ada di blog tersebut,Menu horizontal menjadi sangat penting untuk mengoptimalkan isi atau content dari suatu blog atau wap. Dengan menu horizontal di suatu blog atau wap pengunjung / visitor akan dengan mudah menemukan artikel yang sesuai yang di harapkan. Tak ayal dengan menu horizontal seluruh isi atau content suatu blog atau wap akan dengan mudah tersentuh oleh pengunjug.

Adapun cara membuat menu horizontal adalah sbb :
1. Masuk ke blogger => Rancangan => Edit HTML
2. Contreng expand widget tamplate
3. Cari kode ]]></b:skin> lalu tempatkan kode di bawah ini tepat di atas kode tersebut.
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left;
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #222222;
color: #ffffff;
}
.basictab li a:visited{
color: #ffffff;
}
.basictab li a:hover{
background-color: #00ff00;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{
position: relative;
top: 1px;
padding-top: 4px;
background-color: #222222;
color: white;
}
4. Lalu klik simpan tamplate
5. Langkah selanjutnya klik elemen halaman => tambah widget => pilih HTML/ Javascript => Copy Paste kode di bawah ini => Langkah terakhir klik Save.


<ul class="basictab">
<li><a href="http://letsbegins.blogspot.com/">Home</a></li>
<li><ahref="http://letsbegins.blogspot.com/search/label/Tutorial%20AutoCAD">Tutorial AutoCAD</a></li>
<li><a href="http://letsbegins.blogspot.com/search/label/GALLERY">Gallery</a></li>
<li><a href="http://letsbegins.blogspot.com/search/label/Tutorial%20Lain">Tutorial Lain</a></li>
<li><a href="http://letsbegins.blogspot.com/search/label/Link">Link Exchange</a></li>
<li><a href="http://letsbegins.blogspot.com/search/label/Video%20Tutorial">Video Tutorial</a></li>
<li><a href="http://letsbegins.blogspot.com/search/label/Daftar%20Isi">Daftar Isi</a></li>
</ul>

NB :
- Ganti tulisan yang berwarna hijau dengan Url Homepage blog sobat
- Untuk yang berwarna merah silahkan ganti dengan URL label pada blog sobat

Demikianlah tutorial blog tentang bagaimana cara membuat menu horizontal pada blogspot,seperti yang ada di blog saya ini autoCAD tangerang semoga dapat menjadi berkenan dan dapat memberi manfaat bagi rekan rekan blogger semua.





Muhtar Arifin AutoCAD Tangerang Updated at : 4:08 PM

35 comments:

  1. Udah nyoba, kok gagal yah? \di kotak edit HTML abis disave ada tulisan
    More than one widget was found with id: Navbar1. Widget IDs should be unique.

    ReplyDelete
  2. @mujahida Syahida;
    wah kalo yang begini ane juga pernah ngalamin gan, nah dari mesage itu kalo kga salah HTMLnya ada yang doble. jadi saya saranin hapus dulu kode script yang sudah ada lebih duluan, baru masukin kodenya

    semoga membantu....

    ReplyDelete
  3. Mujahidah = sepertinya benar kata Muhammad nurarif,ada HTML yg double alias sdh ada sebelumnya coba cari file yang sama tersebut menggunakan ctrl+F copy paste salah satu HTML tentang Cara membuat menu horizontal..semoga bermanfaat

    ReplyDelete
  4. Muhammad nurarif = thanks kawand....

    ReplyDelete
  5. Jun tck = ok sama2 jangan sungkan2 mampir ke blog AutoCAD Tangerang ini yea?

    ReplyDelete
  6. saya blogger pemula om gimana caranya membuat url labelnya saya masih binggung tolong jawabannya ya

    ReplyDelete
  7. alfin ramadhan = URL yg mana yg ente maksud,kalo URL yang dibawah itu adalah URL postingan berdasarkan label..nah sedangkan URL home page ya URL punya ente misalkan http://letsbegins.blogspot.com/ getoo

    ReplyDelete
  8. gan mhon bantuannya nh.... nah kan sudah jdi dengan sub menu'ya trus cara memasukkan postingan kedalam menu/tab

    ReplyDelete
  9. Makasi brow...,
    sudah sangat membantu aku,
    ...............................
    salam kenal dari ana

    ReplyDelete
  10. Hambali = kalau sudah ok scriptnya nti dia akan otomatis sendiri sesuai label yang kita buat gan..

    ReplyDelete
  11. Karjo = ok gan sama2 semoga lebih manfaat ntinya

    ReplyDelete
  12. Kenap saya coba gak berhasil Gan...
    Hasilnya numpuk dan di samping header. Kenapa ya...

    ReplyDelete
  13. Hand-88 = hmmm jangan jangan ente pake template download ya..biasanya kalo pake tmplate dowload itu mereka udah ada space untuk horizontal menu jadi ada di HTMLnya langsung...coba kalo pake template bawaan pasti bisa...

    ReplyDelete
  14. andiana garis yang gimana nich...kalo soal ada garis dan tidak tergantung kita kasih garis atau gak di HTML nya..nah untuk lebih jelas bagaimana membuat garis pada kolom menu menggunakan HTML mungkin di tutorial blog yang lain bisa di search...

    ReplyDelete
  15. Bang giman cara membuat menu horisontal di blog, sy udah masuk ke blog tp cari menu dan langkahnya gak ketemu. tolong dong langkah2nya.
    Trima kasih sebelumnya.

    ReplyDelete
  16. Bang giman cara membuat menu horisontal di blog, sy udah masuk ke blog tp cari menu dan langkahnya gak ketemu. tolong dong langkah2nya.
    Trima kasih sebelumnya.

    ReplyDelete
  17. Kankanes = iya cara diatas memang cara ketika kita pake dashbord yang lama kalo yg baru kita cari template kemudian muncul customize dan edit HTML nah cara diatas bisa kita mulai setelah kita masuk ke edit HTML kita...ohya ente pake template bawaan atau hasil download itu juga berpengaruh lho...

    ReplyDelete
  18. mas sdah bisa tapi kenapa tulisannya ack2an ya...trus warnaya juga lain lain ,lebih parahnya ada yang bisa di klik mas....trus q g buat tab home tapi kenapa dia muncul ya mas?mohon informasinya?

    ReplyDelete
  19. mas sdah bisa tapi kenapa tulisannya ack2an ya...trus warnaya juga lain lain ,lebih parahnya ada yang bisa di klik mas....trus q g buat tab home tapi kenapa dia muncul ya mas?mohon informasinya?

    ReplyDelete
  20. Assalamu 'Alaikum

    Salam Ukhuwah Akhii.
    Alhamdulillah saya telah membuat blog dan ingin memberi Menu pada Headernya... saya sudah coba tips yang ada pada blog ini tapi masih kurang mengerti.. apakah ada cara yang lebih mudah???

    ReplyDelete
  21. moko= kalo sudah bisa tapi masih acak2an coba ulang lagi dengan copy script yang saya kasih di atas dan paste dulu di word siapa tau emang tulisanya masih acak2an..kalo soal warna itu tergantung settingan warna di template agan..so sinkronkan dulu warna font yang ada di html sobat...

    ReplyDelete
  22. LDK = cara ini mungkin bukan cara satu satunya membuat menu horizontal pada blog,tapi cara inilah yang saya terapkan pada setiap blog saya,dan berhasil,jadi saya tidak akan menganjurkan sesuatu yang saya sendiri belum bisa menggunakanya...ohya selamat ya atas kepemilikan blog baru...

    ReplyDelete
  23. mas mau tanyta lagi ni.....lo cara nulis postingan supaya muncul di menu yang diinginkan bagaimana ya mas caranya?satu lagi mas untuk memindahkan menu beranda yang ada dibawah supaya muincul di menu horizontal bagaimana ya mas caranya....?mohon informasinya as....dan terima kasih atas jawaban yang mas berikan ....

    ReplyDelete
  24. moko = kalau mau postingan kita muncul di menu yang kita inginkan ya sesuaikan label postingan kita dengan menu yang kita mau,misalnya kita habis posting tentang tutorial autocad ya berarti kita mesti labelin dengan nama tutorial autocad,nah setelah itu semua postingan kita tentang tutorial autocad akan menjadi satu kelompok,untuk memindahkan menu beranda coba setting template kemudian cari widget beranda,drag ke tmpat yg kita mau,atau lebih baik bikin lagi aja menu beranda menggunakan cara di atas.

    ReplyDelete
  25. Mas mau nanya kalau kita mau menambahkan postingan ke menu yang sama gimana?

    ReplyDelete
  26. nice artikel
    kunjungi balik blog saya di
    http://lukas-trys.blogspot.com

    ReplyDelete
  27. Zhu ni = cara menambahkan postingan ke menu yang sama bisa dari ketika pertama posting,pada saat pemberian label..atau dengan cara mengedit postingan tersebut kemudian labelnya di rubah kepada label yang kita mau..

    ReplyDelete
  28. lukas trys = ok thanks sama sama langsung autoCAD tangerang siap menuju sasaran..siap2 jamuanya..

    ReplyDelete
  29. gmana cara menambah artikel ke menu yang sama artikelnya banyak????

    ReplyDelete
  30. rifki = kalo mau edit lebih dari 2 postingan ke dalam menu label yang sama caranya masuk ke post kemudian pilih postingan yang akan kita pindahkan trus kik label yang kita inginkan nah setelah itu delete label yang lama,maka postingan tersebut akan berubah labelnya sesuai dengan yang kita inginkan..cara diatas selain cara edit satu satu

    ReplyDelete
  31. iya nich..aq juga pernah ngalami begitu...

    ReplyDelete
  32. edukasi andi = pernah ngalami yang gimana nich gan...pernah ngalami kesulitan membuat menu horizontal gitu maksudnya...terima kasih sudah mampir dimari blog autoCAD Tangerang

    ReplyDelete
  33. udah berapakali dicoba gagal truss..mungkin ada yang salah x ya dg kode html nya mohon di update lagi gan

    ReplyDelete
  34. david gaul = sebenarnya script ini dulu saya pakai di blog ini dan berjalan mulus,tapi sekarang saya sudah tidak pakai lagi,mungkin blog anda pakai template download jadi terkadang memang tidak bisa jalan script ini.

    ReplyDelete

RECENT POST