Sabtu, 29 Maret 2014

Membuat Form HTML


Untuk membuat form seperti diatas kode htmlnya adalah sebagai berikut :

<!DOCTYPE html>

<head>
<title>Belajar membuat form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
<!--
body {
                background-color: #FF0066;
}
body,td,th {
                color: #000000;
}
-->
</style></head>

<body style='background:#FF99FF'>
 <div style="background:#D4D4D4;width:600px; margin:50px auto 0px auto;padding:10px;border-radius:4px;">
   <h2 style='background:#FF0066;color:#000000;padding:10px;margin:-10px -10px 0px -10px;text-align:center'>CURRICULUM VITAE</h2>
  <fieldset>
   <legend style="font-family:arial;"><strong>IDENTITAS DIRI</strong></legend>
    <form action="tampil.php">
     <table>
     
      <tr>
        <td width="191">Nama Lengkap</td>
        <td width="167"><input type="text" name="Nama Lengkap"/></td></tr>
      <tr>
        <td>Tempat/Tanggal Lahir</td>
        <td><input type="text" name="nama"/></td>
        <td><label>
          <select name="select" id="select">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="16">16</option>
          </select>
          <select name="select2" id="select2">
            <option value="Jan">Jan</option>
            <option value="Feb">Feb</option>
                    </select>
          <select name="select3" id="select3">
            <option value="1993">1993</option>
            <option value="1994">1994</option>
            <option value="1995">1995</option>
                    </select>
        </label></td>
      <tr><td>Jenis Kelamin</td><td><input type="radio" name="kelamin" value="laki-laki">Pria
          <input type="radio" name="kelamin" value="Perempuan">
          Wanita</td><td width="190">&nbsp;</td>
      <tr>
        <td>Agama</td><td><input type="text" name="jurusan"/></td></tr>
      <tr>
        <td>Alamat</td>
        <td><input type="text" name="ipk"/></td>
      </tr>
      <tr>
        <td>Kewarganegaraan</td><td><label>
          <input type="checkbox" name="checkbox" id="checkbox">
          WNI
          <input type="checkbox" name="checkbox2" id="checkbox2">
          WNA</label></td></tr>
     
      <tr><td><input type="submit" value="kirim"/>
        <input type="reset" value="batalkan"/></td>
       </tr>
     </table>
    </form>
  </fieldset>
</div>
</body>


</html>






2. Untuk menampilkan hasil form kode php nya adalah sebagai berikut :


<h1 align='center' style='text-align:left'>CURRICULUM VITAE</h1></br></br>
<style type="text/css">
<!--
body {
background-color: #FF99FF;
}
-->
</style><body style='background:#FF99FF>
<div style='background:#f2f2f2;width:600px; margin:0 auto'>
<fieldset>
<legend style='font-family:arial;'>IDENTITAS PRIBADI</legend>
<table>
<tr bordercolor="#FF0066" bgcolor="#FF0066"><td width="132">Nama Lengkap</td>
<td width="183">:</td>
 </tr>
<tr bordercolor="#FF0066" bgcolor="#FF0066"><td>Tempat/Tanggal Lahir</td>
<td>:</td>
 </tr>
<tr bordercolor="#FF0066" bgcolor="#FF0066"><td>Jenis Kelamin</td>
<td>:</td>
 </tr>
<tr bordercolor="#FF0066" bgcolor="#FF0066"><td>Agama</td>
 <td>:</td>
 </tr>
<tr bordercolor="#FF0066" bgcolor="#FF0066">
 <td>Alamat</td>
 <td>:</td>
 </tr>
<tr bordercolor="#FF0066" bgcolor="#FF0066">
 <td>Kewarganegaraan</td>
 <td>:</td>
 </tr>
</table>
</fieldset>
</div>

</body>

Jumat, 14 Maret 2014

Mendesain Blog/Web Agar Lebih Menarik

