Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot

Horizontal Menu: Pure CSS 3D Button Effect for Blogger

Menu/navigasi horizontal Blogger/Blogspot ini juga dibuat dengan HTML dan CSS murni tanpa sentuhan javascript maupun jquery., sama seperti menu/navigasi horizontal sebelumnya. Cara membuat dan memasangnya pun sangat sederhana dan tanpa mengedit template HTML, karena aturan CSS saya buat menyatu dengan HTML nya.

Cara membuat/memasang widget horizontal menu/mavigation 3d button Blogger/Blogspot:
1.  Copy dan edit kode di bawah ini:
Kode: 

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
</ul>
</div>

- Ganti  # dengan url yang ingin anda pasang di menu, misalnya url homepage, daftar isi, label, dan lain-lain.
- Ganti Link 1, Link 2, Link 3, dan seterusnya dengan nama menu/anchor text sesuai dengan yang anda inginkan, misalnya Home, Daftar Isi, Tips, dan seterusnya.
- Jika ingin menambah/menghapus daftar menu, tambahkan/hapus baris: 
<li><a href="#"><span>Link</span></a></li> sebelum </ul>.

2. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

3. Setelah pop up window muncul, pilih opsi HTML/Javascript

4. Kemudian masukkan Kode yang sudah diedit tersebut ke kolom configure HTML/Javascript.
 

7. Klik save.
8. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget).
9. Save lagi.
10. Done! menu/navigasi horizontal Blog Blogger anda siap digunakan.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Membuat Menu Horizontal CSS 3D Button 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 57 Comment(s):

DC said...

keliatan bagus kak, tpi klo di aplikasiin ke blog apakah membuat loading blog menjadi lambat ?

Ahmad Khoirul Azmee said...

karena itu cuma dibuat dari HTML dan CSS (CSS3), tanpa javascript maupun jquery, bahkan tanpa gambar, maka loadingnya gak lama :D

DewiFatma said...

Bukan masalah di komputer nih, otak gw yang loadingnya lama... ntar.. *bacalagi*

Pengen bikin, tapi masih bingung aja...

Ahmad Khoirul Azmee said...

@vignarulo: Gracias Mucas! Thanks a lot. Okay I'll be soon visiting your blog.

@Mba' Dewi: Hihihihi..... okay mbak, silahkan baca lagi. BTW kunjungan soreku ke blogmu akhirnya terlaksana juga tadi :D

JP said...

makasih gan.tutornya bagus, aku ke bantu nih, he he he maklum baru......aku copas ya gan.

Shinobi said...

nice info sob ...
thank's

kuryasyas said...

om, makasih atas infonya..
sangat membantu untuk pemula kaya saya... :)

eL-hAkeeM said...

gan kalo menu horizontalnya dikasih dropdown gmn caranya coz q dah prnah pasang tp kgak jadi,,

mohon bimbingannya,,

Ahmad Khoirul Azmee said...

menu itu saya buat fixed bro. ga bisa diutak-atik jadi dropdown, karena ada bagian2 CSS yang sudah paten. kalo mau bikin menu horizontal dropdown, silahkan cari di Google dengan keyword tersebut. ada banyak kok.

Klik menarik said...

Terima kasih Banyak Mas...!!
Postingannya Sangat Membantu...
Mas Boleh Mesen tidak?

Saya ingin Kode Menu Seperti Terselubung.blogspot.com

Ahmad Khoirul Azmee said...

Halo. Terima Kasih kembali. Untuk menu horizontal sesuai permintaan anda, sudah saya buatkan. Cek disini:
Menu Horizontal Tabs Sederhana

joyo kusumo said...

mksih gan ilmunya sngat membantu nie soalnya baru belajar copas ya gan..sukses selalu

SUDARMAN said...

Tdak ribeth ,simpel tuturial'a! Tp kndala baru muncul nie.Gmna cara ngisi MENUnya Maz,,,Mksih

Ahmad Khoirul Azmee said...

Seluruh kode nya di kopi dulu. lalu liat kode2 di bagian bawah, ganti # dengan url/link yg ingin dipasang. Ganti nama Link 1, Link 2, dan seterusnya dengan text yg ingin digunakan pada masing2 link/url tadi.

Bali Vinly Villa said...

Wah cakep banget blog nya pingin ikut bisa bikin menu yang diatas sama gambar itu gimana caranya ya. thanks

B_Riot said...

keren bgt blog nya....
di tunggu kunjungannya


www.solution-u.blogspot.com

syahonlineshop said...

thax banget tips'nya :)

Supriyadi Pro said...

Trims kawan...

Zainal said...

sangat bermanfaat .....mantab

contraire orabuni :) said...

kerennnnnnnnnnnnnnnnn

CallMeNur said...

wah,,keren bgt gan..ijin copast ya...lagi bljr blog..mhn bantuannya..mksh gan^^

http://menursaja.blogspot.com/

K2 Ichsan said...

Kereen, sudah saya coba sob. Tapi kok tidak sama dengan punyanya sobat ya?
Btw, kalau saya mau copas artikel ini, tapi ingin persis seperti ini. Bagaimanacaranya sob? lalu kode yang di bawah (<a href=...) di tempelnya dimana?
Afwan pertanyaannya banyak euy, maklum masih belajar sob...

svc said...

Thanks all tips trik nya bermanfaat banget sdh saya coba dan ok

yusrin said...

thanks gan..........berguna sekali......
tukaran link dong soalnya link agan saya lihat bagus sekali
anak-boetown.blogspot.com

K2 Ichsan said...

