Rina As: Cara Membuat Menu Horizontal di

Blogspot

Home

Blog

Blogspot

SEO

Sitemap

Tukar Link

Senin, 25 Juli 2011

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.

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...
Diposkan oleh Rina As di 23:06
Kirimkan Ini lewat Email Berbagi ke Twitter Berbagi ke Facebook
Label: blogspot, cara, horisontal, membuat, menu
Posts Terkait:

Cara Mengetahui dan Cek Blog yang Terinfeksi Malware

Cara Membuat Contact Form dengan Google Docs | Halaman Kontak

Cara Memasang Contact Form di Blog | Halaman Kontak

Cara Membuat Menu Horizontal di Blogspot

Cara Membuat Read More di Blogspot

Cara Memasang Widget di Blogspot | Blogger

Cara Mengubah Nofollow menjadi Dofollow Blog

Daftar Blog Gratis di Blogspot

Daftar Blog Gratis

Cara Melakukan Prediksi Google Pagerank Sendiri

Cara Memunculkan Authorship Content di Google Search

Cara Cek Validasi Template dengan W3C Validation

Cara Meningkatkan Jumlah Halaman Index di Bing dan Yahoo (2)

Cara Meningkatkan Jumlah Halaman Index di Bing dan Yahoo

Cara Masuk Halaman Pertama Google Blog Search

Cara Cek Hasil Crawl Melalui Google Webmaster Tool

Cara Mencegah Blog dari Blacklist Google Akibat Terinfeksi Malware

Cara Membersihkan Blog Yang Terinfeksi Malware

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
1 Agustus 2011 07:05
Rina As: Cara Membuat Menu Horizontal di Blogspot

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.
1 Agustus 2011 18:49
Rina As: Cara Membuat Menu Horizontal di Blogspot
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..
1 Agustus 2011 19:28
Rina As: Cara Membuat Menu Horizontal di Blogspot
beritakesehatan mengatakan...
sukses buat blognya....
1 Agustus 2011 19:29
Rina As: Cara Membuat Menu Horizontal di Blogspot
Rina As mengatakan...
@doni sugiharto : kalau begitu, silahkan kontak saya lewat halaman KONTAK, pilih
subyek pertanyaan.
Insya Allah akan segera saya balas..
1 Agustus 2011 20:09
Rina As: Cara Membuat Menu Horizontal di Blogspot
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!
1 Agustus 2011 21:46
Rina As: Cara Membuat Menu Horizontal di Blogspot

Rina As mengatakan...
@Iskaruji : terima kasih atas kunjungannya...
happy blogging too
3 Agustus 2011 02:52
Rina As: Cara Membuat Menu Horizontal di Blogspot
Maspray mengatakan...
Hi rina,,i've messaged you form the Contact Form. Please read it...
Thanks.
3 Agustus 2011 04:22
Rina As: Cara Membuat Menu Horizontal di Blogspot
Rina As mengatakan...
@Maspray : thanks for sending me useful information
3 Agustus 2011 22:29
Rina As: Cara Membuat Menu Horizontal di Blogspot
arsip artikel mengatakan...
link nya sudah terpasang mbak rina.silahkan dicek
4 Agustus 2011 00:11
Rina As: Cara Membuat Menu Horizontal di Blogspot
Rina As mengatakan...
@Arsip artikel : terima kasih sudah mengajak saya untuk bertukar link...
4 Agustus 2011 14:51
Rina As: Cara Membuat Menu Horizontal di Blogspot
Nyenengke mengatakan...
terimakasih tutorialnya, kebetulan belum otak-atik terlalu banyak template blog saya :)
salam
4 Agustus 2011 23:01
Rina As: Cara Membuat Menu Horizontal di Blogspot
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?
11 Agustus 2011 20:02
Rina As: Cara Membuat Menu Horizontal di Blogspot
Rina As mengatakan...
@Tablet Android : pakai saja layanan google docs untuk membuat contact form, saya
memakainya untuk blog ini...
14 Agustus 2011 19:28
Rina As: Cara Membuat Menu Horizontal di Blogspot
Aira_JrsELF mengatakan...
arigaro gazaimasu..
artikelnya membantu banget... :D
29 Agustus 2011 23:44
Rina As: Cara Membuat Menu Horizontal di Blogspot
Tahitian Noni Juice mengatakan...
makasih gan artikelnya sangat membatu saya.. maklum masih newbie... salam knl
6 September 2011 22:08
Rina As: Cara Membuat Menu Horizontal di Blogspot
Data Mobile Phone mengatakan...
makasih mbak rina tutorialnya.... salam knl
6 September 2011 22:09
Rina As: Cara Membuat Menu Horizontal di Blogspot
Business And Finance mengatakan...
makasih banyak sudah di share ilmunya
6 September 2011 22:10
Rina As: Cara Membuat Menu Horizontal di Blogspot

