Cara Membuat Menu Horizontal CSS Stripped Red Blogger/Blogspot

Menu/Navigasi adalah bagian blog/website yang tidak dapat dipisahkan. Keberadaannya sangat penting sebagai alat bagi pengunjung menuju ke bagian/halaman blog/website.

Pada posting kedua CSS Horizontal Menu untuk Blogger/Blogspot, saya persembahkan "Stripped Red Horizontal Menu for Blogger Blog"
Cara memasang widget menu horizontal menu di Blogger/Blogspot:
1. Masuk ke dashboard > Design/Rancangan > edit HTML
2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
Kode CSS:
ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("http://2.bp.blogspot.com/-umuM1wnuz40/TcuRP2rASsI/AAAAAAAAAdY/ubN3m056CUs/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}
ul.menu li {display:block;float:left;margin:0;padding:0;}
ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}
ul.menu li a:hover,.current {color:#fff;background:url("http://2.bp.blogspot.com/-umuM1wnuz40/TcuRP2rASsI/AAAAAAAAAdY/ubN3m056CUs/s1600/bg.png") repeat-x top left;text-decoration:none;}
ul.menu .current a {color:#fff;font-weight:700;}
/*Garis Merah*/
ul.menu.red{background-color:#B11718;}
ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}
3. Save template.
4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan  # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan.
Kode HTML:
<ul class="menu red">
<li class="current"><a href="#(url homepage anda)">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>
Contoh:
<li class="current"><a href="http://buka-rahasia.blogspot.com">Home</a></li>
Jika ingin menambah atau mengurangi link menu, tambah atau hapus baris:
<li><a href="#">anchor text</a></li> sebelum </ul>
5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget
6. Setelah pop up window muncul, pilih opsi HTML/Javascript
7. Kemudian masukkan Kode HTML yang telah diedit ke kolom configure HTML/Javascript.

 
7. Klik save.
8. Drag gadget/widget tersebut ke bawah/atas header. 
9. Save lagi.
10. Done!

Re-coded and modified for Blogger/Blogspot Blogs by: Ahmad Khoirul Azmee.
Credits to coder: cssmenumaker
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Membuat Menu Horizontal CSS Stripped Red Blogger/Blogspot
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 19 Comment(s):

wargacibodas said...

Mantap informasinya ...salam kenal jika berkenan silahkan mampir ke blog saya...

Ahmad Khoirul Azmee said...

oke salam kenal juga... insya Allah, pasti mampir :D

mohdyamin said...

thanks sobat,,sukses selalu...

Anonymous said...

bookmark dulu tank bos....

Pian Uhuy said...

sip gan...ane masih rada bingung kasih link menunya...ane coba klik menu agan...kok urlnya pasti mengandung /p/,,,,.html

maksud p di situ apa...mohon penerangannya

Ahmad Khoirul Azmee said...

Itu adalah bagian url dari halaman statis blog blogger. Kamu bisa membuatnya melalui new post > klik edit pages/edit halaman > add a new page. Halaman statis bersifat individual dan bukan bagian dari urutan posting. biasanya digunakan untuk membuat about, contact, dan lain2 yang bukan berhubungan dengan posting artikel. Kebetulan sebentar lagi saya akan posting tentang page statis blogger serta fungsi-fungsi`nya.

Anonymous said...

misi gan, ane baru belajar ngoprek blogg, jadi masih awam....
kalo boleh ane minta kode html+cara bikin tampilan menu kaya blog agan donk....
soalnya dari kemaren ane coba berbagai cara dari berbagai blogg gk ada yang berhasil gan....
kalo bisa kirim lewat email ya.... (syaahru96@gmail.com)
makasih sebelumnya.... :)

Agus Budiyono said...

untuk membuat menu seperti punya abang yg dblog ini bagaimana

My Inspiration said...

mas, cara agar kalimatnya penuh ke kanan gimana

johannezalbert said...
This comment has been removed by the author.
johannezalbert said...

bang, sewaktu dah berhasil..aku mau klik menu ny kok g muncul apa-apa??
atau harus di atur dulu ya?? cmana cara aturnya supaya berfungsi tombil menu itu bang???

pengejar mimpi said...

kang khoirul buatkan contoh urldaftarisiblog masih awan trimz sebelumnya....

dedhy said...

terima kasih kang udah share tutorialnya..
izin copas script nya, mo aku terapin di blog ku

yaheu said...

keren gan,, dah aq coba. thanks ya..

Gaptek32 said...

makasih gan, berhasil nih menu horizontalnya

Zie said...

Thank's info'y...bermanfaat bngt :)

anakmalamjogja said...

mantep infone gan..matur tankyu

ABU NAWAS said...

gan mhon bntuannya, knpa pas mskkan code css ad tlisan merhah bla,bla,

Ahmad Khoirul Azmi said...

kasih contoh kode error-nya atau kasih screenshotnya ya

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap