Senin, 25 Juli 2011

Cara Membuat Menu Horizontal di Blogspot

Cara Membuat Menu Horizontal di Blogspot
Penting sekali sebuah blog memiliki navigasi situs yang didalamnya terdapat link yang menuju ke halaman about, halaman kontak sampai pada halaman kategori yang ada dalam blog tersebut.
Pada template blogspot yang belum memiliki sebuah navigasi site, bisa kita tambahkan dengan cara mengedit html template.

Cara membuat menu horizontal sederhana

1.Masuk pada Dasbor blogspot.
2. Pada halaman dasbor, klik Rancangan.
3. Pada halaman Elemen Laman, klik menu Edit HTML.
Cara Membuat Menu Horizontal di Blogspot
4. Setelah kita masuk pada halaman Edit Template, segera centang Expand Template Widget.
Pada langkah ini, bila kita tidak yakin akan berhasil melakukan pengeditan lebih baik download template blogspot terlebih dulu agar saat terjadi sesuatu pada template blog, kita tinggal upload template yang terdownload tadi pada halaman Edit Template.


5. Kemudian cari kode ]]></b:skin>, bila sahabat kesulitan mencari kode tersebut silahkan klik Ctrl+F atau pada menu browser klik menu Edit lalu pilih Find. Silahkan copy paste script ini di atas kode tersebut...
/* css menu */
#menu {
font-family: Arial, "Trebuchet MS", Verdana, Tahoma;
width: 862,5px;
height: 40px;
background: #eee;
}
#pagenav {
display: block;
font-weight: bold;
font-size:11px;
color: #fff;
margin: 0 0 5px 0;
padding: 0 0 0 10px;
height: 40px;
line-height: 40px;
list-style-type: none;
position: relative;
}
#pagenav li {
float: left;
color:#ffffff;
}
#pagenav li a {
height:38px;
line-height:38px;
font-size:15px;
font-weight:bold;
padding: 0 6px 0 6px;
text-transform:uppercase;
}
#pagenav .current_page_item a {
color:#FFF;
}
#pagenav .current_page_item a:hover {
color:#FFF;
}
.huruf_besar {
float:left;
color:#003399;
line-height:60px;
padding-right:5px;
font-family:trebuchet ms,verdana;
font-size:60px;
}

6. Selanjutnya di atas </header> letakkan script berikut....

div id='menu'>
<ul id='pagenav'>
<li><a href='http://rina-as.blogspot.com/' title='Home'>Home</a></li>
<li><a href='http://rina-as.blogspot.com/search/label/blog' title='Tutorial dan Info Blog'>Blog</a></li>
</ul>
</div>

Catatan : huruf yang berwarna merah adalah alamat blog silahkan sahabat ganti dengan alamat blog kalian, sedang huruf yang diberi warna hijau silahkan isi dengan judul link.
7. Setelah itu klik tombol Simpan template. Selesai..

Semoga posting tentang cara membuat menu hodisontal di blogspot dapat menjadi ulasan yang bermanfaat...

41 komentar:

beritakesehatan mengatakan...

salam mbak rina.semoga sehat selalu.saya mau tanya mengenai blogging. di dalam blog ini ada menu navigasi blog dan blogspot. ketika saya buka ternyata halaman berisi beberapa artikel layaknya posting biasa.saya sudah mencoba menggunakan fasilitas yang ada di blogspot, saya masuk posting lalu edit laman.ternyata disitu hanya menyediakan fasilitas posting 1 kali saja.pada dasarnya saya mempunyai tujuan di blog saya nantinya akan saya buat halaman yang berisi beberapa postingan agar postingan saya nantinya tidak menjadi satu dalam 1 halaman. maaf mbak rina pertanyaannya panjang sekali. terimakasih banyak sebelumnya

Rina As mengatakan...

@beritakesehatan : maksudnya membuat halaman kategori / label seperti halaman SEO yang ada di menu navigasi blog saya. Kalau seperti itu, silahkan saja edit posting blog sebelumnya, pada kotak label silahkan ketikkan kategori blog anda, bila kategori lebih dari dua cukup kita pisahkan dengan tanda koma.
Kemudian link masing2 kategori / label, kita masukkan dalam menu navigasi blog.

doni sugiharto mengatakan...

masih bingung yang mbak maksud.nanti saya cari informasi lagi.kalau mungkin saya ingin contact langsung dengan mbak rina.yang readmore saya juga belum berhasil dengan cara dari mbak maupun menggunakan fasilitas yang dari blogspot..terimakasih banyak atas bantuannya..

beritakesehatan mengatakan...

sukses buat blognya....

Rina As mengatakan...

