Cara Membuat Menu di Blogspot dengan List-O-Matic

October 20th, 2007 - Kategori: Blogger, Tutorials

List-O-Matic Banyak yang nanyain cara bikin menu seperti yang aku pake di blog ini. Untuk blogspot, sebelum membuat menu, halaman yang akan di link sebaiknya di buat dulu dari postingan biasa, karena di blogspot tidak ada fasilitas membuat halaman, yang ada hanya membuat postingan. jadi menu kita nantinya akan di link ke postingan yang udah kita buat.

Misalnya kamu ingin membuat menu Depan, Tentang, dan Portofolio. maka kamu harus membuat postingan dengan Judul/Title: Depan, Tentang, dan Portofolio, dengan demikian kita akan mempunya 3 halaman dengan url http://nama.blogspot.com/depan.html, http://nama.blogspot.com/tentang.html dan http://nama.blogspot.com/portofolio.html.

Selanjutnya ikuti langkah-langkah pembuatan menu secara otomatis menggunakan List-O-Matic. Setelah semua langkah di lakukan, kamu akan di beri 2 jenis kode yaitu HTML dan CSS.

Here is the HTML for this list:

<div id="navcontainer">
<ul id="navlist">
<li><a href="http://nama.blogspot.com/depan.html">Depan</a></li>
<li><a href="http://nama.blogspot.com/tentang.html">Tentang</a></li>
<li><a href="http://nama.blogspot.com/portofolio.html">Portofolio</a></li>
</ul>
</div>

Copy kode HTML dan masukkan lewat Add a Page Element – HTML/JavaScript dan letakkan dimana kamu pengen menunya muncul.

Here is the CSS for this list:

#navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

Sedangkan untuk kode CSS harus di copy dan di letakkan dalam kode template. Di halaman template blog kamu, pilih Edit HTML, letakkan kode CSS dari List-O-Matic tadi sebelum kode ]]></b:skin> dan save template.

Selamat Mencoba !


Tulisan yang berhubungan

40 Responses to “Cara Membuat Menu di Blogspot dengan List-O-Matic”


« Older Comments

  1. sarli says:
    August 24, 2008 at 17:25:31

    thanks ya mas, akhirnya ak bisa buat menu di blog ak, tapi masalahnya gimana cara kita menempatkan postingan kita ke dalam sub-sub menu yang telah kita buat List-O-Matic ?

    tolong informasinya ya
    thanks

  2. henkz says:
    August 3, 2008 at 14:46:59

    Hi, mas isnaini aku uda buat list menu dengan buat postingan terlebih dahulu tapi koq selalu URLnya ada tanggalnya gitu yah seperti isnaini.com/2008/08/about/

    sedangkan mas isnaini punya kan isnaini.com/about/ (tanpa tanggal), gmana ya supaya url nya bisa seperti ini, saya uda utak atik di format pengaturannya tapi ga ketemu nih.

    Tolongin donk…

    thanks a lot

  3. sugeng says:
    August 1, 2008 at 05:29:16

    semua intruksi sudah dilaksanakan,hasilnya list menu sudah muncul sesuai keinginan.Tapi di klik diam saja nggak ada respon.Tolong kasih penjelasan lagi ya mas…. anu inyong bodoh pisan kiyee…hehehehe .tHANK INFONYA.

  4. rave says:
    July 18, 2008 at 15:18:36

    thanks ya Udah Bisa bkin Menu Home nie….!

    eh 1 lagi kali bikin Coment box d Bologtuh g mn ya…?

  5. marina says:
    July 16, 2008 at 13:21:23

    maap nie temen2. melihat respon2 yg ada di topik ini maupun topik2 lain, kayakya banyak dari temen2 yang kudu belajar dari dasar dulu ttg blog/web, css dan html baru bisa menikmati tips2 disini. kalo ngga bakal dapat kesulitan pas mempraktekkan tutorial2 yang dibuat mas isnaini disini. masa nyari url postingan ndak tau toh.. ntar salah2 postingan bisa hilang semua loh…
    lagian pastilah mas isnaini bakal ga jawab pertanyaan2 yg udah jelas2 dijelasin di postingannya… (mungkin punya saya juga hikz)

    maap sekali lagi bukan sok pinter, tapi saya juga belajar web/blog/html/css dari internet juga metik sana metik sini.. dulu trial adn error deh, krn saya nganggap enteng akhirnya yang gampang2 jadi ndak tau, akhirnya nemu banyak masalah pas ngerjainnya. so saya putusin buat balik belajar dari dasar…

    gudluck for all

  6. marina says:
    July 16, 2008 at 13:05:49

    Halo mas isnaini. thanks alot buat ilmunya. saya udah buat menu list di blog saya dan berhasil. tapi… coba mas visit blog saya, saya pengen posisi menu listnya ke kanan. sedangkan punya saya ada di tengah dengan menggunakan HTml nah gimana caranya supaya ngeposisi in ke kanan ya mas?

    Ditunggu supportnya
    thank you

    @prima
    supaya menu list link ke postingan. kamu copy hyperlink postingan kamu ke masing2 menu list sesuai dengan judul yang kamu buat. coba kamu visit blog ku, pas kamu arahkan mouse kamu ke menu list ku, di taskbar browser, kamu bisa lihat linknya… goodluck

  7. funday says:
    July 11, 2008 at 12:45:17

    mas mw nanya nie… cara biar tag menunya ada di Atas(dibawah judul blog) caranya gmana ya?? kode html nya di taruh dimana biar sama kyk mas itu lho…

    ditugu jawabnya segera….
    thx b4

    Regards
    funday

  8. indogrind says:
    July 11, 2008 at 09:48:11

    mas is, aku dah buat seperti petunjuk mas tp kok List menu menggeser body ya? sehingga side kanan tergeser ke bawah. web template aku pake pny mas is yang dua kolom…maunya sih tambah kolom menu, salam kenal dari temannya Wira/ sastrawan

  9. prima says:
    May 22, 2008 at 17:05:29

    mas aku udah berhasil bikin list menunya…tapi aku bingung cara postingnya biar bisa ngelink dengan menu yg udah aku bikin (sebelum bikin menu aku udah bikin postingannya)…aku udah coba lewat postingan biasa tapi belum berhasil.tolong mas bantuannya biar menuku bisa ngelink ke postingannya…tolong send ke emailku hoseamualif@gmail.com.tks

  10. AJI says:
    May 3, 2008 at 11:14:50

    MAS…CARA MENGISI LIST MENU GIMANA,AKU UDAH BERHASIL BIKIN MENU LIST YANG MASIH BINGUNG UNTUK MENGISI LIST MENUNYA,MISALNYA KALO DI BLOG MAS ISNAINI AKU KLIK MENU FREE TEMPLE BISA MASUK KEHALAMAN MENU TEMPLE…ITU CARANYA GIMANA MAS

« Older Comments