Bosan dengan tampilan blog yang gitu-gitu aja? Nah sekarang saya mau share beberapa cara untuk merubah tampilan web agar lebih menarik  diantaranya :

Cara Membuat Tulisan Bergerak Pada Footer Blog/Web

Cara Membuat Teks Berjalan di Bawah Footer :
1. Log In ke Blogger.
2. Pilih Template => Edit Html.
3. Cari kode ]]></b:skin>, Untuk mempermudah mencari silahkan tekan ctrl+F pada keyboard dan silahkan tulis kode di atas.
4. Setelah dapat, letakkan kode di bawah ini tepat di ATAS kode tadi !!!
#MD-tekstugasku4u{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79zh_SstcRKPRldfoASq-2YHhTP3DeNxeqau0q8a9Y3gCbFpuLD07MMpOdhjBoaLvmcgmNbVbK9e3eu69GUvMg-fI3Lb7Y0u5nm4Rc5rl8BhqqMB62lAxPX0rtiOlXJn93BBbSOKXnhk/s1600/Tugasku4u-sticky.png') repeat;color:#5FF0BD;width:100%;height:150px;bottom:0;text-align:center;margin:0 auto;padding:0;border-top-left-radius:10px;border-top-right-radius:10px;box-shadow:0 0 10px 2px #888;height:28px;position:fixed;line-height:1.85em;vertical-align:baseline;letter-spacing:1px}
#MD-tekstugasku4u{font: bold 13px/30px Calibri;}
#MD-tekstugasku4u a{color:#00ABFF;text-decoration:none}
#MD-tekstugasku4u a:hover{color:#60CBFF;}
#MD-tekstugasku4u a:visited{color:#6A6A6A;}
5. kemudian cari kode </body> Untuk mempermudah lagi mencari silahkan tekan ctrl+F pada keyboard dan silahkan tulis kode di atas.
6. Setelah dapat, letakkan kode di bawah ini tepat di ATAS kode tadi !!!
<div class='ad-right section' id='ad-right'/>
<div class='ad-left section' id='ad-left'/>
<div id='MD-tekstugasku4u'>
<marquee onmouseout='this.start()' onmouseover='this.stop()' padding='5px' scrollamount='5' width='98%'>Tuliskan Deskripsi Yang Akan Anda Tampilkan Disini</marquee>
</div>
7. Simpan template dan lihat hasilnya. Jika dalam tutorial diatas masih ada yang kurang jelas, silahkan berkomentar di kotak komentar di bawah. 

Cara Membuat Tulisan Pada Blog/Web Bergerak

Cara memasang :
1. Login ke akun blog sobat
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode marquee dari salah satu tulisan berjalan diatas
4. Klik save dan lihat hasilnya.



1. Tulisan bergerak dari kanan ke kiri
<marquee direction="left" scrollamount="2" align="center"> Tulisan Berjalan</marquee>
Demo 1
Tulisan Berjalan

2. Tulisan bergerak dari kiri ke kanan
<marquee direction="right" scrollamount="2" align="center"> Tulisan Berjalan </marquee>
Demo 2
Tulisan Berjalan 

3. Teks bergerak bolak balik ( mondar - mandir ) dari kiri ke kanan
<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Tulisan Berjalan </marquee>
Demo 3
Tulisan Berjalan

4. Teks bergerak bolak balik ( mondar mandir ) dari kanan ke kiri
<marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Tulisan Berjalan </marquee>
Demo 4 : 
Tulisan Berjalan 
 5. Teks bergerak dari atas ke bawah
<marquee direction="down" scrollamount="2" align="center"> Tulisan Berjalan </marquee>
Demo 5
Tulisan Berjalan  
6. Teks bergerak dari bawah ke atas
<marquee direction="up" scrollamount="2" align="center"> Tulisan Berjalan </marquee>
Demo 6
Tulisan Berjalan

