Cara Membuat Menu DropDown Warna Hijau Super Keren

Cara Membuat Menu DropDown Warna Hijau Super Keren adalah sebuah kotak tab/bar yang isinya berupa navigasi link. 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. Pada postingan
sebelumnya saya juga telah menjelaskan bagaimana cara membuat menubar pada template klasik.  Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya seperti gambar blog ayas ini.

Menubar ini juga bisa dibuatkan lagi submenu kebawahnya, lihat di gambar. Nah jadi misalkan sobat ingin memasang submenu dari sebuah link itu tinggal menambah sedikit kode yang akan dijelaskan dibawah. Oh iya, menubar di postingan ini tidak ada search box seperti digambar. Tetapi jika sobat ingin membuat menubar di blog dengan search box, silahkan kunjungi postingan Disini. Sudah tau kan bagaimana penampakan menubar di blog itu? nah, cara membuat menubar di blog tidak sulit kok. 

Langsung aja nggak panjang lebar cara membuatnya.

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:
1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: #A4C400 repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#FCFEFE;border-right:1px solid #FCFEFE;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpTLYpO4Cf-ayDri3w_456OcTB7eF3xt1RT9KBVpSOku1lMW08NA9jq7FGDYBjvHNGqAOy39RUuk51YyE9so-pNQ8GuYJJrWTC8scOQv-W21-5RvzlqkCvbbvXaYClZFxqfaPh66VNgRNf/s1600/b.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#A4C400;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#A4C400;color:#FCFEFE} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#FCFEFE;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #FCFEFE;border-top:1px solid #FCFEFE;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#777!important;color:#fff!important;text-decoration:none}

Selanjutnya sobat blogger cari kode berikut:
<header>  : untuk menempatkan menu di atas nama blog
</header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSiW6ZYEqv1djOU_HGsutRW7H5x7fzQdJgL1iIE45HIFuRn5HgfnnBgGbEEp5W7r1F2PLTsCrP1kVu_XQseOpYBWXel2Pyr_aNGyD7JN3_ZjFY-zUUXfGVN3pLVGCCzeggk6BGbLT7HAO/s1600/Home.png' style='padding:0px;'/> Home</a></li>
<li><a class='trigger'>Pertama</a>
<ul>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kedua</a>
<ul>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Ketiga</a>
<ul>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Keempat</a>
<ul>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
</ul>
</li>
<li><a class='trigger'>Kelima</a>
<ul>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
<li class='hr'/>
<li><a href='#'>xxx</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:5px 5px 0 0;'>
<form action='http://toriqoel.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://carabikinlog.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:5px 5px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-rr6RotMD5OGpmg9alYD6lZqjGtO6eJA5E94l5gibOpd-R7_0bRTwJUy2AS-xwAbl-W5EYf1F__161WtW5jKW8tk3p9QKzMQEHTSlHRmHbxQ1GTtB6wuaiL90rJl-YhGKcDVALdwz/s1600/Cari+disini+ker.gif) no-repeat;' type='text' value='Cari disini Ker...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh01sUcScSS2u5zRZr99xX-EiOa65kklXHUkHJ2N4aQDGOJ4BT6MAsK456ezSANllZL23DeWDEN4yNjVv9_fmASeqerVjnPwc9qdKbuh3U0lA3ZfUugSgXH4bZoL29odvHbreGTpMiG/s1600/SEAR5.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>


Keterangan:
1. Kode '#' adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
2. Kode xxx adalah kalimat yang tampil pada menu dropdown, Silakan sobat  sesuaikan.

Demikianlah Cara Membuat Menu DropDown Warna Hijau Super Keren, semoga bermanfaat bagi sobat blogger pada umumnya.

Cara membuat Menubar di blog

Cara membuat Menubar di blog - Hmm, sobat sudah pada tau menubar itu apa kan? hah belum? okedeh tidak apa-apa reggy jelaskan lagi untuk yang belum tau. Menubar adalah sebuah kotak tab/bar yang isinya berupa navigasi link. 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. Pada postingan sebelumnya saya juga telah menjelaskan bagaimana cara membuat menubar pada template klasik.  Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:

Menubar ini juga bisa dibuatkan lagi submenu kebawahnya, lihat di gambar. Nah jadi misalkan sobat ingin memasang submenu dari sebuah link itu tinggal menambah sedikit kode yang akan dijelaskan dibawah. Oh iya, menubar di postingan ini tidak ada search box seperti digambar. Tetapi jika sobat inginmembuat menubar di blog dengan search box, silahkan kunjungi postingan Disini. Sudah tau kan bagaimana penampakan menubar di blog itu? nah, cara membuat menubar di blog tidak sulit kok. 

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://blognya-reggy.blogspot.com/'>Edit me</a></li>

<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>

<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>

<li><a href='http://blognya-reggy.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://blognya-reggy.blogspot.com/'>Edit me</a></li>

<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>

<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a>

<ul>

<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>

<li><a href='http://blognya-reggy.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 "

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 Tabel di Posting Blog

Cara Membuat Tabel 