@doni sugiharto : kalau begitu, silahkan kontak saya lewat halaman KONTAK, pilih subyek pertanyaan.
Insya Allah akan segera saya balas..

Iskaruji dot com mengatakan...

ini tips bermanfaat...seandainya saja saya dulu gak nulis bikin menu drop down hover yg pake Jquery itu...mungkin pake css seperti ini akan lebih baik dan ringan...Nice share and happy blogging!

Rina As mengatakan...

@Iskaruji : terima kasih atas kunjungannya...
happy blogging too

Maspray mengatakan...

Hi rina,,i've messaged you form the Contact Form. Please read it...
Thanks.

Rina As mengatakan...

@Maspray : thanks for sending me useful information

arsip artikel mengatakan...

link nya sudah terpasang mbak rina.silahkan dicek

Rina As mengatakan...

@Arsip artikel : terima kasih sudah mengajak saya untuk bertukar link...

Nyenengke mengatakan...

terimakasih tutorialnya, kebetulan belum otak-atik terlalu banyak template blog saya :)

salam

Tablet Android Honeycomb Terbaik Murah mengatakan...

sebelumnya maaf pake anchor text dan link kontes, hehehe, klo g berkenan ya dihapus aja...

saya mau tanya, caranya bikin kontak form di blogspot seperti di blog ini tu gimana ya mbak?

Rina As mengatakan...

@Tablet Android : pakai saja layanan google docs untuk membuat contact form, saya memakainya untuk blog ini...

Aira_JrsELF mengatakan...

arigaro gazaimasu..
artikelnya membantu banget... :D

ahmad mengatakan...

Salam knl mbak rina, kalau buat sitemap nya di blogspot apa bisa automatis apa manual mbak.mhn bntuannya,mklum msh newbie :-D

Rina As mengatakan...

@Ahmad : sitemap blogspot sudah di setting oleh penyedianya langsung. Jadi kita tak perlu membuatnya. File sitemap kita adalah atom.xml atau feeds/posts/default.

DenSinyo mengatakan...

wah sip tutorialnya. tapi sayang ga bisa dicopy. kalo cuma nyalin udah waktunya lama, kemungkinan kesalahan besar. btw thx infonya

helmy wijaya mengatakan...

Mbak rina..cara masukin semua artikel posting ke menu daftar isi menu horizontal bagaimana ya...?? kaya yang mbak rina punya di menu horizontal (blog) itu lho...coz saya masih kurang tau..,tolong kasih tau ya cara-caranya...

Rina As mengatakan...

@helmy wijaya : terus terang, link artikel posting di menu daftar isi / sitemap saya pasang secara manual. Setiap selesai mempublish posting saya akan menambahkan urlnya secara manual.
Kita rasa ini tidak efisien namun hasilnya lebih seo friendly dari pada memakai javascript untuk membuat daftar isi.

rebenz mengatakan...

wah mau di copy script ny g isa :'( menyedihkan sekali klo harus ketik ulang

Hendri Efendi mengatakan...

salam kenal mbak...
saya mau nanya nih...maklum masih baru banget di dunia blog...
pada saat saya masukin yg skrip diatas (header)

waktu saya simpan muncul peringatan:

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "header" must be terminated by the matching end-tag "".

kira-kira salahnya dimana ya mbak...? terima kasih sebelumnya ya mbak.

Rina As mengatakan...

@Hendri Efendi : sepertinya script yang anda masukkan dalam header tersebut kurang lengkap sehingga muncul pemberitahuan ini. Silahkan di cek script yang anda edit di dalam template anda..

Rina As mengatakan...

@khalid : Sebenarnya bukan setengah hati namun saya terpaksa mendisable klik kanan agar blog terhindar dari para pencuri konten.
Karena blog ini saya setting disable right click jadi saya sudah tidak lagi menshare posting yang berhubungan dengan tutorial yang mengandung script dan posting yang telah terpublish ini tidak saya hapus agar tidak mempengaruhi proses crawl dan index blog.
Maaf atas ketidaknyamanan anda dan mohon untuk dimaklumi..

Ali Mursid mengatakan...

mbak,cara me link setiap kategori/ label ke menu bagaimana? mohon dikirim ke email ya mbak manis.tq >> Abiiklil@gmail.com

OMKH mengatakan...

mba rina, kalau mau membuat judul kayak punya mba gimana? itu kan kalau buka page, title berubah jadi Rina As: bla bla bla...
thanks sebelumnya..

Yuka Dwi Bantara mengatakan...

sebagai masukkan mbak,
sebaiknya di tunjukkan previewnya, supaya kita semua mengerti hasil yang akan di buat..
thanks.
yuka-dwi-bantara.blogspot.com

