Home » » Horizontal CSS Menu, Keren dan Sederhana

Horizontal CSS Menu, Keren dan Sederhana

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> 

#nav {background: #2175bc;repeat-x top;width:980px;
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>

 
9. Kik Pratinjau, kalau tidak terjadi kesalahan lalu klik save template dan lihat penampakannya. 

DEMO 
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
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Rohis Facebook

+ Create Comment + 80 Responses so far.

13 November 2012 23.17

wah.. keren nih sob.. saya mau utak atik template lagi deh

13 November 2012 23.28

@yusrandantesy lihat sobat sdh pny menu seprti diatas cuma hoverx perlu di modif dikit lg *smile

13 November 2012 23.47

Wowoww....bisa di coba2 nihh sob....ada menu dorpdown nya enggk sob!???

13 November 2012 23.51

Mampir berkunjung & ijin nyimak aja dulu sob..
thanks.,

14 November 2012 00.59

ctrl d dlu gan hehe,
ini bisa melayang ga ? jadi pas di geser kebawa ngikut gitu

14 November 2012 03.12

wah, mantab nih. saya suka sekali main-main dengan CSS. makasih ilmunya sob.

#salam terhangat dari Mr.DHI

14 November 2012 05.43

urusan css ga berani nguprek2....kuatir klo tambah ancuur.....*smile

14 November 2012 06.45

@odhzar jhadeyathx jg.. *smile

14 November 2012 06.46

@Benny Dwibs tp sy gk tau gmn carax.., coba tny ke blog senior.. *smile

14 November 2012 06.46

@Mr.DHIsalam hangat balik.., thx ya *smile

14 November 2012 06.47

@cii yuniatysesuai namax 'sederhana', cara pasangx pun sederhana.., sebelum disave di pratinjau dlu.., klo tdk trjd kesalahan bari save.. *smile

14 November 2012 06.53

@Blogadexmeblom ada postinganx sob.., tp insya Allah kedepanx sy buatkan ya.. *smile

14 November 2012 07.15

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,,,

14 November 2012 07.58

memang keren sob..
nice share :D

14 November 2012 08.12

@muarrasy jg gk terlalu paham2 amat ko'..., tp klo gk salah CSS tuh bhs pemograman pecahan dr bhs HTML..., mgkn gitu *smile

thx ya...

14 November 2012 08.12

@Ahmad Yazidthx ya.. *smile

14 November 2012 09.54

Bisa lgsg di coba nih gan.
thx for share

14 November 2012 14.04

Pas bgt kawan, lapak gue lom ada menu napigasinya, gue simpen dulu, ea...
Pasti gue coba!
*syukr0n

14 November 2012 15.01

yang penting gak bikin berat aja kang.. :)

14 November 2012 15.05

@a.i.rtidak memberatkan sob..! liat aja script2x gk terlalu bnyk kan..? *smile

14 November 2012 15.10

@eksakmf, napa template yg kemarin di ganti akh..? pdhl keren abiss!, klo skrg gk nyambung antara warna sidebar dgn warna latarx... *smile

14 November 2012 15.11

@Situs Informasisilahkan.., thx jg.. *smile

14 November 2012 15.54

Udah lama gak... Kotak katik...template nih...jd pengen ta coba di blog dumie ane...

Trims bang :)

14 November 2012 17.28

hmmm.... makin mendalami CSS nih kliatannya yah sob...emang sih permainan animasi kreasi CSS ga ad matinya,,slain bikin ketagihan bkin mata melek juga :)

14 November 2012 18.24

Pertamnya mnta maaft krna sdh menggunakannya ....

Sya mau mnunggu artikel agama yg menarik dri blog ini,

14 November 2012 19.06

kalau saya udah disediain menu ini mas :D
jadi saya save aja source code nya aja ah ....

14 November 2012 20.35

Wah keren nihs sob..

14 November 2012 20.51

keren sob,pake hover.
aq dah pasang trus klu pake hover kena edit lagi dunk....*smile

14 November 2012 20.51

jadi lebih bagus ya, jarang menu yang seperti itu... kapan kapan ah dicoba.. terima kasih..

14 November 2012 23.47

Keren banget kawan. bisa di coba.

15 November 2012 00.49

Sepertinya boleh nih untuk sekedar di coba menu css nya gan..

15 November 2012 02.03

postingan nya sangat membantu sekali gan ,saya tunggu postingan selanjut nya , jgn lupa mampir di blog saya ABduh Blog

15 November 2012 08.03

wow makin kece aja nih blog !


---
Please visit : JadikanPinter! | UnikBanget! - I will visit back!

15 November 2012 08.10