Ini adalah contoh pembuatan tabel yang saya jadikan Radio Player, bisa di Play/Pause :

Radio Indonesia dan Manca Negara

Untuk para sobat Blogger tentunya kadang-kadang membutuhkan tampilan tabel untuk posting-nya. Selain agar terlihat rapih, input data/penulisan yang singkat tidak terlalu menghabiskan tempat.Berikut tutorial dasar pembuatan tabel pada posting blog. Pada pembuatan tabel sobat harus berada dalam mode HTML (berdampingan dengan Compose) disaat melakukan posting.

Perintah dasar membuat tabel di posting blog :

<table border="1">
<tr>
<td></td> <td></td> 
</tr>
</table>

Keterangan:
<table = perintah untuk membuat tabel
border> = perintah untuk mengatur tebal garis pinggir
<tr> = perintah untuk membuat baris pada tabel
<td> = perintah untuk membuat kolom pada tabel

Contoh Pembuatan Tabel Sederhana :

<table border="1">
<tr>
<td>Input Data</td> <td>Input Data</td> <td>Input Data</td> 

</tr>
<tr>
<td>Input Data</td> <td>Input Data</td>  <td>Input Data</td>

</tr> 

</table>

Maka hasilnya akan seperti berikut.

Input Data	Input Data	Input Data
Input Data	Input Data	Input Data

Agar salah satu baris tidak mengikuti jumlah kolom diatasnya, atau sobat ingin menggabungkan beberapa kolom, maka ada pengetikan perintah yang sedikit diberikan tambahan seperti berikut.

<table border="1">
<tr><td align="center" colspan="3">Input Data</td>
</tr>
<tr>
<td>Input Data</td> <td>Input Data</td> <td>Input Data</td> 

</tr>
</table>

Maka hasilnya akan seperti berikut.

Input Data
Input Data	Input Data	Input Data

Keterangan :
Untuk tulisan warna merah sobat ganti dengan data yang sobat inginkan.
Untuk tulisan warna hijau atau border sobat bisa sesuaikan.
Untuk tulisan warna biru sobat dapat menyesuaikan dengan banyak kolom yang akan digabungkan

Sekian panduan kami untuk membuat tabel, somoga bermanfaat.

sumber: <a href="http://regibrader-free.blogspot.com/2013/02/membuat-tabel-di-posting-blog.html" target="_blank">Cara Membuat Tabel di Posting Blog</a>

Cara Membuat Kotak Text Area

Postingan kali ini akan membahas mengenai panduan Cara Membuat Kotak Text Area dengan Scroll yang dapat ditarik hingga melebar, diisi comment (text), terdapat scroll apabila tulisannya panjang melebihi batas lebar dan tinggi kotak text area tersebut.

Contoh Text Area dengan Scroll Otomatis
text box scroll

Untuk memasang text area seperti di atas, anda tinggal memasang kode berikut ini :

<p align="center"><textarea name="code" rows="6" cols="20"> di sini tempat menaruh kode atau text yang akan tampil di dalam text area, ganti sesuai yang diinginkan </textarea></p>

Selamat mencoba!

Keterangan :
Ganti tulisan text yang digarisbawahi, dengan kata, kalimat, atau kode yang ingin anda letakkan didalam kotak text area tersebut.
rows : jumlah baris
cols : jumlah kolom
bisa juga dengan menggunakan atribut height : 20px; dan width : 40px;
Atur sesuai keinginan anda membuat form message text area ini.

Cara Edit Warna

Background

Background, atau yang dikenal dengan latar belakang, merupakan salah satu komponen desain yang cukup penting. Background terutama digunakan untuk memberikan dekorasi visual terhadap sebuah elemen, yang akan mengakibatkan peningkatan kemudahan nalar atau pengertian akan sebuah konten. Background memiliki pengaruh yang sangat besar terhadap keseluruhan desain dari sebuah website karena hal ini.

Penambahan latar belakang ke sebuah elemen dapat dilakukan dengan banyak cara, mulai dari penambahan warna (yang telah dilakukan berkali-kali pada bab sebelumnya), penambahan gambar, ataupun penggabungan dari keduanya. CSS memberikan kita kemampuan penuh untuk mengatur bagaimana penampilan dari latar belakang sebuah elemen, sehingga kita dapat dengan mudah meningkatkan keindahan visual dari elemen tersebut.

Untuk lebih jelasnya, kita mari kita lihat langsung properti CSS yang berhubungan dengan hal ini!

Warna Latar Belakang

Salah satu cara termudah untuk memberikan latar belakang terhadap sebuah elemen ialah dengan memberikan warna pada latar belakang elemen tersebut. Penambahan warna ini dilakukan dengan menggunakan properti background atau background-color. Kedua properti ini dapat digunakan secara bebas, meskipun properti background dapat digunakan juga untuk memberikan gambar (yang akan dibahas pada bagian selanjutnya). Pemilihan properti yang digunakan sendiri tidak memiliki batasan, selain preferensi dari pengguna.

div {
    background: #F00;
    background-color: #F00; /* efek yang sama */
}

