Tuesday 17 December 2013
- Pertama, buka Notepad++ nya dulu. Kalau belum punya silahkan Download Disini
- Untuk memulai mendesain sesuatu, saya akan memberikan kode penting yang harus dimasukkan di notepad, jadi sobat tidak perlu mengetik sampai tangannya keriting.
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Go! Blog</title>
<style>
body{
background:#ebebeb;
font:12px Arial, Helvetica,sans-serif;
}
</style>
</head>
<body>
<div id="wraper">
<div id="header">
<div id="title">
<h1>My Project</h1>
</div>
</div>
</body>
</html>
- \Mungkin sobat sudah bisa membayangkan sesuatu, hehe.
- Nah, setelah dimasukkan kode tersebut sobat sudah dapat melakukan desain.
- Jika sobat belum paham bagaimana cara memasukkan kdoe yang ingin sobat rancang, saya akan memberikan sedikit contoh.
- Saya akan memberi contoh memasang Menu Navigasi
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Go! Blog</title>
<style>
body{
background:#ebebeb;
font:12px Arial, Helvetica,sans-serif;
}
#navix{margin:0;background:#000;background:-webkit-linear-gradient(top,#000,#333333);}ul#menu{margin:0;padding:10px;}ul#menu li{margin:0;display:inline-block;position:relative;}ul#menu li a:link, ul#menu li a:visited{color:rgb(255,255,255);display:block;padding: 10px 15px 10px 15px;text-decoration:none;}ul#menu li a:hover{background:#00aaff;border-radius:8px;}ul#menu li ul.submenu li:first-child a:after{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #666666;content:";position:absolute;top:-15px;left:10px;z-index:9;}ul#menu li ul.submenu{background:-webkit-linear-gradient(top,#666666,#333333);border-radius:10px;box-shadow:0 5px 10px 1px rgba(0,0,0,0,5);margin:10px;padding:5px;position:absolute;visibility:hidden;top:40px;opacity:0;-webkit-transition:all 0.3s ease-in-out;}ul#menu li ul.submenu li{margin:0;display:block;}ul#menu li:hover ul.submenu{margin:0;opacity:1;visibility:visible;}#nav, #nav ul { list-style: none outside none; margin: 0; padding: 0;}#nav ul { background-color: #222222; border-color: #222222; border-radius: 0 5px 5px 5px; border-style: solid; border-width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); left: 0; max-height: 0; overflow: hidden; position: absolute; top: 52px; transform-origin: 0 0 0; transition: all 100ms ease 0s; -webkit-transition: all 100ms ease 0s; -moz-transition: all 100ms ease 0s; -o-transition: all 100ms ease 0s; width: 180px; z-index: 60;}
</style>
</head>
<div id="navix"><ul id="menu"><li><a href="http://www.g-bloog.com/">Home</a></li><li><a href="#">Anime</a></li><li><a href="#">Cartoon</a></li><li><a href="#">Game</a></li><li><a href="#">Sport</a></li><li><a href="#">Lainnya</a></li><li><a href="https://www.facebook.com/renderloverz">Like My Fans Page</a></li><li><a href="#">About</a><ul class="submenu"><li><a href="#">Profil</a></li><li><a href="#">Portofolio</a></li></ul></ul></div>
<body>
<div id="wraper">
<div id="header">
<div id="title">
<h1>My Project</h1>
</div>
</div>
</body>
</html>
Penjelasan
- Untuk Tulisan yang saya stabilo berwarna hijau yaitu
<style>sampai</style>adalah tempat sobat untuk meletakkan kode CSSnya. - Untuk tulisan yang saya stabilo berwarna Orange yaitu tag
</head>sampai tag</body>adalah tempat sobat untuk meletakkan kode HTML. - Untuk Tulisan yang saya stabilo berwarna Biru adalah kode CSS Menu navigasi yang saya masukkan sebagai contoh.
- Untuk Tulisan yang saya stabilo berwarna Merah adalah kode HTML Menu navigasi yang saya masukkan sebagai contoh.
Kemudian Save dan ubah Save as Type menjadi Hyper Text Markup Languange file. Untuk mencoba membuka file hasil sobat, silahkan klik kanan kemudian open with -> Mozila Firefox atau Chrome.
Nah sekarang, coba sobat terapkan contoh yang saya berikan. Kemudian, silahkan sobat berkreasi semau sobat ya ^_^.
Sekian artikel yang saya berikan hari ini semoga bermanfaat bagi kita semua, jika sobat ingin mengajukan pertanyaan silahkan berkomentar dibawah artikel ini. Selamat mencoba XD
15 comments
artikel go! blog memang ga ada duanya :D
mantep artikelnya ttg notepad++
thanks gan sangat bermanfaat, jangan lupa kunjungan baliknya gan
aldorahmat108.blogspot.com
wew sangat bermanfaat sob, makasih sudah berbagi
mantab kang
gan kalau ini sih bukan tutorial cara menggunakan notepad++, tetapi lebih bagus kalau judulnya diganti menjadi "cara memarkup kode HTML menggunakan Notepad++" atau "cara membuat halaman web menggunakan Notepad++".
but nice share and keep blogging.
visit: www.lzmodern.blogspot.com
ea sob thank's atas masukkannya ^_^
saya sempat bingung sebelumnya ,me markup itu apa ya ?
setelah baca sedikit ,owh ternyata mendesain Kode Halaman web toh ??
Thanks atas artikelnya...
Wah keren nih Arul postingan nya
Makasih bang .. :D
Nyimak aja :)
Kalau saya mah pake Notepad+ ini buat ngedit-edit html
wah, mantap nih sob..
izin coba....
iya gan.. sama-sama..
salam blogger
cara nambah sidebar gimana gan?
Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
Konvert KodeMember AktifJoin This Blog