HOMEArtikel CSS (Cascading Stylesheet)
- Home
- » CSS (Cascading Stylesheet)
- » Membuat Horizontal Menu dengan CSS, Images Sprites dan Animasi
- » CSS (Cascading Stylesheet)
Membuat Horizontal Menu dengan CSS, Images Sprites dan Animasi
Ditulis oleh Dhimas Ronggobramantyo
Kategori: CSS (Cascading Stylesheet)
Dibaca 26843 kali
Setelah lama tidak menulis artikel baru, kali ini saya akan mengajari tentang membuat horizontal menu dengan CSS. Ya saya pernah menulis tentang cara membuat horizontal menu sebelumnya, tapi kali ini kita akan menggunakan images sehingga menu kita akan menarik. Disini kita akan mempelajari trik CSS tentang Images Sprites dan Images Replacement serta sebagai bonus akan saya tambahkan animasi dengan memanfaatkan framework JQuery.
Sebelum kita memulainya ada baiknya anda melihat contoh Horizontal Menu yang akan kita buat. Bagaimana? sudah melihatnya? tertarik? baca terus artikel ini. Menu tersebut dibuat dengan menggunakan CSS dan teknik Image Replacement dan Image Sprites. Plus Framework JQuery untuk membuat animasinya. Oke saya tahu anda sudah tidak sabar, kalau begitu langsung saja kita mulai pembuatannya.
Membuat HTML yang Standard untuk Menu
Pada artikel sebelumnya saya sudah mengajari bagaimana membuat menu yang baik, kita akan menggunakan konsep yang sama, karena memang teknik tersebutlah yang dianjurkan untuk membuat menu. Jadi kita menggunakan tag HTML <ul> dan <li>. Oke anda pasti sudah tahu mengenai tag HTML ini, langsung saja kita buat kode HTMLnya terlebih dahulu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contoh Horizontal Menu</title>
</head>
<body>
<h1>Contoh Horizontal Menu</h1>
<ul id="topmenu">
<li><a href="#" class="replace" id="menu_1" title="Home"><span></span>Home</a></li>
<li><a href="#" id="menu_2" title="Artikel"><span></span>Artikel</a></li>
<li><a href="#" id="menu_3" title="About Me"><span></span>About Me</a></li>
</ul>
<div id="container">
<p>Baca artikel tentang <a href="http://www.dhimasronggobramantyo.com/artikel/Membuat_Horizontal_Menu_dengan_CSS,_Images_Sprites_dan_Animasi">Membuat Horizontal Menu</a> untuk mengetahui cara membuat menu seperti ini.</p>
</div>
</body>
</html>
Silahkan lihat hasilnya disini. Sudah terlihat kan bentuk menunya, ya masih biasa karena kita belum menstyle nya dengan CSS. Oke jika anda perhatikan untuk tiap menu (<li>) memiliki id yang berbeda-beda. Kenapa? karena setiap menu panjang imagenya berbeda, maka CSS nya juga berbeda-beda untuk tiap menunya. Sebelum kita mulai membuat CSS nya silahkan anda save gambar-gambar berikut ini dengan nama menu_1.jpg, menu_2.jpg dan menu_3.jpg.
Sekarang mari kita mulai buat CSS nya.
Image Replacement
Image Replacement merupakan sebuah teknik dimana kita mereplace text yang ada dengan image menggunakan CSS. Teknik ini berguna apabila kita menginginkan teks dengan font yang aneh ataupun text dengan efek-efek yang tidak mungkin bisa dilakukan dengan CSS.
Jika anda perhatikan pada setiap menu, ada tag <span> didalamnya. Nah tag <span> ini yang akan kita manfaatkan. Jadi kita melebarkan ukuran tag <span> ini sebesar gambar menunya untuk menutupi text yang sebenarnya. Pertama-tama kita pasang CSS default dulu untuk melayout tampilan agar lebih menarik.
body {
font-family:arial, serif;
}
#container {
border:1px solid #ffbc58;
padding:10px;
background:#ffe9c8;
}
Anda tentu sudah tahu fungsi CSS diatas, kita hanya memberikan font jenis arial untuk <body> dan memberi border serta background untuk #container. Sehingga hasilnya sekarang menjadi seperti ini. Sip, sekarang font nya sudah kelihatan bagus, sekarang kita buat menu nya. Tambahkan CSS berikut ini.
ul {
list-style:none;
margin:0;
padding:0;
}
#topmenu {
height:30px;
}
#topmenu li {
float:left;
position:relative;
}
Pada CSS tersebut kita menghilangkan padding dan margin serta bullet (list-style:none;) pada tag <ul>. Kemudian untuk #topmenu (sebenarnya sama aja, #topmenu itu sama dengan <ul>, tapi saya lebih senang memisahnya) kita berikan tinggi 30px height:30px;. Jangan lupa untuk <li> nya kita beri float:left; agar menu nya kesamping. Serta position:relative; yang akan berguna untuk animasinya yang akan saya jelaskan belakangan. Sehingga hasilnya akan berubah seperti ini.
Jika anda lihat maka menunya telah menyamping dan dempet-dempet. Sekarang mari kita ubah menjadi images dengan teknik Image Replacement. Kita akan mengubah menu home nya terlebih dahulu, dan jika anda lihat pada kode HTML nya, pada bagian home id nya menu_1. Tambahkan CSS berikut ini:
#menu_1{
width:70px;
height:30px;
float:left;
font-size:1.2em;
position:relative;
}
#menu_1 span{
background:url(menu_1.jpg) no-repeat;
position:absolute;
width:100%;
height:100%;
cursor:pointer;
}
Hasilnya menjadi seperti ini. Jika anda lihat kita menentukan width dan height untuk menu_1. Jika anda lihat gambar menu_1.jpg diatas mungkin anda bertanya-tanya, width nya memang benar 70px tapi height nya kan 60px? kenapa di CSS nya height nya 30px? Ya karena yang ingin kita tampilkan adalah 30px bagian atas. 30px bagian bawah kita tampilkan waktu hover.
Pada #menu_1 span kita beri background yang berisi images dari menu_1.jpg dan jangan lupa position:absolute; agar <span> kita menutupi text nya. Karena kita beri position:absolute; maka container dibawahnya kita beri position:relative;. Untuk tinggi dan lebar <span> kita beri 100% agar sesuai container dibawahnya. Jangan lupa tambahkan cursor:pointer agar di browser IE mousenya berubah. Begitulah kira-kira trik Image Replacement. Mudah kan, lakukanlah hal yang sama untuk menu sisanya, tentu saja width nya berbeda. Tambahkan kode CSS berikut ini untuk menu lainnya.
#menu_2{
width:91px;
height:30px;
float:left;
font-size:1.2em;
position:relative;
}
#menu_2 span{
background:url(menu_2.jpg) no-repeat;
position:absolute;
width:100%;
height:100%;
cursor:pointer;
}
#menu_3{
width:103px;
height:30px;
float:left;
font-size:1.2em;
position:relative;
}
#menu_3 span{
background:url(menu_3.jpg) no-repeat;
position:absolute;
width:100%;
height:100%;
cursor:pointer;
}
Image Sprites
Sekarang kita buat efek hovernya dimana kita di hover menggeser images kita 30px kebawah agar yang tampil adalah images yang lain. Teknik seperti ini kalau orang bule nyebutnya Images Sprites. Jika anda perhatikan pada gambar tombol diatas maka pada setiap gambar dibawahnya ada efek hover nya. Nah untuk memindahkan backgroundnya kita gunakan background-position. Tambahkan kode CSS ini.
#topmenu a:hover span {
background-position:0 -30px;
}
Mudah kan? dan hasilnya seperti ini. Tapi jika anda coba buka di IE 6, ketika kita melakukan hover maka efeknya berjalan tetapi jika kita sudah tidak dihover gambarnya tetap, tidak berubah. Terus bagaimana? Jangan pernah anda salahkan browsernya, yang salah tentu yang membuat kodenya, yaitu kita. Tapi tenang saja akan kita perbaiki. Itu hanya masalah status pada <a> dimana IE 6 menganggap bahwa kita pada posisi visited dan focus. Tenang saja tidak usah panik tambahkan CSS berikut ini:
a,a:link,a:visited,a:hover {
color:#ff9800;
text-decoration:none;
}
a:focus,a:hover {
text-decoration:underline;
}
Sehingga hasilnya menjadi seperti ini. Sip sudah jalankan, gimana gampang kan? Silahkan anda coba disemua browser, disemua media (HP, PDA, Screen Reader dll) atau anda matikan images nya dan matikan CSS nya. Hasilnya pasti tetap bisa terbaca karena kita menggunakan konsep Web Standards. Kurang puas? ayo kita tambahkan animasi dengan JQuery
Animasi dengan JQuery
Jquery merupakan Framework Javascript yang berisi library-library yang menarik. Salah satunya adalah animasi. Kenapa saya pilih Jquery? karena JQuery cukup cepat diload dan lebih kompatibel disemua browser. Framework lainnya yaitu Mootools juga cukup baik, dia cepat di IE tetapi sangat lambat di Firefox dan memakan resource komputer cukup banyak. Demikian juga dengan Prototype. Kalau yang ingin lebih cepat, gunakan Dojo, tapi kali ini saya menggunakan JQuery
Saya menemukan teknik animasi ini pada website Webdesignerwall, pada website tersebut ia menggunakan tag <em> untuk membuat animasinya. Disini saya mencoba mengubanya menggunakan tag <div> agar kita bisa lebih menghias text didalamnya dan tentu saja merubah CSS nya. Oke sebelum mulai, silahkan anda simpan gambar bubble speech dibawah ini, jika anda tidak suka dengan gambarnya silahkan cari gambar yang lain, karena gambar ini saya buat sendiri dengan terburu-buru jadi mungkin kurang menarik.
Jika sudah silahkan anda download framework jquery, langsung saja kewebsitenya dan download filenya (cuma 1 file). Setelah download kita perlu meloadnya dalam HTML. Sekarang ubah kode HTML anda menjadi seperti ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contoh Horizontal Menu</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#topmenu a").hover(function() {
$(this).next("div").animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("div").animate({opacity: "hide", top: "-80"}, "fast");
});
});
</script>
</head>
<body>
<h1>Contoh Horizontal Menu</h1>
<ul id="topmenu">
<li><a href="#" class="replace" id="menu_1" title="Home"><span></span>Home</a><div>Kembali ke halaman utama</div></li>
<li><a href="#" id="menu_2" title="Artikel"><span></span>Artikel</a><div>Baca Artikel Terbaru</div></li>
<li><a href="#" id="menu_3" title="About Me"><span></span>About Me</a><div>Tentang Pemilik Website</div></li>
</ul>
<div id="container">
<p>Baca artikel tentang <a href="http://www.dhimasronggobramantyo.com/artikel/Membuat_Horizontal_Menu_dengan_CSS,_Images_Sprites_dan_Animasi">Membuat Horizontal Menu</a> untuk mengetahui cara membuat menu seperti ini.</p>
</div>
</body>
</html>
Jika anda lihat pada bagian atas kita meload jquery.js yang merupakan framework Jquery dan kita menambahkan kode:
$(document).ready(function(){
$("#topmenu a").hover(function() {
$(this).next("div").animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("div").animate({opacity: "hide", top: "-80"}, "fast");
});
});
Fungsi tersebut berarti kita menginisialisasikan efek hover pada #topmenu a didalam CSS. Dimana apabila kita menemukan tag <div> setelah #topmenu a maka kita animasikan dengan mengurangi jaraknya dan memunculkan opacitynya. Jika anda perhatikan pada menu nya, maka setiap menu sekarang ada tag <div> yang berisi informasi mengenai menu tersebut. Nah dengan bantuan CSS maka kita akan hilangkan menu tersebut. Masukkan kode CSS berikut ini:
#topmenu li div {
font-size:11px;
background:url(bubble.gif) no-repeat;
width: 80px;
height: 33px;
position: absolute;
text-align: center;
z-index: 2;
display: none;
text-align:center;
padding:10px 5px;
top:-40px;
left:0;
}
Yang perlu diperhatikan pada CSS ini adalah, kita menghilangkannya dengan display: none; dan memberinya position:absolute; dan z-index: 2; agar posisinya diatas yang lainnya. Karena posisi nya absolute maka container dibawahnya diberi position:relative; (pada #topmenu li). Jika anda ingin mengubah posisi munculnya animasi, anda dapat mengubah nilai top pada CSS dan nilai top pada javascript nya.
Selesai sudah, dan hasilnya seperti ini. Gampang kan?
Komentar [65]
Dikirim oleh Hadoitz pada 27 Mei 2008 01:39:51 WIB
Wah.... Maksih ya mas.
Ijin pasang di web saya ya 
Dikirim oleh ade pada 02 Juni 2008 01:27:49 WIB
wahhhh...... thns banget ! laenkali yang banyak yahhh !
Dikirim oleh gatrhee pada 16 Juni 2008 10:54:17 WIB
ok bgt!sangat bantu saya dalam menyelesaikan tugas akhir,tolong artikel tentang membuat sekuriti aplikasi webnya donk mas....?saya tunggu lho...!
Dikirim oleh Ari W pada 23 Juni 2008 09:49:52 WIB
Tererengkiu ilmunya ya om... moga-moga dapet pahala yang buanyaaakkkk.... Huebat euy
Dikirim oleh www.a1.co.id pada 04 Juli 2008 04:06:03 WIB
wah ini keren sekali, kita pakai ya mas, kita baru mencoba untuk menggunakan web dalam bisnis.
kalau ada yang mau bantu, email kita di advertising@a1.co.id, bantuang sangat diharapkan.
Dikirim oleh imam riyanto pada 05 Juli 2008 02:05:03 WIB
wah bagus juga hasilnya.thx mas
Dikirim oleh index0001 pada 19 Juli 2008 08:15:14 WIB
wah gileaaaaa
ini yang aku cari selama ini
Dikirim oleh dedy pada 02 Agustus 2008 07:02:24 WIB
mas thx ya...
ak bru mw bljar sihh...
tpi ak da tertarik luan mlihat karya mas...
ak pngen bljar lbih dalm lagi...
bsa g mas kirim kmentar mas beserta trik" laennya untuk memasang web. email ak : skindred_88@yahoo.com
thx.
Dikirim oleh made gunawan pada 07 Agustus 2008 03:11:10 WIB
lam kenal sblum y...!!!
oh ya sy ru belajar ni...jd baru pertama liat artikel ini
langsung jatuh hati dan akan rutin ikuti artikel2 dr mas.
thank...!!!
Dikirim oleh akoo pada 28 Agustus 2008 09:22:10 WIB
ok's banget buat bljr....jangan segen" nuls lagi ya mas, aq akan selalu mengikuti U...
Dikirim oleh hans pada 14 September 2008 01:46:13 WIB
terima kasih mas... ini sangat membantu ku
mas mo nanya nih... klo didalam php da cssnya bisa ga? tolong berikan contohnya dong... Terima kasih ....
Dikirim oleh seh pada 15 September 2008 10:33:27 WIB
josss!!!!
Dikirim oleh riska pada 18 September 2008 06:21:57 WIB
em.........tak coba dl yah...ni jg la buat web......
Dikirim oleh onat pada 20 September 2008 12:15:44 WIB
wah mas ksih tau yang pke JS.dropdown dan cara ngatu tampilan web
Dikirim oleh leonardo pada 25 September 2008 03:16:12 WIB
anda hebat. saya bangga.
saya mau memberi anda reward dan mungkin jika anda tidak keberatan, saya mau anda jadi guru online saya. saya sementara mencari instructur CSS dan javascript. jika tidak keberatan, saya akan menghubungi anda. email saya spicealdo@yahoo.com
serius.
biaya-biaya dapat kita bicarakan selanjutnya.
trims banyak
Leo
----
Dikirim oleh thoriq darwis pada 25 September 2008 04:27:27 WIB
Woow...
Bagus banget tutorialnya...
Thanks..
#thecosmo.wordpress.com#
Dikirim oleh TidusSuyashaX pada 17 Oktober 2008 03:06:59 WIB
WOOOO
Thanks buat tutorialnya yawww!!!
sangat mudah dimengerti untuk pemula seperti saya!!
nanti posting tutor yang lainnya juga ya!?
sekali lagi thanks!
Dikirim oleh lisa pada 12 November 2008 02:05:01 WIB
tanks y buat tutorialnya
tapi ntar ditambh y
biar lebih lengkap dan kami tidak perlu susah cri yang lain cukup lihat disini j
key thanks yoch
Dikirim oleh lisa pada 12 November 2008 02:06:00 WIB
kasih tips donk gimana caranya buat web yang bagus untuk pemula
yang sederhana tapi menarik
tolong y
Dikirim oleh Dadang key pada 18 November 2008 02:17:13 WIB
hei...brother..cool banget css-nya
@$#*&$*(bisa gak ya? kalo pemograman web (sejenisnya) di jadiin suatu key / sejenisnya pada registry window XP,,, kan jadi lebih keren lagi
thx,,your new friend...................dadang key
Dikirim oleh Zaini pada 18 November 2008 05:25:00 WIB
Mas...aqu tertarik banget dengan trik n tips yang mas berikan..cukup membanggakan...oya,yang namanya pembaca, tentu akan lebih senang n bangga jika perminyaannya dikabulkan..maksudnya,...mas kan kasih tutorial yang animasi nya dari atas...n aqu mau coba animasinya yang munculnya dari samping...udah aqu coba spt yang mas kasih tau, yaitu dgn mengubah nilai top-nya..tapi g mau juga...mau ny acuma dari bawah..tolong dong mas...kasih tau biar animasi nya muncul dari samping...soalnya aq punya menu yang vertikal...(bentuk list)...
by : zheiner_taurus@yahoo.co.id
Dikirim oleh Zeidz pada 29 November 2008 02:35:10 WIB
Wha, thanks banget yach, oh ya, gimana ya cara bikin form komentar untuk website kayak punya Mas ini, klo ada kasih tau ya kodenya...
iklan-karanggede.co.cc
Dikirim oleh melki pada 30 November 2008 01:23:04 WIB
..thanks banget mas, buat artikel nya,,
..keren bangeeeeett...
Dikirim oleh Firdaus_ei pada 20 Desember 2008 06:58:57 WIB
Hebat......mudah2 orang ini tambah rezki dan kemampuannya terimakasih ya mas...
Dikirim oleh banay pada 05 Januari 2009 06:11:16 WIB
Arigatou Gozaimashita............
Dikirim oleh dian pada 08 Januari 2009 02:13:59 WIB
wah...wah..wah
keren abis...
kebetulan saya lagi nyari artikel tentang css ma html nih...
semoga tambah mantap aja bagi2 ilmunya
thanks.... ya
Dikirim oleh riesky pada 27 Januari 2009 11:57:27 WIB
wah mantap mas tutorialnya...
eh mas klo bleh bahas dunk tutorial tntang cara bikin komentar.komntar yang bentuknya seperti pnya nya mas ini.soalnya saya lagi cari tutorial cara bkn halaman kmntar.....
klo ada bisa kirim ke email ku gak mas
usrix_baba@yahoo.co.id
tank you mas.....
kmbangin tyus ilmunya dan tularkan kekita2 biar bermanfaat.....
Dikirim oleh ari_w pada 02 Februari 2009 09:12:46 WIB
mas gimanasih caranya menyembunyikan style css web kita sih??
biasanya jika pagenya disimpan otomatis style cssnya juga ikut ke simpan,, trus gimana sih cara nyembunyiinnya??.
trus aq pingin tau donk script security numbernya..
kalau mas bisa kirim ke email ku ya...
plisss
sjokfa@yahoo.com
makasih banyak ya.......
Dikirim oleh raden mas pada 24 Februari 2009 08:22:35 WIB
alamat ini sangat bagus terutama bagi kaum pecinta web . semoga isi atau konten yang tersedia terus di tingkatkan.
Dikirim oleh raden mas pada 24 Februari 2009 08:23:37 WIB
tolong beritahu saya tentang php juga ya
Dikirim oleh handoko pada 26 Februari 2009 08:53:35 WIB
Thanks y,tlong klau ad pengetahuan yg baru tantang css n html slalu di up dete dunk..
Dikirim oleh tajuddin pada 27 Februari 2009 10:09:03 WIB
tutorial yng anda tulis sangat bermanfaat sekali mas terutama bg seorang pelajar seperti saya
& kalau bisa saya minta tlng d beritahu kode2 html/css yang bisa bikin web lebih SIP,Terima Kasih
My Web:muchtaj.webs.com
Dikirim oleh vman pada 24 Maret 2009 06:31:21 WIB
pengen tanya, kalo pake database gimana cara masukinnya mas??
ma'af masih newbie...
kalo bisa sich kirim ke email
rahman2306@yahoo.com
Dikirim oleh Setiaji pada 09 April 2009 06:38:45 WIB
Waahh.. menarik sekali tutorialnya, kebetulan saya lagi garap project, dan tutorial ini ngasih inspirasi baru untuk mempercantik tampilan..
Ilmu yang sangat berguna, Lanjutkan..! (whehe..)
Dikirim oleh hariez pada 29 April 2009 06:42:09 WIB
thank's banget artikelnya banyak membantu banget nehh....
Dikirim oleh andri pada 04 Mei 2009 03:21:52 WIB
wah mantap mas tutorialnya...menarik sekali tutorialnya dan sangat bermanfaat sekali mas terutama bg seorang pelajar seperti saya He......He....
tp terus di tingkatkan ya mas.......
Dikirim oleh tempe pada 02 Juni 2009 08:14:23 WIB
mantap......!!!!!!!!!!!!!!
ijin copas mas...
http://tempebasah.com
Dikirim oleh yusup pada 02 Juni 2009 02:19:00 WIB
Mas itu css sama html nya jadi 1 file apa di pisah???
Dikirim oleh saras001 pada 22 Juni 2009 05:06:33 WIB
keren, saya suka tutorial"nya (bener" membantu).
saya mu bkn web neh mas, ijin ditaroh di web saya yach... :-)
Dikirim oleh ecal pada 29 Juni 2009 11:45:31 WIB
alhamdulillah untung ada masternya jd saya bisa belajar web,,,, terima kasihnya bang,,,,
Dikirim oleh dhean pada 11 Juli 2009 03:17:55 WIB
wah... ini baru huebaat
bener bener amazing tutorialnya
banyak rejeki ya mas, karna udah bantu memberikan ilmu ke banyak orang
Dikirim oleh alfian pada 11 Juli 2009 07:01:03 WIB
file index style css dan jquierynya dijadikan satu file ato dipisah mas. Soalnya bingung ni klo bisa file jadinya dikirim dong ke emailku
Dikirim oleh alfian pada 11 Juli 2009 07:02:41 WIB
file index style css dan jquierynya dijadikan satu file ato dipisah mas. Soalnya bingung ni klo bisa file jadinya dikirim dong ke emailku
papeksa@gmail.com
Dikirim oleh buzz pada 15 Juli 2009 04:09:33 WIB
steubuh...jQuery emang mak nyuss, cuman kurang smooth aja ko dibandingin mootools
Dikirim oleh 'ukasyah pada 16 Juli 2009 04:34:21 WIB
jazakalloh khoir ilmunya mas.
oia kalo untuk tingkat pemula hal-hal yang harus di pelajari apa saja ya mas.
tolong di bantu..
Dikirim oleh zaid ajib pada 17 Juli 2009 12:01:29 WIB
السلام عليكم mas mhon izin ngamalin illmunya
jazzakallohu khoir ,, smg ilmu mas di bagi bagi malah tambah banyak , tp msih pemulanih
http://indonesiku-zaidajib.blogspot.com
Dikirim oleh Ahmad Mansur pada 06 Agustus 2009 06:59:00 WIB
Waaaah bagus buanget mas....makasih massss
Dikirim oleh danang pada 29 Agustus 2009 06:18:29 WIB
mas, tutorialnya dah cukup bagus. tapi tolong donk dikasih screenshot tampilan dari css-nya..
biar tambah jelas gitu....
maklum ni saya nubi... ^^
Dikirim oleh Bimo pada 18 September 2009 03:54:38 WIB
Kereeeennnn.... 100 acungan jempol!!! Posting yang laennya mana lagi,, saya tunggu.... soalnya semua tutorial disini saya praktekan langsung dan semuanya berjalan sesuai yang diharapkan!!!!
Dikirim oleh astawan pada 21 September 2009 05:24:46 WIB
yeah...great man...
i love this.
thanx....
Dikirim oleh pembelajar pada 06 Oktober 2009 10:46:58 WIB
jquerynya ga bisa ,knapa ya ??
hew hew hew
Dikirim oleh kanglurik pada 07 Oktober 2009 02:10:28 WIB
Kok nggak bisa di blog saya..
ga muncul...
Maksud jquerynya diload dalam html gimana mas???
Tolong dunk penjelasan lebih lanjut...
Dikirim oleh Kodir Zaelani pada 10 November 2009 05:36:44 WIB
Salam Kenal Mas Bram,
saya lagi belajar membuat web site, dengan adanya artikel ini saya dapat pengetahuan tambahan yang sangat berguna.
Tks.
Dikirim oleh sahrui pada 12 November 2009 06:11:02 WIB
Cara yang bagus ..sangat mendukung thx so much...
http://7jambisadesainwebsite.webs.com
Dikirim oleh koelimaya pada 20 November 2009 03:21:13 WIB
thx for share, smoga makin sukses slalu..
http://www.koelimaya.web.id
Dikirim oleh Herdaisuke Tamaga pada 06 Desember 2009 12:06:52 WIB
Sip deh,nyuwun sewu kulo copy scriptipun nggeh mas.
Dikirim oleh harsi pada 11 Desember 2009 11:44:17 WIB
saya mau tanya pake software apa ya mas?
saya ini baru belajar untuk buat web design karena tuntutan perusahaan.sepertinya sangat komplit sekali.mohon balasannya
terima kasih
Dikirim oleh harsi pada 11 Desember 2009 11:45:18 WIB
saya mau tanya pake software apa ya mas?
saya ini baru belajar untuk buat web design karena tuntutan perusahaan.sepertinya sangat komplit sekali.mohon balasannya
terima kasih
email : harsi_L3012gb@yahoo.com
Dikirim oleh ones006 pada 23 Desember 2009 08:39:32 WIB
this is tutorial great and awesom....!!!
Dikirim oleh regi pada 26 Desember 2009 01:48:14 WIB
terima kasih sebelumnya mas atas tutorialnya,
saya udah mencoba semuanya. tapi jquery nya gak mau muncul mas, kira2 dimana nya salah mas.....
mohon pencerahannya....
Dikirim oleh Rizal pada 27 Desember 2009 08:45:06 WIB
Mf saya blm terlalu paham nih......
Dikirim oleh Nur Khazanah pada 27 Desember 2009 08:47:45 WIB
Mas saya udah bisa bkin htmlnya,tp cara masukin ke Internetnya gimana ya mas....??
Dikirim oleh Anas pada 29 Desember 2009 02:13:15 WIB
Mas untuk menjadi web master apa za yg mesti kita kuasai
Dikirim oleh Mugheni pada 16 Januari 2010 10:16:41 WIB
Oke lah Kalo Begeto.....Thankyo
Dikirim oleh faisal ar reza pada 20 Januari 2010 02:16:22 WIB
bs minta script kyk pnynya http://internet-web.infogue.com/
yg sekali disenggol muncul sub menunya.thanks b4
RSS Feeds
Valid XHTML Strict