Mohon ijin untuk menayangkan artikel ini di blog saya (dengan beberapa editing) & tolong diperiksa apa sudah betul/sesuai atau belum?
Syukron katsir atas perkenannya...

http://k2ichsan.blogspot.com/2011/12/cara-membuat-menu-horizontal-css-3d.html

Ahmad Khoirul Azmi said...

okay silahkan Mas Ichsan, pencantuman link sumber sudah ada jadi tidak masalah. Syukron juga :)

wendy novianto said...

mantap gan artikelnya...

SEKEDAR TAHU said...

blognya mantap brow....aku suka...kaya' blognya Blog.cyber4t.blogspot.com

jono said...

salam kenal mas.
mas boleh minta tutorial css faeture n post yang di side bar? kombinasi warna dan boxnya keren pakai delay waktu.
kalau bisa diposting diblog ini atau di kirim ke email saya ya mas. mohon konfirmnya kalau uda ada.
makasi banyak lo mas.

Arul Learn said...

Wah Postingan bagus nie gan
makasih info nya..:D

Kriting said...

boss, saya mengalami masalah dengan pembuatan menu label seperti ini. saya sudah buat sesuai dengan petunjuk, tapi masalahnya link yang saya masukkan nggak muncul.
1. label "bawaan" ada yang menggunakan judul huruf besar.misal Wisata Kuliner. huruf "W" dan "K" pada judul label, huruf besar. ketika saya link-kan, dia nggak bisa masuk ke label itu. karena linknya menggunakan huruf "w" dan "k" kecil.

mohon pencerahannya boss.

terima kasih.

Way Of Live said...

Mas Ahmad >>> warnanya ga bisa dirubah ?? kalu bisa tolong kasi tau caranya gmana

Victor Chiarouven said...

cara buat categori gimana sih?

Ahmad Khoirul Azmi said...

silahkan lihat disini http://buka-rahasia.blogspot.com/2011/06/karakteristik-dan-optimalkan-label.html

andi rachmat said...

waw keren banget bos. saya pemula minta ijin copas...

Info Bisnis said...

Saya coba pasang, berarti diganti dengan headernya ya bos?

Maksih sharenya..

smart said...

bang kasih tau cra ganti header dg gambar donx bang!

Restiani Dini Rahayu said...

Gan saya bingung nihh...
ada gambar hasilnya ga gan???

frisca-profesionalwedding said...

klo mau di tambahin sub menu ke bawah gmana gan,,,,

Berbagi Kreativitas said...

Banyak pilihan nih untuk menu horizontalnya.. Cari yang lebih ringan cukup dengan CSS+HTML disini banyak Saya temukan. Untuk pelengkap sekaligus saran untuk multi level mungkin belum dan perlu ditambah? :D

tricajus said...

makasih banyak ya gan atas infonya

mencegah lemah syahwat said...

salam kenal ya gan infonya berguna sekali nih

gopar-it said...

muantab..ane pasang ya gan??

warungcabbe.com said...

Makasih gan tutorial nya sangat berguna untuk saya.
tapi ada beberapa hal yg ingin saya tanyakan.
cara isi laman dari menu2 tsb yg udah kita buat gmn?
mohon pencerahannya.

luhkatfim said...

ngasih link nya gimana gan, saya kasih link google kok muncul tulis alamat yang anda cari tidak ada

warna logam said...

prakteknya gimana ya... membuat menu horisontal.. biar gga ribet

Surya.C.G said...

Sama blog Saya kurang cocok bro,,
tapi makasih dah,, :D

eone davilza said...

Mantap mksih mas bro infox bisa di coba nih...

ermawan tri said...

mas pada posting cara membuat recent poss itu kok di blog saya posting nya gag gerak otomatis malah diem kayak bekicot . . .padahal kecepatanya sudah saya ganti ,itu kira2 gimana ya biar bisa gerak? thanks before
tolong kirim jawabanya di zerospectra@gmail.com

rizqi tama said...

bagus mas, tp untuk mengatus lebar dan tingginya, apanya yg di edit

seputarsoftware said...

semakin banyak ilmu kalo berkunjung kesini :)

thanks mr....

fikri said...

bagus sob jadi bertambah ilmu ane, thaks

Irfan Prastiyanto said...

Woow bagus sob, kayak 3 dimensi..

Sekarang saya lagi belajar meringankan blog. Akan saya coba navigasi ini... Terima kasih... Desainew

amin ben ahmed said...

makasih bos..:)

teknikedukasiinformasi.blogspot.com said...

mas,setiap kali saya search tentang yang berhubungan dengan blog kenapa blog mas terus yang keluar di page 1 nya google...
gimana mas bisa seperti ini???saya pengen belajar dari mas,,saya adalah pelajar pemula yang ingin mencoba mencari uang diinternet,tapi sampai sekarang saya masih tahap newbie,,mohon bantuannya mas?
alamat email saya:

jodi9b16@gmail.com
tolong kunjungi juga blog saya,bagaimna keadannya menurut mas???saya minta bantuannya sekali,,,
saya mulai berkomitmen membuat artikel yang original sendiri,ya itung2 membangun karakter dulu.

Ahmad Khoirul Azmi said...

Hai, tentu prosesnya panjang kalo dibahas satu per satu, tapi sebenarnya semua sudah saya bahas di artikel-artikel saya. Jika ada pertanyaan spesifik langsung saja kontak lewat FB atau contact form.

Plantations said...

selamat sore mas, permisi mas, maaf sebelum nya, saya telah mengkopy artikel yang ada disini untuk saya terapkan di header blog saya, makasih sebelum nya yach mas.

http://lyonair.blogspot.com

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