![]() |
Horizontal CSS Menu |
Horizontal CSS Menu, Keren dan Sederhana -- Script ini asalnya dari orang bule, katanya, tutorial ini untuk pemula, katanya lagi, banyak pemula tidak menyadari bahwa betapa sederhananya/mudahnya membuat menu hanya dengan menggunakan CSS murni bahkan bisa dengan menambahkan efek hover yang simple namun tetap terlihat keren.
Cara membuatnya.
1. Login ke Akun blogger
2. Klik Template
3. Klik Edit HTML
4. Klik Proceed
5. Cari taq ]]></b:skin> (gunakan kontrol F untuk memudahkan pencarian)
6. Setelah dapat lalu masukkan kode dibawah ini diatas taq ]]></b:skin>
height:35px;margin:0 auto;padding:0 auto}
#nav li
{display:inline;}
#nav li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}
#nav li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}
7. Cari taq </head> (gunakan kontrol F untuk memudahkan pencarian)
8. Setelah dapat lalu masukkan kode dibawah ini dibawah taq </head>
<ul id='nav'>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
</ul>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
</ul>
9. Kik Pratinjau, kalau tidak terjadi kesalahan lalu klik save template dan lihat penampakannya.
lihat menu yang warna biru
Sumber : Tutorial to create a pretty cool, simple, horizontal CSS menu
Perhatian! Artikel ini telah di Copas secara Curang/Licik dan Rakus Oleh Blog,
http://cararahasiaini.blogspot.com
Kurang lebih ada 15 Artikel saya yang di Copas
+ Create Comment + 80 Responses so far.
wah.. keren nih sob.. saya mau utak atik template lagi deh
sy lihat sobat sdh pny menu seprti diatas cuma hoverx perlu di modif dikit lg *smile
iya sob, sudah saya ganti hovernya..
hny hover warna ya., gmn klo hover efek timbul, seprti demox..,
scripx kayak gini..
#nav li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}
tp terserah selera sobat ajalah.. *smile
Wowoww....bisa di coba2 nihh sob....ada menu dorpdown nya enggk sob!???
blom ada postinganx sob.., tp insya Allah kedepanx sy buatkan ya.. *smile
Mampir berkunjung & ijin nyimak aja dulu sob..
thanks.,
thx jg.. *smile
ctrl d dlu gan hehe,
ini bisa melayang ga ? jadi pas di geser kebawa ngikut gitu
bs tp sy gk tau gmn carax.., coba tny ke blog senior.. *smile
wah, mantab nih. saya suka sekali main-main dengan CSS. makasih ilmunya sob.
#salam terhangat dari Mr.DHI
salam hangat balik.., thx ya *smile
urusan css ga berani nguprek2....kuatir klo tambah ancuur.....*smile
sesuai namax 'sederhana', cara pasangx pun sederhana.., sebelum disave di pratinjau dlu.., klo tdk trjd kesalahan bari save.. *smile
hhhmmmm... sebenarnya ane tu bingung sob css tu apa ya gt,,
kayaknya kata tu sering ane dengar tapi ane ga tau buat apa aja sich,,
jadinya ga pernah ane pake bahkan lihat tulisan css aja dah bingung,,
tp karena ente dah baik kasih tutorial yg berguna maka ane akan cari tau, ane malu ma ente sob jadix ane harus bisa kaya ente,,
thanks sob,,,
sy jg gk terlalu paham2 amat ko'..., tp klo gk salah CSS tuh bhs pemograman pecahan dr bhs HTML..., mgkn gitu *smile
thx ya...
memang keren sob..
nice share :D
thx ya.. *smile
Bisa lgsg di coba nih gan.
thx for share
silahkan.., thx jg.. *smile
Pas bgt kawan, lapak gue lom ada menu napigasinya, gue simpen dulu, ea...
Pasti gue coba!
*syukr0n
mf, napa template yg kemarin di ganti akh..? pdhl keren abiss!, klo skrg gk nyambung antara warna sidebar dgn warna latarx... *smile
yang penting gak bikin berat aja kang.. :)
tidak memberatkan sob..! liat aja script2x gk terlalu bnyk kan..? *smile
Udah lama gak... Kotak katik...template nih...jd pengen ta coba di blog dumie ane...
Trims bang :)
dicoba aja dlu bang.., cocok tuk semua latar tinggal diganti warna latarnya aja... *smile
hmmm.... makin mendalami CSS nih kliatannya yah sob...emang sih permainan animasi kreasi CSS ga ad matinya,,slain bikin ketagihan bkin mata melek juga :)
gk sob!, sy gk mendalami CSS, sy sebenarx pengen sh tp gk waktu, belajar CSS gk penting yg penting itu belajar agama, mending bodoh soal CSS drpd Bodoh soal agama..! *smile
Pertamnya mnta maaft krna sdh menggunakannya ....
Sya mau mnunggu artikel agama yg menarik dri blog ini,
insya Allah klo bukan hari ini mgkn besok.., sy lg nyari2 materi yg cocok ni... thx ya.. *smile
kalau saya udah disediain menu ini mas :D
jadi saya save aja source code nya aja ah ....
silahkan..! thx ya.. *smile
Wah keren nihs sob..
thx ya...
keren sob,pake hover.
aq dah pasang trus klu pake hover kena edit lagi dunk....*smile
sesuai selere masing aja lah sob.. *smile
jadi lebih bagus ya, jarang menu yang seperti itu... kapan kapan ah dicoba.. terima kasih..
thx ya *smile
Keren banget kawan. bisa di coba.
silahkan *smile
Sepertinya boleh nih untuk sekedar di coba menu css nya gan..
silahkan... *smile
postingan nya sangat membantu sekali gan ,saya tunggu postingan selanjut nya , jgn lupa mampir di blog saya ABduh Blog
jgn melampirkan link hidup ya.. thx *smile
wow makin kece aja nih blog !
---
Please visit : JadikanPinter! | UnikBanget! - I will visit back!
jgn melampirkan link hidup ya.., lain kali sy langsung hapuss! thx *smile
wah keren nih sobat...? saya amankan dulu ya..? ntr saya coba kalau ada waktu hehehehe
silahkan thx ya *smile
Ternyata simpel sekali. . :D
iya sob bisa dilihat scritpx aja gk panjang2 amat *smile
Dulu saya juga menggunakan menu seperti ini, tapi sekarang lebih nyaman menggunakan bawaan blogspot.
sesuai selera masing2 ajalah sob *smile
tutorial yg sngat bermanfaat gan.
please visit back
oke thx ya *smile
sedikit saran, mungkin di kasih attribut transition akan lebih menarik mas :D
cntoh :
nav{....
-moz-transition:2.5ms;
-webkit-transition:2.5ms;
transition:2.ms;}
hihihihi .
:D
akhirx ada jg yg mau bagi2 ilmux, thx ya, sy langsung coba... *smile
btw yg 'hihihihi.' itu bukan masuk dlm kode kan hehehe...
keren mas tapi kalo mau ditambain dropdown gimana o.O
mf sob sy gk tau.., coba nyari tutorialx di google..., mf ya... *smile
yaahh, terima kasih deh mas :D
Akan sya coba gan.jngan lupa mampir balik yah.
Mampir lagi bang...selamat tahun baru islam 1434 h...ya bang :)
pengin nyoba sih, secara template saya kayak gitu melulu dari masa ke masa, hehe
Tadi saya udah nyoba sob. Tapi kok judul blog saya jadi ke tengah ya ? Nggak jadi deh. Biar ke kiri gimana ?
kemungkinan besar script menu ditas mirip2 dgn script menu yg skrg sobat pake jd sobat tinggal menyesuaikan sj..., mksdx jgn ditimpa hrs hapus dlu CSS menu yg lama lalu dan hapus HTML menu yg lama.., dicoba lg sob.., warna biru diatas sangat cocok dgn warna latar pd blog sobat *smile
hm... aku gk masang deh.. :D hihihi pake menu yg sederhana aja.. :D
the power of simplicity, dan sepertinya memang sederhana tapi mempesona. tenkyu gan...
kayanya keren nih sob buat yang blognya bertema blogazine :)
izn nyoba mas...:D mumpung lg ngedit themplate nih...
makasih mas..
Bisa lgsg dicoba nihh gan.
jngan lupa visut back yah.
makasih sobat, ane bungkus dulu, nanti bisa dicoba:}
met mlm genk. wah ane coba genk trmksi,ni trik nya.
terimakasih untuk ilmu nya gan......
Absen pagi kawan.
oh untuk navbar ya? :)
mantap..:)
wah manteb ini CSSnya :D
makasih infonya , ijin nyobain Sob :D
banyak juga template yang sudah menyediakan secara langsyng, cukup kita mengedit sendiri linknya... sy suka sekali dengan template yang di pake sm Rohis facebook ni... modifikasi yang sangat mantap untuk profesional web desain :) salam Ukhuwah :)
makasih buat adminnya yang keren sekali karena sudah follow www.bringislam.web.id
syukran.., semua bukan 100% hasil modif sy akh.., maskolis jg turut membantu. sy gk terlalu tahu akan bhs html css dan turunan2nya *smile
btw link sobat yg www.bringislam.web.id blom sy pasang, kmarin yg terpasang hny http://store-bringbackislam.blogspot.com tp entar www.bringislam.web.id sy pasang.. *smile
Alt f4 dulu gan. Bagus juga . .
biar ada di tengah2 gimana caranya ya gan :) makasih
Posting Komentar
Terima Kasih banyak atas saran dan kritiknya.
Sama seperti peraturan yang dibuat oleh para blogger pada umumnya.., cuma disini saya harapkan agar para pengunjung untuk lebih fokus pada artikel kami yang bertemakan Agama (Islam), khususnya untuk saudara-saudari kami yang Muslim dan Muslimah.
0. Yang OOT silahkan masuk ke menu Buku Tamu/Blogwalking!
1. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
2. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
3. Harus Sopan
4. Admin tidak meladeni Debat kusir
5. Bercanda gk boleh ada unsur pornonya dan unsur Bohongnya
6. Silahkan melampirkan link Mati, gk boleh link hidup