Sama seperti Warna Teks, pengisian nilai dari properti ini dapat menggunakan beberapa cara, yaitu kode heksa, rgb, rgba, hsl, maupun hsla.

div {
    background: #F00;
    background: rgb(255, 0, 0);
    background: rgba(255, 0, 0, 1);
    background: hsl(0, 50, 100);
    background: hsla(0, 50, 100, 1);
}
Tentunya pemilihan nilai yang diisikan juga hanya dibatasi oleh preferensi pengguna.

Gambar Latar Belakang

Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font.

div {
    background: url('latar.png');
    background-image: url('latar.png');
}

Sayangnya, penambahan gambar dengan cara di atas akan memberikan masalah ketika ukuran gambar tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali, secara horizontal maupun vertikal, jika ukuran elemen lebih besar dari ukuran gambar.

Untuk dapat melihat bagaimana kesalahan tersebut bekerja, simpan dan jalankan kode berikut, dan lihat hasilnya:

<!DOCTYPE html>
<html>
    <head>
        <title>Background Image Goes Wrong</title>
        <style type="text/css">
            #main {
                background-image: url('twitter-logo.png');
                height: 600px;
                width: 800px;
            }
        </style>
    </head>

    <body>
        <div id="main">
        </div>
    </body>
</html>
Gambar yang digunakan ialah gambar berikut:

Logo Twitter Berukuran 80x80 px
Logo Twitter Berukuran 80x80 px

Hasil dari eksekusi kode di atas ialah sebagai berikut:

Penampilan Gambar Latar Berulang pada Kedua Buah Sumbu
Penampilan Gambar Latar Berulang pada Kedua Buah Sumbu

Perhatikan bagaimana logo twitter ditampilkan berulangkali, secara vertikal maupun horizontal. Hal ini disebabkan oleh ukuran dari logo twitter yang hanya 80 x 80 px, sementara ukuran dari elemen div#main adalah 800 x 600 px.

Perulangan Gambar Latar

Meskipun terkadang hasil seperti ini memang diinginkan, seringkali hasil perulangan otomatis ini tidak diinginkan. Kita dapat menggunakan properti background-repeat untuk mengatur bagaimana perulangan kode ingin dilakukan.

Terdapat empat nilai yang dapat diisikan pada properti background-repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y. Seperti namanya, no-repeat menghilangkan perulangan, repeat-x memberikan perulangan hanya pada sumbu x (horizontal), dan repeat-y memberikan perulangan hanya pada sumbu y (vertikal). Tentunya, seperti yang dapat dideduksi dari kode sebelumnya, repeat merupakan nilai standar, yang memberikan perulangan pada sumbu x dan sumbu y.

Kode CSS di bawah akan menghilangkan perulangan pada sumbu x dan sumbu y, sehingga logo twitter hanya akan ditampilkan satu kali:

#main {
    background-image: url('twitter-logo.png');
    background-repeat: no-repeat;
    height: 600px;
    width: 800px;
}
Posisi Gambar Latar

Selain memberikan kontrol terhadap perulangan gambar latar, CSS juga memberikan kontrol terhadap posisi dari gambar latar itu sendiri. Hal ini tentunya sangat berguna, terutama untuk mengatur posisi pasti dari gambar latar pada elemen yang sangat besar, seperti penampung dari seluruh elemen dalam halaman.

Posisi gambar latar dapat diatur menggunakan properti background-position, yang menerima dua nilai: koordinat sumbu x dan sumbu y tempat kita ingin meletakkan gambar latar. Koordinat yang diisikan menggunakan sistem koordinat kartesius terbalik, di mana titik 0, 0 berada pada kiri atas elemen.

Koordinat Gambar Latar

Koordinat Gambar Latar

Pengisian koordinat sendiri dapat dilakukan dengan dua cara, yaitu nilai pixel atau persentasi. Berikut adalah contoh pengunaan background-position untuk menampilkan logo twitter pada posisi yang berbeda:

#main {
    background-image: url('twitter-logo.png');
    background-position: 50px 50px;
    background-repeat: no-repeat;
    border: 1px solid black;
    height: 600px;
    width: 800px;
}
yang akan memberikan hasil:

Contoh Pengunaan Properti background-position
Contoh Pengunaan Properti background-position

Penulisan Singkat Properti Background

Seperti banyak properti-properti lainnya, properti background juga dapat ditulis secara singkat, dengan sintaks:

background: color image position repeat;

Untuk melihat bagaimana penulisan singkat di atas digunakan, kita akan membuat sebuah panel notifikasi, seperti berikut:

Panel Notifikasi, Menggunakan Properti Background
Panel Notifikasi, Menggunakan Properti Background

Kode yang digunakan ialah sebagai berikut:

<!DOCTYPE html>
<html>
    <head>
        <title>Notification Panel, Using Background</title>
        <style type="text/css">
            #notification {
                background: rgba(175, 0, 0, 0.2) url('danger-logo.png') 5px 12px no-repeat;
                border: 1px solid rgba(175, 0, 0, 0.7);
                border-radius: 5px;
                color: #F00;
                padding: 10px 10px 10px 25px;
            }
        </style>
    </head>

    <body>
        <div id="notification">
            Do Not Touch. 10.000 v!
        </div>
    </body>