Im Jane mengatakan...
Terima kasih infonya mbak Rina,sangat bermanfaat :)
5 Oktober 2011 10:24
Rina As: Cara Membuat Menu Horizontal di Blogspot
ahmad mengatakan...
Salam knl mbak rina, kalau buat sitemap nya di blogspot apa bisa automatis apa manual
mbak.mhn bntuannya,mklum msh newbie :-D
13 Oktober 2011 01:41
Rina As: Cara Membuat Menu Horizontal di Blogspot
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.
13 Oktober 2011 17:24
Rina As: Cara Membuat Menu Horizontal di Blogspot
RereRiyad ELsitong mengatakan...
makasihh..
14 Oktober 2011 21:56
Rina As: Cara Membuat Menu Horizontal di Blogspot
DenSinyo mengatakan...
wah sip tutorialnya. tapi sayang ga bisa dicopy. kalo cuma nyalin udah waktunya lama,
kemungkinan kesalahan besar. btw thx infonya
21 Oktober 2011 03:29
Rina As: Cara Membuat Menu Horizontal di Blogspot
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...

2 November 2011 23:31

Rina As: Cara Membuat Menu Horizontal di Blogspot
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.
2 November 2011 23:52
Rina As: Cara Membuat Menu Horizontal di Blogspot
rebenz mengatakan...
wah mau di copy script ny g isa :'( menyedihkan sekali klo harus ketik ulang
3 November 2011 11:54
Rina As: Cara Membuat Menu Horizontal di Blogspot
Damin,S.Pd. mengatakan...
Makasih.Akan saya coba.
4 November 2011 23:03
Rina As: Cara Membuat Menu Horizontal di Blogspot
Anonim mengatakan...
wah, makasih...sangat bermanfaat
8 November 2011 23:07
Rina As: Cara Membuat Menu Horizontal di Blogspot
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.
9 November 2011 23:11
Rina As: Cara Membuat Menu Horizontal di Blogspot
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..
10 November 2011 05:00
Rina As: Cara Membuat Menu Horizontal di Blogspot
khalid mengatakan...
Aduh capcus deh., setengah hati nih ngasih infonya. mles mesti ngetik ulang.
10 November 2011 15:11
Rina As: Cara Membuat Menu Horizontal di Blogspot
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..
11 November 2011 14:41
Rina As: Cara Membuat Menu Horizontal di Blogspot
Ali Mursid mengatakan...
mbak,cara me link setiap kategori/ label ke menu bagaimana? mohon dikirim ke email ya
mbak manis.tq >> Abiiklil@gmail.com
16 November 2011 20:55
Rina As: Cara Membuat Menu Horizontal di Blogspot
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..
18 November 2011 21:55
Rina As: Cara Membuat Menu Horizontal di Blogspot
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
20 November 2011 19:55
Rina As: Cara Membuat Menu Horizontal di Blogspot
BLOGnya INDAKA mengatakan...
terima kasih atas infonya.
kunjungi mbak blog saya,
www.rizky-catatanku.blogspot.com.
22 November 2011 23:37
Rina As: Cara Membuat Menu Horizontal di Blogspot
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.
5 Desember 2011 17:33
Rina As: Cara Membuat Menu Horizontal di Blogspot
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..
6 Desember 2011 14:00
Rina As: Cara Membuat Menu Horizontal di Blogspot
raive mengatakan...
makasi artikelnya kak keren ...saya masi baru ni,,buat blog ...ditunggu kunjunganya ya
http://puisir3maja.blogspot.com/
29 Desember 2011 18:48
Rina As: Cara Membuat Menu Horizontal di Blogspot
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 endtag "".
SOLUSINYA SEPERTI APA YA?
TERIMA KASIH
23 Januari 2012 01:21
Rina As: Cara Membuat Menu Horizontal di Blogspot
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.
24 Januari 2012 15:54
Rina As: Cara Membuat Menu Horizontal di Blogspot
Poskan Komentar
Posting Lebih Baru Posting Lama Beranda
Langgan: Poskan Komentar (Atom)

Select Language

Mengenai Saya
Rina As

Follow Me By
Post
Komentar

Arsip Blog

2012 (6)
o Februari (1)

Update Pertama Google Pagerank Februari 2012

o Januari (5)

Cara Melakukan Prediksi Google Pagerank Sendiri

Pilih Optimasi SEO Sendiri, Google AdWords atau Ja...

Google Luncurkan Bisnis Lokal Go Online untuk UKM ...

Free Dofollow Article Directory Berpagerank Tinggi...

Posting Blog Terbaik Tahun 2011 Dari Rina As's Blo...

2011 (67)
o Desember (5)

Cara Memunculkan Authorship Content di Google Sear...

Cara Cek Validasi Template dengan W3C Validation

Cara Meningkatkan Jumlah Halaman Index di Bing da...

Cara Meningkatkan Jumlah Halaman Index di Bing da...

Cara Masuk Halaman Pertama Google Blog Search

o November (11)

Cara Cek Hasil Crawl Melalui Google Webmaster Tool...

Dampak penggabungan Yahoo Site Explorer dan Bing W...

Yahoo Site Explorer bergabung dengan Bing Webmaste...

Menggenggam Samsung Galaxy S2 bersama Contest Gadg...

Memahami Laporan Crawl Error di Webmaster Tool Goo...