BLOGnya INDAKA mengatakan...

terima kasih atas infonya.
kunjungi mbak blog saya,
www.rizky-catatanku.blogspot.com.

aditya stadivarius mengatakan...

ASsalamualaikum
mbak rina maaf, setelah saya praktikan teori diatas salah,,
yang benar adalah kode CSS diletakkan setelah <![CDATA[
ya mungkin masih bisa digunakan, tetapi teori diatas dipraktikan untuk Blogspot tampilan lama
salam kenal untuk Anda

wassalamualaikum wr. wb.

Rina As mengatakan...

@aditya stadivarius : Waalaikum salam, penempatan kode CSS berada diantara kode <b:skin><![CDATA[ dan ]]></b:skin>. Jadi pada langkah di atas saya menganjurkan penempatan kode CSS tepat di atas kode ]]></b:skin>. Saya tidak menganjurkan kode CSS tepat dibawah <![CDATA[ karena dibawah kode ini adalah kepala CSS dimana berisi informasi tentang designer template. Bila kita ingin memasang kode CSS di bawah <![CDATA[ , kita letakkan kode CSS di bawah garis
----------------------------------------------- */
Terima kasih telah memberikan komentar untuk blog ini..

raive mengatakan...

makasi artikelnya kak keren ...saya masi baru ni,,buat blog ...ditunggu kunjunganya ya
http://puisir3maja.blogspot.com/

Bayu Puspa M., S.Kep. mengatakan...

TERKAIT POSTINGAN DI ATAS ADA SEDIKIT MISS SAAT SAYA COBA

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "header" must be terminated by the matching end-tag "".

SOLUSINYA SEPERTI APA YA?
TERIMA KASIH

Rina As mengatakan...

@Bayu Puspa : saya menggunakan kode di atas berhasil dengan baik. Coba anda cek kode yang terpasang pada template blog anda, amati apa ada kode yang terlewatkan khususnya pada tag penutup.

Dolargratis mengatakan...

salam kenal mbak rina,mau nanya nih gimana cara membuat link artikel post kita ke menu menu yang sudah kita buat seperti judul artikel ini" cara diet yang seimbang"kita link ke menu KESEHATAN? tolong bikinin tutorialnya mbak

Rina As mengatakan...

@Dolargratis : untuk blogspot tinggal kita isi kotak label dengan kategori / menu yang kita inginkan. Untuk kategori lebih dari satu, kita pisahkan dengan tanda koma. Untuk semua postingan lakukan langkah berikut :
Dasbor >> Edit Entri >> Edit setiap posting >> pada halaman edit posting kita masukkan kategori / menu di bagian kotak label >> terbitkan entri

Hudalloh Hanafi mengatakan...

mohon pencerahannya mbak,bagaimana cara membuat halaman kosong yang kita isi dengan beberapa vidoe/movie yang nantinya kalau kita membuat menu MOVIE dan kita isi link pada menu movie tersebut untuk ngelink ke halaman kosong tadi sehingga menu MOVIE tersebut cuma berisi link saja yang menuju halaman kosong tadi agar halaman menu tidak penuh dengan tumnail video/movietolong direview blog saya pada menu movie disana saya upload beberapa video tapi karna bukan sebuah link maka kelihatan penuh tolong masukannya www.bolopandowo.blogspot.com

Rina As mengatakan...

@Hudalloh Hanafi : mungkin anda bisa membuat halaman posting biasa dan isi dengan 1 video untuk satu halaman posting. Kemudian dalam menu MOVIE kita tinggal meletakkan link dari masing - masing halaman yang berisi video tersebut sebagai daftar isi MOVIE. Untuk membuat link kita bisa menggunakan icon link untuk membantu kita dalam membuat sebuah tautan link.

anandomoon mengatakan...

BTW,,slain mbak rina da yg udah brhasil blm sih buat menu horizontalnya??sharink donk...maklum ne,msh newbi....

Rina As mengatakan...

@anandomoon : tentu ada, ini html sederhana membuat menu horizontal semua developer site pada dasarnya memakai kerangka yang sama cuma yang berbeda adalah pada CSS untuk lebih mempercantik tampilan menu horizontal. Untuk lebih memahami tentang html dan CSS kita bisa belajar dari W3Schools.com

Sururi mengatakan...

Halo Mbak Rina, salam kenal. Saya pemula di dunia blogger. Kelihatannya blogspot menunya sekarang lain, jadi saya tidak bisa ngikuti tutorial ini. Bisa diupdate nggak ya? Makasih. ruriykpn@gmail.com

Rina As mengatakan...

@Sururi : yups mas..