wah keren nih sobat...? saya amankan dulu ya..? ntr saya coba kalau ada waktu hehehehe

15 November 2012 08.24

@Just Adhie Anfieldgk 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

15 November 2012 09.14

Ternyata simpel sekali. . :D

15 November 2012 10.09

Dulu saya juga menggunakan menu seperti ini, tapi sekarang lebih nyaman menggunakan bawaan blogspot.

15 November 2012 12.21

tutorial yg sngat bermanfaat gan.
please visit back

15 November 2012 13.40

@Rohis Facebookiya sob, sudah saya ganti hovernya..

15 November 2012 14.42

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

15 November 2012 14.45

@yusrandantehny 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

15 November 2012 14.54

@budi os 19dicoba aja dlu bang.., cocok tuk semua latar tinggal diganti warna latarnya aja... *smile

15 November 2012 14.55

@Limit Komputerinsya Allah klo bukan hari ini mgkn besok.., sy lg nyari2 materi yg cocok ni... thx ya.. *smile

15 November 2012 14.56

@scsilahkan..! thx ya.. *smile

15 November 2012 14.56

@Herman Bagusthx ya...

15 November 2012 14.57

@Reo Adamsesuai selere masing aja lah sob.. *smile

15 November 2012 14.58

@agus bgthx ya *smile

15 November 2012 14.58

@Blog Motivasisilahkan *smile

15 November 2012 14.58

@cik awisilahkan... *smile

15 November 2012 14.59

@abduhjgn melampirkan link hidup ya.. thx *smile

15 November 2012 14.59

@Isnan Nugrah Lastiko Tikojgn melampirkan link hidup ya.., lain kali sy langsung hapuss! thx *smile

15 November 2012 15.00

@masnadysilahkan thx ya *smile

15 November 2012 15.00

@Yuyudiya sob bisa dilihat scritpx aja gk panjang2 amat *smile

15 November 2012 15.01

@Djangkaru Bumisesuai selera masing2 ajalah sob *smile

15 November 2012 15.01

@Baguspost Onlineoke thx ya *smile

15 November 2012 15.14

@Bukan Masterakhirx ada jg yg mau bagi2 ilmux, thx ya, sy langsung coba... *smile

btw yg 'hihihihi.' itu bukan masuk dlm kode kan hehehe...

15 November 2012 16.16

keren mas tapi kalo mau ditambain dropdown gimana o.O

15 November 2012 16.38

@Limit Postmf sob sy gk tau.., coba nyari tutorialx di google..., mf ya... *smile

15 November 2012 18.11

Akan sya coba gan.jngan lupa mampir balik yah.

15 November 2012 18.33

Mampir lagi bang...selamat tahun baru islam 1434 h...ya bang :)

15 November 2012 20.23

pengin nyoba sih, secara template saya kayak gitu melulu dari masa ke masa, hehe

16 November 2012 06.23

Tadi saya udah nyoba sob. Tapi kok judul blog saya jadi ke tengah ya ? Nggak jadi deh. Biar ke kiri gimana ?

16 November 2012 06.25

hm... aku gk masang deh.. :D hihihi pake menu yg sederhana aja.. :D

16 November 2012 06.38

@Yuyudkemungkinan 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

16 November 2012 07.29

the power of simplicity, dan sepertinya memang sederhana tapi mempesona. tenkyu gan...

16 November 2012 08.32

@Rohis Facebookyaahh, terima kasih deh mas :D

16 November 2012 08.59

kayanya keren nih sob buat yang blognya bertema blogazine :)

16 November 2012 14.22

izn nyoba mas...:D mumpung lg ngedit themplate nih...
makasih mas..

16 November 2012 15.54

Bisa lgsg dicoba nihh gan.
jngan lupa visut back yah.

16 November 2012 19.28

makasih sobat, ane bungkus dulu, nanti bisa dicoba:}

16 November 2012 23.00

met mlm genk. wah ane coba genk trmksi,ni trik nya.

17 November 2012 01.35

terimakasih untuk ilmu nya gan......

17 November 2012 10.35

Absen pagi kawan.

26 November 2012 10.08

oh untuk navbar ya? :)
mantap..:)

29 November 2012 14.31

wah manteb ini CSSnya :D

29 November 2012 14.31

makasih infonya , ijin nyobain Sob :D

5 Februari 2013 10.52

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

5 Februari 2013 12.24

@Syarif Ahmadsyukran.., 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

24 Februari 2013 10.30

Alt f4 dulu gan. Bagus juga . .

15 November 2014 12.39

biar ada di tengah2 gimana caranya ya gan :) makasih

Poskan 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