Kapan Waktu Yang Tepat Membangun Blog Baru

Submit Url dengan Fetch as Googlebot | Google Webm...

Update Google Pagerank November 2011

Menyambut Gadget Impian dari Contest Denaihati

Memaksimalkan Optimasi Seo dengan Share Posting di...

Deteksi Kesehatan Blog di Google Webmaster Tool

o Oktober (11)

Cara Mencegah Blog dari Blacklist Google Akibat Te...

Cara Membersihkan Blog Yang Terinfeksi Malware

Cara Mengetahui dan Cek Blog yang Terinfeksi Malwa...

Cara Cepat Terindex Search Engine

Cara Memasang Contact Form di Blog | Halaman Konta...

Cara Efektif Meningkatkan Pageview Blog

Struktur Link Terbaik Untuk Membangun Backlink Ber...

Cara Mengetahui Posisi Blog di SERP Google Yahoo B...

Hal Dasar yang Wajib Dipelajari Blogger

Cara Meningkatkan Ranking Alexa

Cara Meningkatkan Trafik Blog

o September (11)

Cara Mengetahui Posisi di SERP Google | Checker T...

Optimasi SEO Menggunakan Demote Sitelink Google

Selamat Ulang Tahun Ke-13 Google

Bagaimana Cara Mendapatkan Sitelink | Google Sitel...

Peran Robots.txt dalam Optimasi SEO | Webmaster T...

Google Plus Resmi di Buka Untuk Umum | Google+

Cara Mendapatkan Alamat Username Google+ (2)

Submit Url di Berbagai Search Engine | Add Url

Optimasi Seo Dengan Gambar | SEO on Page

Cara Mempertahankan Posisi di Halaman Pertama Sear...

Optimasi dengan Penempatan Keyword yang Tepat | SE...

o Agustus (7)

Faktor yang Mempengaruhi Pagerank Google

Cara Membuat Contact Form dengan Google Docs | Ha...

Cara Menghapus Crawl Error di Google Webmaster Too...

Google Plus Perpaduan Facebook dan Twitter

Ada Apa Dengan Google Pagerank

Cara Memilih Judul Posting Blog | SEO on Page (2)

o Juli (11)

Cara Membuat Menu Horizontal di Blogspot

Cara Membuat Read More di Blogspot

Cara Mendapatkan Alamat Username Google+

Tentang Jejaring Sosial Google Plus | Google+

Optimasi Seo Menggunakan Anchor Text

Optimasi Dengan Memasang Meta Tag | SEO On Page

Manfaat daftar di Webmaster Tool Google Yahoo Bing...

8 cara meningkatkan frekuensi crawl search engine

Cara Submit Sitemap di Bing Webmaster Tool

Cara Submit Sitemap di Yahoo Site Explorer

Cara Daftar Sitemap di Google Webmaster Tool

o Juni (6)
o Mei (5)

Entri Populer

Cara Masuk Halaman Pertama Google Blog Search

S ahabat blogger tahu Google blog search ? Yups, Google blog search adalah mesin
pencari Google yang khusus melist blog saja. Di sana tidak...

Cara Membuat Menu Horizontal di Blogspot

P enting sekali sebuah blog memiliki navigasi situs yang didalamnya terdapat link yang
menuju ke halaman about, halaman kontak sampai pada h...

Cara Membuat Contact Form dengan Google Docs | Halaman Kontak

M emiliki sebuah halaman kontak atau contact form bagi sebuah blog pasti sangatlah
penting karena melalui contact form inilah kita bisa beri...

Cara Daftar Sitemap di Google Webmaster Tool

G oogle Webmaster Tool adalah sebuah layanan dari google yang akan memandu kita
bagaimana cara mengoptimalkan blog agar terindex baik di goo...

Cara Submit Sitemap di Bing Webmaster Tool

B erbicara tentang search engine Bing, kita pasti akan teringat dengan search engine
milik Mocrosoft seperti MSN, live.com dan windows live....


Cara Memasang Contact Form di Blog | Halaman Kontak
S ebelumnya pada posting Cara Membuat Contact Form dengan Google Docs | Halaman
Kontak telah di bahas cara membuat contact form namun belum...

Cara Cepat Terindex Search Engine

B agi kita yang baru saja memiliki blog baru maupun blog lama namun telah lama tidak
melakukan publish konten pasti akan menemui sedikit ham...

Submit Url di Berbagai Search Engine | Add Url

S etelah kita mempublish konten entah itu artikel, gambar , video atau yang lainnya
tentunya kita menginginkan search engine cepat mengirimk...

Update Pertama Google Pagerank Februari 2012

S ahabat blogger semua, ada berita baik untuk kalian. Setelah sekian lama Google
Pagerank tak mengalami update dan terakhir terjadi update ...

Cara Melakukan Prediksi Google Pagerank Sendiri

H ampir seluruh blogger selalu memperhatikan nilai google pagerank mereka. Tiap kali
selalu meluangkan waktu untuk melakukan pengecekan goo...

Info Blog
Pg tool
Sedot WC
Diberdayakan oleh Blogger.

Original Text:
Show alternative translations