
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.
3. Pada halaman Elemen Laman, klik menu Edit HTML.
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:
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
@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.
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..
sukses buat blognya....
@doni sugiharto : kalau begitu, silahkan kontak saya lewat halaman KONTAK, pilih subyek pertanyaan.
Insya Allah akan segera saya balas..
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!
@Iskaruji : terima kasih atas kunjungannya...
happy blogging too
Hi rina,,i've messaged you form the Contact Form. Please read it...
Thanks.
@Maspray : thanks for sending me useful information
link nya sudah terpasang mbak rina.silahkan dicek
@Arsip artikel : terima kasih sudah mengajak saya untuk bertukar link...
terimakasih tutorialnya, kebetulan belum otak-atik terlalu banyak template blog saya :)
salam
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?
@Tablet Android : pakai saja layanan google docs untuk membuat contact form, saya memakainya untuk blog ini...
arigaro gazaimasu..
artikelnya membantu banget... :D
Salam knl mbak rina, kalau buat sitemap nya di blogspot apa bisa automatis apa manual mbak.mhn bntuannya,mklum msh newbie :-D
@Ahmad : sitemap blogspot sudah di setting oleh penyedianya langsung. Jadi kita tak perlu membuatnya. File sitemap kita adalah atom.xml atau feeds/posts/default.
wah sip tutorialnya. tapi sayang ga bisa dicopy. kalo cuma nyalin udah waktunya lama, kemungkinan kesalahan besar. btw thx infonya
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...
@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.
wah mau di copy script ny g isa :'( menyedihkan sekali klo harus ketik ulang
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.
@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..
@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..
mbak,cara me link setiap kategori/ label ke menu bagaimana? mohon dikirim ke email ya mbak manis.tq >> Abiiklil@gmail.com
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..
sebagai masukkan mbak,
sebaiknya di tunjukkan previewnya, supaya kita semua mengerti hasil yang akan di buat..
thanks.
yuka-dwi-bantara.blogspot.com
terima kasih atas infonya.
kunjungi mbak blog saya,
www.rizky-catatanku.blogspot.com.
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.
@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..
makasi artikelnya kak keren ...saya masi baru ni,,buat blog ...ditunggu kunjunganya ya
http://puisir3maja.blogspot.com/
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
@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.
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
@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
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
@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.
BTW,,slain mbak rina da yg udah brhasil blm sih buat menu horizontalnya??sharink donk...maklum ne,msh newbi....
@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
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
@Sururi : yups mas..
Komentar baru tidak diizinkan.