tambahan :
Direction : untuk mengatur pola gerakan teks (left, right, up dan down)
Scrollamount : untuk mengatur kecepatan gerakan teks. Naikkan angkanya ( dari 2 menjadi 3 ) untuk mempercepat gerakan dan sebaliknya.
Behavior ( scroll/slide/alternate ): untuk mengatur prilaku gerakan.
Untuk menambahkan background, padding, border, color, dll pada marquee, silahkan sisipkan  kode marquee antara kode berikut
<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Tulisan Berjalan</marquee>

Mengubah Cursor Dengan Icon Lucu


Untuk mengganti cursor di blog caranya mudah yaitu :
  1. Buka Dasbor Blogger
  2. Pilih Tata Letak
  3. Pilih Tambahkan Gadget
  4. Pilih HTML
  5. Kemudian Masukan script dibawah sesuai pilihan pada kolom konten
  6. Simpan



<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-11/nat1021.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2012/01/27/rainbow-arch-over-clouds.html" target="_blank" title="Rainbow Arch Over Clouds"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Rainbow Arch Over Clouds" style="position:absolute; top: 0px; right: 0px;" /></a>






<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-10/cur918.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/20/wing-pointer.html" target="_blank" title="Pink Wing Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Pink Wing Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>








<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-5/hol416.ani), url(http://cur.cursors-4u.net/holidays/hol-5/hol416.gif), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/05/dangling-rainbow-hearts.html" target="_blank" title="Dangling Rainbow Hearts"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Dangling Rainbow Hearts" style="position:absolute; top: 0px; right: 0px;" /></a>







<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-11/ani1072.ani), url(http://cur.cursors-4u.net/anime/ani-11/ani1072.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/02/24/usagi-sailor-moon-busy-2.html" target="_blank" title="Usagi Sailor Moon - Busy"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Usagi Sailor Moon - Busy" style="position:absolute; top: 0px; right: 0px;" /></a>






<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/user/use-1/use175.ani), url(http://cur.cursors-4u.net/user/use-1/use175.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/02/06/blinking-domo.html" target="_blank" title="Blinking Domo"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Blinking Domo" style="position:absolute; top: 0px; right: 0px;" /></a>






<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-9/nat860.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2010/11/06/cute-yellow-duck.html" target="_blank" title="Cute Yellow Duck"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cute Yellow Duck" style="position:absolute; top: 0px; right: 0px;" /></a>






<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol361.ani), url(http://cur.cursors-4u.net/holidays/hol-4/hol361.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/12/22/animated-falling-snow-with-snowman.html" target="_blank" title="Animated Falling Snow with Snowman"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Animated Falling Snow with Snowman" style="position:absolute; top: 0px; right: 0px;" /></a>




<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-3/spe298.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/12/13/question-mark.html" target="_blank" title="Question Mark"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Question Mark" style="position:absolute; top: 0px; right: 0px;" /></a>




<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-5/oth510.ani), url(http://cur.cursors-4u.net/others/oth-5/oth510.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/12/10/animated-pink-pencil.html" target="_blank" title="Animated Pink Pencil"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Animated Pink Pencil" style="position:absolute; top: 0px; right: 0px;" /></a>




<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-5/oth497.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/12/10/red-polka-dotted-pencil-2.html" target="_blank" title="Red Polka Dotted Pencil"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Red Polka Dotted Pencil" style="position:absolute; top: 0px; right: 0px;" /></a>





<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-3/cur274.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/10/16/large-yellow-polka-dot-pointer.html" target="_blank" title="Large Yellow Polka Dot Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Large Yellow Polka Dot Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>




<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-4/oth305.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/04/29/cute-poka-dotted-pink-bow-tie-ribbon.html" target="_blank" title="Cute Polka Dotted Pink Bow Tie Ribbon"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cute Polka Dotted Pink Bow Tie Ribbon" style="position:absolute; top: 0px; right: 0px;" /></a>




<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/food/foo-4/foo350.ani), url(http://cur.cursors-4u.net/food/foo-4/foo350.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/04/20/double-stack-icecream.html" target="_blank" title="Double Stack Icecream"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Double Stack Icecream" style="position:absolute; top: 0px; right: 0px;" /></a>




<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-10/ani916.ani), url(http://cur.cursors-4u.net/anime/ani-10/ani916.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/04/13/talking-hissy-fit-kaoani.html" target="_blank" title="Talking Hissy Fit Kaoani"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Talking Hissy Fit Kaoani" style="position:absolute; top: 0px; right: 0px;" /></a>




<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-9/ani892.ani), url(http://cur.cursors-4u.net/anime/ani-9/ani892.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/04/13/winking-angel-flying-kaoani.html" target="_blank" title="Winking Angel Flying Kaoani"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Winking Angel Flying Kaoani" style="position:absolute; top: 0px; right: 0px;" /></a>




<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-5/nat449.ani), url(http://cur.cursors-4u.net/nature/nat-5/nat449.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/02/24/monkey-big-smiley.html" target="_blank" title="Monkey Big Smiley"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Monkey Big Smiley" style="position:absolute; top: 0px; right: 0px;" /></a>




<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-4/nat342.ani), url(http://cur.cursors-4u.net/nature/nat-4/nat342.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/01/30/flip-upside-down-cute-turtle.html" target="_blank" title="Flip Upside Down Cute Turtle"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Flip Upside Down Cute Turtle" style="position:absolute; top: 0px; right: 0px;" /></a>

Kode Warna HTML

Cyan #00ffff
Blue #0000ff
Skyblue #abcdef
Darkcyan #008686
Cadetblue #5f9ea0
Midnightblue #191970
Mediumslateblue #7b68ee
Cornflowerblue #6495ed
Lightsteelblue #b0c4de
Lightskyblue #87cefa
Powderblue #bde0e6
Aquamarine #7fffda
Dodgerblue #1e90ff
Royalblue #4169e1
Blueviolet #8a2be2
Indigo #460082
Lavender #e6e6fa
Lightblue #add8e6
Deepskyblue #00bfff
Darkslateblue #483080
Mediumvioletred #071585
Mediumturquoise #4801cc
Mediumorchid #ba55d3
Darkturquoise #00ccd1
Paleturquoise #afeeee
Darkorchid #9932cc
Slateblue #6454cd
Aqua #00ffff
Red #ff0000
Darkred #860000
Indianred #cd5c5c
Firebrick #622222
Lightsalmon #ffa07a
Lightcoral #f08080
Maroon #800000
Crimson #dc143c
Tomato #ff6347
Salmon #fa8072
Coral #ff7f50
Pink #ffc0cb
Hotpink #ff69ba
Deeppink #ff1493
Lightpink #ffb6c1
Mistyrose #ffe4e1
Moccasin #ffe4b5
Peachpuff #ffdab9
Mintcream #f5fffa
Floralwhite #fffaf0
Oldlace #fdf5e6
Thistle #d8bfd8
White #ffffff
Linen #faf0e6
Navy #000080
Snow #fffafa
Orange #ffd000
Orangered #ff4500
Burlywood #deb887
Darkorange #ff8c00
Palevioletred #db7093
Sandybrown #f4a460
Rosybrown #bc8f8e
Brown #a52a2a
Peru #cd853f
Gold #ffd700
Yellow #ffff00
Lightyellow #ffffe0
Yellowgreen #9acd32
Palegoldenrod #eee8aa
Goldenrod #daa520
Lime #00ff00
Green #008000
Seagreen #f4a460
Palegreen #98f698
Lightseagreen #20b2aa
Forestgreen #228622
Lightgreen #90ee90
Olive #808000
Tan #d2b48c
Teal #008080
Olivedrab #6b8e23
Greenyellow #adff2f
Darkslategray #2f4f45
Darkolivegreen #55662f
Mediumspringgreen #00fa9a
Darkgoldenrod #688606
Darkkhaki #606766
Orchid #da70d6
Fuchsia #ff00ff
Darkmagenta #860086
Darkviolet #940003
Mediumpurple #9370db
Violet #ee82ee
Purple #800080
Plum #dda0dd
Gray #808080
Dimgray #696969
Gainsboro #dcdcdc
Lightslategray #778899
Lightgray #d3d3d3
Slategray #708090
Darkgray #a9a9a9
Silver #c0c0c0
Springgreen #00ff7f 
Lightpink #ffb6c1
Navojowhite #ffdead
Darksalmon
Khaki #f0e68c
Aquamarine
Chocolate #d2691e
Chartreuse
Limegreen
Slateblue
Saddlebrow
Aliceblue
Wheat
Bisque
Sienna

Cara Membuat Menu Bar di Blog/Web

Fungsi menubar yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu.Misalkan ingin memasang submenu dari sebuah link itu tinggal menambah sedikit kode yang akan dijelaskan dibawah. 





1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7. Pengecualian untuk yang tidak ada kode pada no 7, sobat bisa menaruh dielemen div id lainnya. Biasanya template blog terdapat kode seperti <div id='header.... Jadi, bila tidak ada sobat bisa menaruhnya di bawah kode yang mirip dengan<div id='header...
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://febrianasaurus.blogspot.com/'>Edit me</a></li>
<li><a href='http://febrianasaurus.blogspot.com/'>Edit me</a></li>
<li><a href='http://febrianasaurus.blogspot.com/'>Edit me</a></li>
<li><a href='http://febrianasaurus.blogspot.com/'>Edit me</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://febrianasaurus.blogspot.com/'>Edit me</a></li>
<li><a href='http://febrianasaurus.blogspot.com/'>Edit me</a></li>
<li><a href='http://febrianasaurus.blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://febrianasaurus.blogspot.com/'>Edit me</a></li>
<li><a href='http://febrianasaurus.blogspot.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>
Keterangan:
  • Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
  • Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
  • Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
  • Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
  • Di setiap blog juga ada juga yang berbeda tanda kutipnya. Sobat bisa menelitinya lagi. Tanda kutip ' atau " 
Misalkan kode <div id="content-wrapper"> atau sejenisnya memang benar2 tidak ada. Sobat bisa menaruhnya di area kode header sobat. Caranya sobat bisa mengklik tombol Lompat ke widget lalu mengklik widget header sobat. Contoh pada gambar

Setelah itu. Letakkan kode menubar yang berada pada langkah no 8, di bawah kode widget header blog sobat. Bisa dibawah </b:section> atau dibawah kode </div> pada gambar. Itu meletakkan menubar dibawah header blog sobat.
    Sebenarnya masih ada juga kode sejenis main-wrapper, header-wrapper, header-inner dll. Nah, kode menubar dapat diletakkan di kode-kode css sejenis itu. 

    Bagaimana? mudah kan. Inget sob, kunci utama keberhasilan membuat menubar pada blog yaitu ketelitian dalam mengedit dan memasang kode css/htmlnya. Misalkan ada yang kurang atau kesalahan sedikit, menubar itu malah jadi gagal alias tidak terpasang. Jadi, sobat harus lebih teliti ya agar tidak keliru, good luck sobat ;) 

    Cara Membuat Website Menggunakan Dreamweaver CS6


    Cara Membuat Website dengan Dreamweaver CS6 - Membuat website dengan Dreamweaver dapat dikatakan cukup mudah. Tidak perlu menghafal script-script HTML yang cukup merepotkan. Nah berikut saya berikan cara membuat website dengan Dreamweaver
    Pada latihan kali ini kita akan belajar membuat website sederhana menggunakan Adobe Dreamweaver CS6. Langkah awal dalam membuat website adalah menetukan tema website kita. Untuk latihan kali ini kita akan menggunakan tema website pribadi.
    Kita tentukan dahulu menu yang akan kita sajikan pada website kita. Sebagai contoh:
    Menu utama terdiri dari: HOME, PROFIL, BERITA, GALERI, KONTAK
    Layout kita buat sbb:
    contoh-desain-website
    atau
    contoh-desain-website-2
    Atau silahkan gunakan imajinasi anda untuk membuat layout website yang akan anda buat.
    Keterangan:
    Home adalah halaman awal website
    Profil dapat diisi mengenai profil anda
    Berita dapat diisi dengan berita pada hari ini
    Galeri dapat diisi gambar-gambar atau foto-foto kegiatan
    Kontak dapat diisi alamat dan nomor telepon yang dapat dihubungi
    Untuk membuat website tsb berikut langkah yang dapat dilakukan:
    Buka dahulu program Adobe Dreamweaver
    Lembar Kerja Adobe Dreamweaver
    lembar-kerja-dreamweaver
    Untuk manajemen dalam membuat website, lakukan langkah berikut Klik Site -> New Site
    step2
    Akan masuk jendela baru sbb:
    jendela-manajemen-situs
    pada kolom site name silahkan isikan nama situs anda, misal Latihan, untuk local site folder adalah letak menyimpan seluruh dokumen (file-file) website anda.
    cara-menyimpan-dokumen-dreamweaver
    Klik tombol pada sebelah kanan, maka akan muncul lokasi untuk menyimpan seluruh file anda sbb
    lokasi menyimpan file
    Sebagai contoh, lokasi di F:/Websiteku
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/lokasi-menyimpan-file-website.png
    Lihat pada sidebar kanan Adobe Dreamweaver anda maka akan muncul folder tempat anda menyimpan dokumen website anda
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/sidebar-kanan.png
    Sampai di sini anda sudah berhasil melakukan seting root dokumen untuk website anda
    Next step, adalah membuat dokumen HTML untuk website kita
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-dokumen-html.png
    Klik pada menu File->New, lalu pilih Blank Page->HTML lalu klik Create
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-dokumen-html-baru.png
    Langkah selanjutnya, kita akan membuat halaman utama, simpan file ini dengan nama index.html. Buat Layout utama (layout contoh 1) sebagai berikut:
    Buat tabel dengan cara klik Insert->table, gunakan parameter sbb:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-tabel-di-dreamweaver.png
    klik OK maka akan muncul tampilan sbb:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/tampilan-tabel-dreamweaver.png
    Untuk menyesuaikan dengan layout 1, maka pada baris paling atas (untuk header) lakukan merge cell, dengan cara:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/merge-cell.png
    Maka akan menjadi:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/merge-cell-3-cell.png
    Karena kita akan menggunakan banyak gambar, alangkah baiknya jika kita membuat folder khusus untuk lokasi penyimpanan gambar, dengan cara sbb:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-direktori.png
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-direktori-gambar.png
    Pilih New Folder, beri nama folder baru dengan nama gambar
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/direktori-gambar-dibuat.png
    Selanjutnya adalah buka direktori di F:/websiteku/gambar, copykan semua gambar ke folder tsb, contoh:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/folder-gambar.png
    Setelah kita masukkan gambar ke folder gambar, kita cek pada dreamweaver pada area kerja seperti di bawah, lalu klik F5 (refresh) maka gambar yang sudah dikopi akan diload oleh dreamweaver sbb:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/direktori-gambar-drefresh.png
    Pada contoh hanya ada 1 file gambar yaitu header.jpg karena sebelumnya hanya mengkopi 1 file gambar. 
    Selanjutnya, kita simpan dahulu file ini dengan nama index.html dengan cara pilih menu File->Save
    Selanjutnya kita masukkan gambar sebagai header dengan cara pada baris 1, kita sorot lalu pilih menu Insert->image sbb
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/cara-memasukkan-gambar-dreamweaver.png
    Buka folder gambar
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/folder-gambar-dibuka.png
    pilih file header.jpg, lalu klik OK, maka akan menjadi sbb:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/tampilan-header.png
    Selanjutnya kita akan membuat menu utama di kolom 1 baris ke 2
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-menu.png
    Sesuaikan parameter seperti di atas (Horz: default, Vert:Top)
    Selanjutnya kita buat tabel pada cell tsb dengan cara pilih menu insert->table dengan parameter 
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/parameter-tabel.png
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/tampilan-dengan-menu.png
    Lanjutkan dengan membuat menu utama seperti berikut:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/lanjutkan-dengan-membuat-menu.png
    Selanjutnya kita akan membuat kode menggunakan tag <iframe></iframe>. Tag ini untuk menentukan lokasi halaman yang muncul
    membuat iframe di dreamweaver
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-iframe2.png
    Kita kembali ke split view, tuliskan tag berikut pada posisi lokasi iframe
    <iframe name="isiwebsite" src="welcome.html" width="585" height="400" frameborder="0" scrolling="auto"></iframe>
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-iframe-website.png
    Sampai di sini halaman utama sudah kita buat. Langkah selanjutnya adalah membuat konten sesuai dengan menu yang sudah kita tentukan.
    Nah, sebelumnya kita telah membuat sebuah tag iframe dengan atribut src=”welcome.html”, artinya ketika halaman index.html pertama kali diload/dibuka, maka iframe seharusnya berisi file welcome.html, jika kita lihat melalui browser (tekan F12) sbb:
    pesan error di browser
    muncul keterangan File not found, mengapa? karena kita belum membuat file dengan nama welcome.html. Lalu apa yang harus kita lakukan? yap, benar sekali kita harus membuat sebuah file baru lagi dengan nama welcome.html. Caranya, silahkan buat kembali dokumen HTML baru lalu simpan dengan nama welcome.html
    membuat file baru dreamweaver
    setelah kita buat file welcome.html, kita buka kembali file index.html melalui browser:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/cara-memasukkan-iframe-dreamweaver-ok.png
    Sekarang kita buat file selanjutnya, profil.html dimana file ini merupakan file yang akan dituju ketika tombol Profil pada Menu Utama diklik
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-halaman-profil.png
    Sekarang kita kembali ke halaman index.html, kita akan menautkan (link) tombol Profil ke file profil.html sbb:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/mengubah-link-pada-dreamweaver.png
    Pada kolom Link, isikan: profil.html (artinya ketika tombol Profil diklik, maka halaman profil.html akan dibuka)
    Pada kolom Target, isikan: isiwebsite, mengapa? coba kita lihat kembali ke atas pada tag: <iframe name="isiwebsite" src="welcome.html" width="585" height="400" frameborder="0" scrolling="auto"></iframe>
    lihat pada tag <iframe name="isiwebsite"……></iframe> artinya file profil.html akan ditampilkan padaiframe isiwebsite, sehingga jika kita buka file index.html pada browser dan kita klik pada tombol Profil, maka:
    https://dl.dropboxusercontent.com/u/47457369/dreamweaver/selesai.png
    nah sudah terlihat bukan halaman website kita? eit ada yang kelupaan, kita belum menautkan tombol Home…hmmm kira-kira ke mana ya menautkan tombol Home ini?? ya benar, tombol Home ini kita tautkan ke file index.html
    Sekarang coba klik tombol Home atau Profil, maka halaman website kita akan berubah bukan?
    Tugas anda sekarang adalah membuat halaman yang lain, yaitu halaman BeritaGaleri dan Kontak. Lakukan langkah sama seperti di atas. Untuk konten silahkan gunakan imajinasi anda. Selamat belajar.
    Nah mudah bukan cara membuat website dengan Dreamweaver CS6 
    Terimakasih Atas Kunjungan Anda.Silahkan Tinggalkan Komentar dan Follow My Twitter