</html>
Penggabungan Gambar Latar

Salah satu fitur CSS yang sangat memudahkan kita dalam membuat desain yang baik ialah kemudahan yang disediakan untuk memberikan beberapa gambar latar belakang pada sebuah elemen. Cara pemberian juga sederhana, dengan hanya menambahkan daftar latar belakang yang ingin digunakan, dipisahkan dengan tanda ,.

Berikut adalah contoh pengunaan beberapa latar belakang pada sebuah elemen:

<!DOCTYPE html>
<html>
    <head>
        <title>Multiple Background</title>
        <style type="text/css">
            #main {
                background:
                    url('grass.png') 0 100% no-repeat,
                    url('man.png') 95% 100% no-repeat,
                    url('sky.jpg') 0 0 no-repeat;
                height: 450px;
                width: 600px;
            }
        </style>
    </head>

    <body>
        <div id="main">
        </div>
    </body>
</html>
Hasil eksekusinya adalah sebagai berikut:

Pengunaan Banyak Gambar Latar pada CSS
Pengunaan Banyak Gambar Latar pada CSS

Perhatikan juga bahwa perubahan urutan gambar yang digunakan pada kode CSS akan mempengaruhi hasil akhir dari gambar. Silahkan coba mengganti urutan-urutan yang ada, untuk melihat bagaimana gambar-gambar tersebut saling berinteraksi!

Gradien

Gradien merupakan teknik pengisian warna yang mengisikan warna bergantung kepada posisi dari elemen. Warna-warna yang dihasilkan oleh gradien berubah-ubah sesuai dengan posisi warna dalam elemen, sehingga gradien dapat menghasilkan transisi warna yang halus.

Contoh Gradien

Contoh Gradien

Gradien digunakan dalam desain terutama untuk menghilangkan impresi warna yang terlalu besar, ataupun untuk memberikan efek transisi kepada pengguna. Terdapat dua jenis gradien utama, yaitu “Linear Gradient” dan “Radial Gradient”.

Kiri: Linear Gradient, Kanan: Radial Gradient
Kiri: Linear Gradient, Kanan: Radial Gradient

Pembuatan kedua jenis gradien ini sendiri sangat sederhana, hanya menggunakan sintaks pembuatan masing-masing gradien yang cukup jelas. Misalnya, untuk membuat linear gradient, kita dapat menggunakan sintaks sebagai berikut:

background: linear-gradient(#F00, #F80);
dengan hasil eksekusi sebagai berikut:

Linear Gradient Menggunakan CSS
Linear Gradient Menggunakan CSS

dan kita juga dapat menambahkan arah gradien dengan menambahkan nilai arah yang diinginkan pada parameter pertama fungsi (pada kode di atas gradien bergerak dari atas ke bawah, seperti yang dapat dilihat pada gambar Linear Gradient Menggunakan CSS).

background: linear-gradient(to right, #F00, #F80);
dengan hasil:

Linear Gradient ke Kanan Menggunakan CSS
Linear Gradient ke Kanan Menggunakan CSS

adapun nilai-nilai yang dapat diisikan pada parameter pertama ialah nilai arah dan gabungannya, seperti: right, left, top, bottom, maupun top right, bottom left, dan seterusnya. Kita juga dapat mengisikan nilai derajat lingkaran pada parameter pertama, seperti berikut:

background: linear-gradient(200deg, #F00, #F80);
dengan hasil:

Linear Gradient 200 Derajat Menggunakan CSS
Linear Gradient 200 Derajat Menggunakan CSS

Pembuatan radial gradient sendiri menggunakan sintaks yang sama, dengan nama fungsi berbeda: linear-gradient diubah menjadi radial-gradient.

background: radial-gradient(#F00, #FFF);
Radial Gradient Menggunakan CSS
Radial Gradient Menggunakan CSS

sumber : http://bertzzie.com/knowledge/desain-web-dasar/Background.html

Cara Edit Warna Background

Color Dan Background CSS

Dalam pelajaran ini anda akan belajar cara menggunakan warna dan latar belakang di website Anda. Kami juga mempertimbangkan teknik canggih posisi dan manajemen gambar latar belakang. Akan dijelaskan di CSS-sifat berikut:

color
background-color
background-image
background-repeat
background-attachment
background-position
background

Warna latar depan: properti 'color'

Properti menggambarkan warna warna foreground elemen.

Sebagai contoh, bayangkan bahwa kita ingin melakukan semua judul dokumen merah gelap. Semua judul yang ditunjuk HTML-elemen <h1>. Dalam kode di bawah elemen warna merah <h1> diatur.

h1 {
color: # FF0000;
}

Warna bisa ditentukan sebagai nilai heksadesimal, seperti dalam contoh ( #FF0000 ), atau Anda dapat menggunakan nama warna ( "red" ) atau nilai rgb (RGB (255,0,0) ).

Properti 'background-color'

Latar Belakang properti warna menggambarkan warna latar belakang dari elemen. 

Dalam elemen <body> ditempatkan seluruh isi dokumen HTML. Jadi, untuk mengubah warna latar belakang dari keseluruhan halaman, background-color berlaku untuk sebuah <body>.

Anda juga dapat menggunakan properti ini untuk unsur-unsur lain, termasuk - untuk judul dan teks. Contoh berikut warna latar belakang yang berbeda yang diterapkan pada elemen dan <h1> <body>.

body {
background-color: # FFCC66;
}

h1 {
color: # 990000;
background-color: # FC9804;
}

Perhatikan bahwa menetapkan dua properti untuk <h1>, dipisahkan dengan titik koma.

Background gambar [background-image]

CSS-background-image properti digunakan untuk memasukkan gambar latar belakang.

Anda dapat digunakan sebagai gambar latar belakang, gambar yang sudah ada di situs Anda atau langsung dari situs lain, yang perlu Anda lakukan adalah untuk menentukan path lengkap ke sana dengan http:// di awal.

Untuk menyisipkan gambar sebagai gambar latar belakang, halaman tersebut hanya menerapkan properti background-image dalam tag <body> dan tentukan lokasi gambar.

body {
background-color: # FFCC66;
background-image: url ("image.gif");
}

h1 {
color: # 990000;
background-color: # FC9804;
}

Perhatikan bahwa kita tentukan di mana file tersebut berada sebagai url ("image.gif"). Ini berarti bahwa dalam folder yang sama dengan stylesheet. Tentu saja Anda juga dapat mengacu pada file gambar dalam folder lain menggunakan, misalnya, url ("/Images/image.gif"), atau bahkan file di Internet, masukkan alamat lengkap file:

url ("http://wen.ru/i/logo.gif")

Ulangi / animasi gambar latar [background-repeat]

Apakah Anda melihat pada contoh sebelumnya, gambar akan diulang di default horisontal dan vertikal mengisi seluruh layar. Properti background-repeat kontrol atas hal itu. 

Di bawah ini adalah empat nilai-nilai background-repeat:

background-repeat: repeat-x (Gambar diulang horizontal)
background-repeat: repeat-y (gambar ini diulangi vertikal)
background-repeat: repeat (gambar ini diulangi horizontal dan vertikal)
background-repeat: no-repeat (Gambar tidak diulang)

Misalnya, untuk membatalkan mengulang / wallpaper kartun, kita harus menulis kode seperti ini:

body {
background-color: # FFCC66;
background-image: url ("image.gif");
background-repeat: no-repeat-;
}

h1 {
color: # 990000;
background-color: # FC9804;
}

Mengunci gambar latar belakang [background-attachment]

Properti background-attachment menentukan apakah gambar latar belakang tetap atau gulungan dengan dengan halaman. 

Berikut adalah dua nilai background-attachment:

Background-attachment: scroll (gulungan gambar dengan halaman -unlocked)
Background-attachment: fixed (gambar diblokir)

Sebagai contoh, kode berikut menangkap gambar:

body {
background-color: # FFCC66;
background-image: url ("image.gif");
background-repeat: no-repeat-;
background-attachment: fixed;
}

h1 {
color: # 990000;
background-color: # FC9804;
}

Lokasi wallpaper [background-position]

Gambar latar belakang default diposisikan di sudut kiri atas layar. Properti background-position memungkinkan mengubah nilai standar, dan wallpaper dapat ditempatkan di manapun pada layar. 

Ada banyak cara untuk mengatur background-position. Namun demikian, mereka mewakili satu set koordinat. Sebagai contoh, nilai '200px 100px' memiliki gambar latar belakang ke kiri 100px dan 200px dari atas jendela browser. 

Koordinat dapat ditetapkan sebagai persentase dari lebar layar, unit tetap (pixel, cm, dll) atau Anda dapat menggunakan kata-kata top, bottom, center, left dan right. 

Tabel berikut memberikan beberapa contoh:

background-position: 2cm 2cm (Gambar 2 cm terletak di sebelah kiri dan 2cm dari atas)
background-position: 50% 25% (Gambar terletak di pusat dan seperempat layar di atas)
background-position: top right (Gambar di sudut kanan atas halaman)

Dalam kode contoh gambar latar belakang terletak di sudut kanan bawah layar:

body {
background-color: # FFCC66;
background-image: url ("image.gif")
; background-repeat: no-repeat-;
background-attachment: fixed;
background-position: right bottom;
}

h1{
color: # 990000;
background-color: # FC9804;
}

Disingkat notasi [background]

latar belakang ini termasuk dalam semua karakteristik yang tercantum dalam pelajaran ini.

Dengan latar belakang, Anda dapat memampatkan beberapa properti dan menulis gaya Anda dalam bentuk singkatan, yang memfasilitasi membaca tabel. 

Sebagai contoh:

background-color: #FFCC66;
background-image: url ("image.gif");
background-repeat: no-repeat-;
background-attachment: fixed;
background-position: right bottom;

Menggunakan latar belakang, hasil yang sama dapat dicapai dengan satu baris kode:

background: #FFCC66 url ("image.gif") no-repeat fixed-right bottom;

Urutan sifat unsur ini adalah sebagai berikut:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Jika properti tidak ada, secara otomatis mendapat nilai default. Sebagai contoh, jika background-attachment dan background-position tidak ada dalam contoh ini: 

background: # FFCC66 url ("image.gif") no-repeat;

maka kedua sifat yang tidak ditentukan diberikan nilai default - scroll dan top left.

Demikian kurang lebih untuk Cara Edit Warna Background di dalam blogger termasuk menu bar.

Tips untuk menjadi rangking 1 di Google

Tips rangking 1 di Google. Karena ada banyak yang masih bingung tentang apa sih yang bikin suatu situs ranking di Google, jadi saya bakal coba untuk jelasin sesuai dengan yang saya ngerti tentang alasan kenapa suatu situs bisa ranking di Google dan kenapa situs lain tidak.

Nah, meski benar bahwa ada lebih dari 200 indikator yang dipakai oleh Google untuk me-ranking situs, bukan berarti bahwa kita harus tahu semuanya. Itu bodo namanya... haha... selama kita tahu konsep utama dan tujuan dari Google, sebenarnya sih GAMPANG aja ngelihat alasan kenapa suatu situs bisa rank dan situs lain nggak..

Oke, sebelumnya saya mau kasih tahu dulu, Google itu APA SIH sebenarnya?

Well, Google adalah mesin pencari.

Klo misal saya dengan keyword "jackie chan" dan yang keluar situs-situs dengan topik mengenai "hamster", mesin pencarinya bagus ato bobrok? Ya jelas BOBROK donk, nyari jackie chan masa yang keluar "hamster".. jauh amat...

Nah, jadi apa ciri mesin pencari yang bagus?

Mesin pencari yang ngeluarin hasil pencarian yang RELEVAN dengan keyword yang diketik oleh user. Mesin pencari yang klo orang ngetik jackie chan, ya yang keluar situs tentang "jackie chan"!

Apa yang terjadi jika Google tidak mengeluarkan hasil yang relevan? Orang TENTU bakalan KAPOK pakai Google, mereka bakal ganti dengan BING untuk cari informasi.

Klo orang pada pindah ke Bing, apa yang terjadi? Traffic google turun. Klo traffic Google turun, apa yang terjadi? Revenue google dari adwords juga TURUN.

Jadi, apa TUJUAN UTAMA Google?

Jadi mesin pencari yang mengeluarkan hasil pencarian yang RELEVAN dengan yang dicari oleh user!!

Okay... sampai sini anda masih bersama saya 'kan?

Nah, relevansi ini adalah KUNCI UTAMA dari kenapa suatu situs rank tinggi dan situs lain tidak ranking. Intinya, jika anda ingin rank LEBIH TINGGI di Google, tingkatkan RELEVANSI situs anda untuk kata kunci yang anda incar...

Dari tadi bicara relevansi-relevansi melulu, apa sih yang jadi indikator relevansi bagi Google itu?

Sekarang kita mulai bicara hal asyiknya... intinya gini, SEO itu (selain keyword research) cuman ada dua, yaitu on page SEO dan off page SEO. Dua hal itu adalah indikator utama dari RELEVANSI.

Yang PERTAMA KALI di lihat oleh Google adalah on page seo anda. Simpel aja, kalo suatu halaman nyantumin kata "jackie chan" atau yang berhubungan dengan itu di judul, di gambar, di badan artikel, dan di tempat-tempat lain, BESAR KEMUNGKINAN situs tersebut tentang jackie chan, benar bukan?

Nah, jadi on page SEO ini adalah gerbang pertama anda bisa ranking lebih tinggi...

Tapi ada masalah nih, penilaian relevansi dari on page SEO aja ga cukup objektif. Karena hal ini berada dalam kendali sepenuhnya dari webmaster, bisa aja kan halaman ini aslinya tidak begitu relevan, tapi karena ingin banyak traffic jadi dibikin seolah-olah relevan?

Jadi google perlu indikator relevansi lain selain on page seo. Nah apa donk?

Jawabnya adalah off page seo (backlink dari situs webmaster lain yang mengarah ke situs lu)...

Sederhananya gini, semakin banyak orang nge link ke kamu, maka logikanya semakin USEFUL halamanmu.. ini bakal ningkatin KEKUATAN dan TRUST dari halaman yang kamu miliki.

Nah, klo orang yg ngelink ke kamu menggunakan anchor text "jackie chan" ato yang berhubungan dengan itu gimana? Wah... ya tambah RELEVAN donk... semakin KUAT indikator relevansi yang kamu miliki...

Dari dulu sampai sekarang ya cuman DUA itu intinya, cuman sekarang tambah BANYAK cara dapat backlink nya, jadi teknik SEO juga berkembang...

Nah, tapi ada satu masalah lagi... ternyata dengan semakin gampang webmaster bikin link (pake tools lah, pake apa lah, banyak situs ngijinin kita bikin link lah, dlsb), terbuka kemungkinan bagi webmaster untuk CURANG lagi...

Mereka bisa bikin banyak link dengan anchor text "jackie chan" ke halaman mereka. Karena itu link yang bikin sendiri, tentu kurang mencerminkan sisi USEFULNESS dan RELEVANSI donk... iya kan? Kan jadi kurang objektif...

Nah, untuk hal-hal yang seperti ini akhirnya Google memperbaiki FILTER yang ia punya. Tujuannya apa? Yah untuk memastikan bahwa situs spam dengan over optimize anchor text dan on page SEO tidak rank di google.

Mulai deh kita kenal ama yang namanya Panda, Pinguin, Pinguin 2.0, dlsb...

Elemen baru di SEO yang juga perlu diperhatikan sekarang adalah naturalness.

Ga cukup kita bangun banyak link dengan anchor text yg kita mau plus on page seo, kita sekarang juga harus bikin semua upaya SEO kita terlihat "natural" di mata Google agar tidak kena filter -- aka tidak men-trigger Google penalty...

Tentang indikator NATURALNESS yang Google pake, itu untuk lain kali... tapi yang jelas sekarang anda sudah NGERTI, apa sih yang bikin situs rank lebih tinggi daripada situs lain...

Yuk kita recap, pertama adalah RELEVANSI, kemudian TRUST, setelah itu USEFULNESS.

Klo situs anda dibawah pesaing anda, berarti ada satu dari tiga hal tersebut yang anda kurang dibanding pesaing anda...

Sekarang contoh, situs anda domain berumur 1 tahun 4 bulan, backlink 100 biji on page seo fokus ke keyword "hamster bazooka", pesaing adalah wikipedia berumur puluhan tahun, backlink puluhan ribu, tapi ga ada kata hamster bazooka kecuali SEKALI di bawah sendiri bagian artikel.

Siapa yang menang?

Jelas anda karena meski wikipedia TRUSTED dan USEFUL, tapi TIDAK RELEVAN -- masih lebih relevan situs anda...

Sekarang situs anda, narget keyword "syamsul alam", on page seo optimal, backlink 100 biji, tanding ama situs saya narget keyword yang sama, on page SEO tidak se optimal anda, tapi karena ini situs saya sendiri, orang pada nge link ke saya dengan anchor "syamsul alam" menjadikan saya punya 4000 link yang berkaitan dengan keyword "syamsul alam"...

Jadi siapa yang menang?

Sama-sama RELEVAN, situs anda mungkin lebih USEFUL, tapi dilihat siapa yang lebih TRUSTED. Situs saya sumber yang lebih TRUSTED karena lebih banyak di link, jadi saya yang menang... :D Gampang to...

Terakhir, situs narget keyword yang sama, jumlah backlink sama, tapi bounce rate situs A 30% sementara situs B 50%.

Mana yang menang?

Klo sama2 relevan dan sama2 trusted, maka yang dilihat adalah USEFULNESS (paling terakhir), darimana Google tahu klo suatu situs itu berguna? Dari bounce rate, return visitor, average time per visit, dlsb... karena bounce rate situs A lebih rendah, jadi di jangka panjang, situs A lebih tinggi rank nya... (contoh yang ga mungkin pernah ada karena ga ada situs yang sama plek relevansi dan trust score nya)...

Kurang lebih gitu lah Tips untuk menjadi rangking 1 di Google, ingat ini semua opini saya. Hati-hati, for educational purpose only. Kelalaian dalam menggunakan informasi ini di luar tanggung jawab saya. :D Konsultasikan pada ahli SEO kepercayaan anda sebelum 'mengamalkan' ilmu ini...

Kode HTML Warna dan Cara Membuat Widgetnya

        Kode HTML Warna dan Cara Membuat Widgetnya - Dalam dunia desain, baik itu desain website, brosur, produk, atau apapun itu pastinya semua membutuhkan warna. Karena sebenarnya warna merupakan sumber estetika dari seni. Dalam komputer, warna yang dikenal bukanlah hanya 1 sampai 20 warna, melainkan ribuan jenis warna. Oleh karena itu, maka sulit bila kita mengingat keseluruhan nama warna. Sehingga ada yang menciptakan kode-kode warna dalam format Hexadecimal. Ada banyak kode-kode warna, tapi saya akan berikan yang menurut saya
paling ssering digunakan oleh orang-orang. Berikut adalah bagan kode-kode warna dalam Hexadecimal.

Kode HTML warna

Untuk kode-kode di atas, jangan lupa untuk memberikan tanda "#" sebelum kode tersebut.

Selain bagan diatas, saya mempunyai 1 buah bagan yang lebih sederhana. Karena warna yang terdapat dalam bagan ini jauh lebih sedikit dan merupakan warna yang paling sering digunakan oleh orang-orang.

Kode HTML warna

*Info : Selain dengan menggunakan kode Hexadecimal di atas, anda juga dapat menggunakan nama dari warna tersebut. Walaupun memang terkadang ada beberapa yang tidak bisa.

Bagaimana, sudah mendapat warna yang anda inginkan ? Sesuai dengan judul artikel ini, saya juga akan menjelaskan untuk membuat tools kode warna pada blog. Caranya tidak sulit dan terbilang mudah, mari ikuti penjelasan saya dibawah ini .

Anda hanya perlu membuat sebuah postingan baru atau halaman baru dimana anda ingin meletakan tools ini.

Pertama adalah anda harus log in ke dashboard blogger anda terlebih dahulu.

Setelah log in, silahkan anda pilih Post kemudian Entri Baru lalu pilih HTML bukan compose

Lalu Copy-Paste kode dibawah ini.
<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash
.cab#version=6,0,40,0" height="480" id="obj1" width="420"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie"> <param value="High" name="quality"> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="420" height="420"> </object>

<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash
/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess"> <param value="http://www.2createawebsite.com/build/col.swf" name="movie"> <param value="high" name="quality"> <param value="#ffffff" name="bgcolor"> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>;

Nantinya tools tersebut akan menjadi 2 macam, yang kurang lebihnya adalah seperti ini.

Cara Membuat Menubar Keren Tanpa Menggunakan Edit HTML

Cara Membuat Menubar Keren Tanpa Menggunakan Edit HTML (Menggunakan Javascript)

Kali ini, saya akan memberikan tutorial cara untuk membuat menubar untuk Blogger yang super simple, gak perlu pake“Edit HTML”yang bisa bikin pusing, soalnya kalau pake itu apabila salah satu huruf atau simbol aja akibatnya udah fatal. Bisa-bisa hasilnya jadi nggak sesuai dengan yang kalian inginkan. Nah, kalo tutorial yang satu ini cocok banget buat pengguna Blogger terutama untuk pemula. Gimana caranya? Langsung lihat yuk ke TKP :

1. Pertama, ini nih yang pasti kalian lakukan sebelum mengedit blog. Ya, Sign In dulu menggunakan akun Google kalian.
2. Terus, buka menu Page Element / Tata Letak.
3. Klik Add Gadget / Tambah Gadget
4. Copy - Paste kode di bawah ini

_________________________________________________________________________________
<style type="text/css">

.black{
float:left; margin-bottom:10px;
padding:0px; width: 100%;
overflow: hidden; background: #499bea;
background: -moz-linear-gradient(top, #999 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}

.black ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none; }

.black li{
display: inline; margin: 0;}

.black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}

.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}

#searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }

#searchboxo form input.searchinput{
background: #fff; padding:6px; margin:0px; width: 160px;
border: solid 1px #999; outline: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 3px #666;
-webkit-box-shadow: inset 0 1px 3px #666;
box-shadow: inset 0 1px 3px #aaa; }

#searchboxo form input.submitbutton{
cursor:pointer; width: 60px;
background: #FCFCFC;
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );
border:1px solid #d8d8d8;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
color:#000; padding:4px; text-shadow:1px 1px #fff;}

</style>

<div class='black'>
<ul><li><a href=" #">NAMA MENU</a></li>
<li><a href="#">NAMA MENU</a></li>
<li><a href="#">NAMA MENU</a></li>
<li><a href="#">NAMA MENU</a></li>
</ul>

<div id='searchboxo'>
<form action='/search' id='searchform' method='get'> <input class='searchinput' id='searchbox' name='q' onblur='if (this.value == "") {this.value = "Insert keyword here...";}' onfocus='if (this.value == "Insert keyword here..."{this.value = "";}' type='text' value='insert keyword here...'/><input class='submitbutton' type='submit' value='search'/></form></div></div>
_________________________________________________________________________________

NB : Tulisan warna biru yang perlu diganti:

Wajib kalian ganti :

• Simbol # : Ganti dengan URL link menu kalian
• Tulisan NAMA MENU : Ganti dengan nama menu kalian
• Kalo ingin menambah/mengurangi menu, tinggal copy-paste/delete kode menu

Boleh kalian ganti (gk diganti nggak apa-apa) :

• Tulisan black : Ganti dengan warna dasar menu yang kalian inginkan. Ingat, pake bahasa Inggris, dan semuanya harus sama
• Kode warna (#499bea ; dsb): Ganti dengan kode warna yang kalian inginkan (Bisa didapat dari Adobe Photoshop ato yang lainnya)
• Tulisan bold : Ini adalah font style. Kalo pingin fontnya sama dengan yang ada di blog, ganti dengan “none”
• Tulisan Verdana : Ini adalah font. Kalian bisa ganti fontnya sesuai keinginan kalian, tapi jangan asal (Bisa didapat dari Microsoft Word ato yang lain)
• Tulisan 14 px : Ini adalah font size. Kalian bisa ganti sesuai dengan ukuran yang kalian inginkan.
• Tulisan white : Ganti dengan warna font menu yang kalian inginkan
• Tulisan Insert keyword here... : Bisa diganti dengan kata lainnya, tapi tetep harus berhubungan dengan search engine.

Mungkin haya itu dari kami, kalau masih bingung, silahkan comment atau hub. admin. Moga Bermanfaat :)

sumber : http://creativity2project.blogspot.com/2012/10/membuat-menu-horizontal-tanpa-edit-html.html