Tutorial Blog
Link
Others
TOURING
- Semarang
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
- Kendal
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
- Grobogan
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
RSS

Kamis, 10 Maret 2011

MENGATUR DAFTAR ISI

Untuk mengatur daftar isi seperti text dan link supaya lebih rapih di lihatnya.
kita akan menggunakan kode OL(ordered list) UL(unordered list) dan LI(list item).
Contoh kita akan mengatur text atau linknya dengan menggunakan UL dan LI .
Contoh:

Kode di atas akan menghasilkan daftar isi dengan bundaran seperti ini:

Di sini isi text dan linknya
Di sini isi text dan linknya

Nah keterangan di atas seperti ini: <ul> adalah bentuk type bundarannya, dan <li> adalah yang mengatur barisannya.. Nah untuk Bentuk <ul> itu bermacam macam jenisnya, ada SQUARE, CIRCLE dan DISC.. yang bundar, yang kotak dan yang kotak kosong.

Contoh untuk UL yang bentuk SQUARE.
Kodenya:
Nah kode di atas akan tampil UL berbentuk kotak seperti ini:

Di sini isi text dan linknya
Di sini isi text dan linknya

Untuk UL yang bentuk CIRCLE.
Kodenya:
Nah kode ul yang ini akan menghasilkan kotak kosong seperti ini:

Di sini isi text dan linknya
Di sini isi text dan linknya

Dan untuk UL yang bentuk DISC itu sama dengan bentuk UL yang pertama di atas akan menghasilkan UL bundar.

Nah sekarang kita akan mengatur daftar isinya dengan menggunakan OL(ordered list) untuk pengganti UL(unordered list), UL itu bentuknya bundar, kotak dan kotak kosong. Tapi kalau OL itu bentuk huruf dan angka.
Contoh untuk menggunakan OL berbentuk huruf:
Kode di atas akan tampil dengan barisan urutan huruf seperti ini:

Di sini isi text dan linknya
Di sini isi text dan linknya
Di sini isi text dan linknya

Untuk OL yang berbentuk angka Kodenya:
Nah kode OL yang ini akan tampil dengan urutan angka seperti ini:

Di sini isi text dan linknya
Di sini isi text dan linknya
Di sini isi text dan linknya

Nah jadi fungsi OL itu untuk mempermudah kita menulis daftar urutan huruf dan angka. kita tidak harus susah susah menulis huruf A sampai Z dan menulis 1 sampai 100..
Dengan menggunakan kode OL kita cukup mengetikan huruf A dan nanti akan otomatis keluar huruf B,C,D dan seterusnya..
cara menulisnya dengan format seperti ini:
<ol type="A">
Dan untuk format angka tinggal di rubah hurufnya menjadi angka, contohnya seperti ini:
<ol type="1">
cukup mudahkan membuat daftar urutan angka dan huruf.?

Nah dan untuk mengisi text atau linknya kita harus menambahkan kode <li>
Contoh:
<ol type="1"><li>di sini untuk meletakan textnya</li> dan seterusnya, yang penting untuk mengisi textnya harus di awali kode <li> dan untuk penutupnya harus di ahiri kode </li> . Nah kalau sudah selesai menulis textnya nanti harus di akhiri dengan kode </ol>
selesai deh...

paham kan?.
ya sudah selamat berkreasi sendiri yah..

Membuat Membuka Link Di Tab Baru

   Pernah ga anda klik link dan munculnya di tab baru? Mau membuatnya juga? ikuti langkah di bawah ini :

*Biasanya pada link kodenya akan seperti ini :

           <a href='http://bloganda.com'>Blog Anda</a>

*Untuk membuatnya terbuka di tab baru ganti dengan :

<a href="#" target="_blank" rel="dofollow" onclick="window.open('http://bloganda.com'); return false;">Blog Anda</a>

Cat : Ganti teks yang berwarna merah dengan Alamat Link yang inginkan
        Ganti teks yang berwarna Biru dengan kata yang akan muncul mewakili Alamat Link

Selamat Mencoba :D

Rabu, 09 Maret 2011

CSS Specificity

CSS Specificity menentukan seberapa spesifik kah sebuah aturan pada CSS. Jika ada 2 atau lebih aturan pada sebuah elemen yang sama, maka aturan paling spesifiklah yang akan dipakai oleh browser.

Nilai specificity pada CSS bisa dihitung sbb:

Element Selector, yaitu selector yang berupa tag-tag html, contohnya div, ul, li, a
nilai specificity = 1 (0,0,1)
Class Selector, yaitu selector yang diawali dengan tanda titik, contohnya .menu untuk elemen dengan class="menu"
nilai specificity = 10 (0,1,0)
ID Selector, yaitu selector yang diawali dengan tanda #, contohnya #sidebar untuk elemen dengan id="sidebar"
nilai specificity = 100 (1,0,0)

Contoh 1:

1 2	a { color: red; } a { color: green; }

Kedua selector tersebut memiliki specificity yang sama, karena itu aturan yang akan dipakai adalah yang terakhir (paling bawah), sehingga elemen <a> (link) akan berwarna hijau.
Contoh 2:

#sidebar ul.menu li a { color: red; }
ul.menu li a { color: purple; }
ul li a { color: green; }
li a { color: yellow; }
a { color: teal; }

Kode di atas adalah beberapa aturan css untuk sebuah elemen link (<a>). Kode htmlnya sbb:

<div id="sidebar">
 <h2>Menu</h2>
 <ul class="menu">
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="guestbook.html" style="color:silver">Guestbook</a></li>
 </ul>
</div>

Perhitungan specificity nya:

#sidebar ul.menu li a
memiliki specificity = 113
(1 ID Selector + 1 Class Selector + 3 Element Selector)
ul.menu li a
memiliki specificity = 13
(1 Class Selector + 3 Element Selector)
ul li a
memiliki specificity = 3
(3 Element Selector)
li a
memiliki specificity = 2
(2 Element Selector)
a
memiliki specificity = 1
(1 Element Selector)

Dengan melihat perhitungan specificity di atas, maka kita bisa mengetahui bahwa paling spesifik adalah aturan yang pertama. Jadi link akan berwarna merah.
Selain menggunakan selector, untuk menerapkan css kita juga bisa mendefinisikan inline style, yaitu dituliskan langsung pada tag html menggunakan attribute style, contohnya <a style="color:blue">teks</a>.
Pengaturan menggunakan inline style akan mengalahkan ketiga jenis selector di atas. Jadi pada contoh tersebut, link guestbook akan berwarna silver.
Referensi:
CSS: Specificity Wars

Artikel tersebut akan memberikan pemahaman tentang CSS Specificity menggunakan analogi Star Wars.
Namun bagi yang tidak mengerti Star Wars, mungkin artikel tersebut bisa memudahkan untuk memahami Star Wars melalui CSS

Menambah Menu Horizontal Multy Drop Down

Tips Blog :

Sudah lama ngak bahas soal tips tips blog. kali ini mencoba membahas satu menu. lumayan suka juga aku sama menu yg satu ini. menu horizontal multy drop down, yach begitu lah blogger sering menyebutnya. sedikit share nih buat teman-teman pendatang baru yang pingin nyoba menu ini.

pertama sudah pasti pergilah ke blogger melalui account kamu, kalau sudah login klik layout/element halaman --->> EDIT HTML . lalu cari kode ini :

]]></b:skin>

dan tambahkan kode berikut diatasnya

#NavbarMenu {
background: #228B22 url(http://i28.tinypic.com/2lk5ukm.jpg) repeat-x top left ;
width: 100%;
height: 35px;
color: #FFF;
margin: 0;
padding: 0;
font: bold 12px Arial, Tahoma, Verdana;
}
#NavbarMenuleft {
width: 865px; /* lebar menu sebelah kiri */

float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 340px; /* lebar menu sebelah kanan */
font-size: 11px;
float: right;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
border-right: 1px solid #FFF;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
font: normal 16px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background: #808000 ;
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#9ACD32 url();
width: 150px;
color: #FFF;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #008000;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}

catatan :

tulisan berwarna biru adalah penjelasan warna dari setiap menu , warna bisa kamu ganti biar sesuai dengan blog kamu, kode warna bisa dilihat di sini

kalau tulisan hitam adalah penjelasan dari lebar menu kanan dan kiri, lebar dari ke dua menu tidak boleh lebih dari lebar outter-wrapper. usahakan sama atau kurang dikit, kalau sudah save template dahulu.

diatas adalah kode CSSnya, sekarang peletakan kode htmlnya, carilah dahulu kode

kalau sudah ketemu letakan kode barikut diatasnya :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://namablogmu.blogspot.com/'>Home</a></li>
<li><a href='#'>tambah menu</a>
<ul>
<li><a href='#'>tambah menu</a>
<ul>
<li><a href='#'>tambah menu</a></li>
</ul>
</li>
<li><a href='#'>tambah menu</a></li>
</ul>
</li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>

<li><a href='#>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
</ul>
</div>
</div>

catatan, untuk menambah drop baru lihat kode2 berwarna merah dan itu adalah panduannya, ikuti jika ingin menambah drop baru

tulisan # adalah lokasi link untuk menu baru.

menu ini juga bisa di letakan diatas kode :

<div id='header-wrapper'>

sama-sama baiknya.

catatan: jika template ngak bisa disave jangan sungkan bertanya, karna menu ini memang sedikit susah ditangani bila sudah pake bercabang-cabang. jadi mesti ada kesabaran mengolahnya.

Selasa, 08 Maret 2011

Cara Membuat Menu Horizontal Bercabang Pada Blogger

Kali ini saya membahas tentang cara membuat menu horizontal pada blogger dan kalau rekan-rekan cari di google search mungkin sudah banyak artikel tentang menu horizontal ini.
Tapi saya membahas ini mungkin rekan-rekan ada yang belum tahu caranya membuat menu horizontal bercabang ini, mari kita ikuti cara membuatnya.

Berikut ini gambar contoh dari menu horizontal bercabang

Cara Membuat menu Horizontal Bercabang

1. Login ke account blogger anda
Pilih Rancangan -> Tataletak -> Edit HTML

cari kode berikut:

]]></b:skin>

2. Di bagian atas kode tersebut masukkan kode berikut

/* Navbar */#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;opacity: 0.99; filter: alpha(opacity: 98);}#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}#menu ul{padding:0; margin:0;}#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}#menu ul li ul {display:none;}#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}.status-msg-wrap{display:none;}

4.    Klik tombol "Simpan Template"

5.    Buka halaman "Elemen Halaman"

6.    Pada Elemen header , klik " Tambah Gadget"

7.    Pada kotak dialog html/javascrpit masukkan kode html berikut:

Lihat Demo

catatan:
Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
misalnya:
http://trik-blogger-andreas.blogspot.com
atau
http://trik-blogger-andreas.blogspot.com/2010/07/cara-memasang-signature-pada-setiap.html
teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.

9. Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya

Selamat mencoba semoga berhasil.

Membuat Menu tombol menggunakan CSS3

Bagaimana cara membuat Menu tombol dengan CSS3 dengan efek berkilau..... untuk caranya yaitu sebagai berikut:
Hasil tampilannya seperti ini:

Login bloggger
Masuk ke rancangan lalu masuk ke menu edit html
Cari kode ]]></b:skin> (ctrl+F untuk mempermudah pencarian)dan taruh kode di bawah ini sebelum kode tersebut.

#bgmenu {
width:100%;
height:30px;
}
#menu a {
font:12px verdana;
font-weight:bold;
color:#000;
text-shadow:0px 2px 3px #fff;
text-decoration:none;
}
#menu a:hover {
color:#fff;
text-shadow:0px 2px 3px #000;
text-decoration:none;
}
#menu li {
margin-right:10px;
float: left;
list-style: none;
}
.abu{
text-align:center;
background:-moz-linear-gradient(top, #999 , #666 );
width:80px;
padding:5px;
margin-bottom:10px;
-moz-border-radius:50px;
-moz-box-shadow:0px 5px 8px grey;
border:1px solid #0F0;
}
.kilau {
background:#fff ;
height:5px;
margin:-5px 0px 15px 0px;
padding:5px 5px 5px 5px;
color:000;
-moz-border-radius:20px;
-moz-box-shadow:0px 2px 6px #999;
opacity:0.6;
}
.text {
margin-top:-25px;
color:#000;
font:14px trebuchet ms;
font-weight:bold;
opacity:0.9;
}

.
Untuk selanjutnya Kemudian cari kode </head> , dan taruh kode di bawah ini setelah kode tersebut

yang berwarna biru (#, menu 1)silahkan kawa-kawan isi dengan alamat situs yang diinginkan dan juga Nama menunya...........

Selamat Mencoba.....

Sabtu, 05 Maret 2011

Membuat navigasi menu pada blog dengan CSS Menu Generator

Mungkin banyak dari anda yang sudah tahu cara membuat menu navigasi pada Blog, maupun cara mengcustomisasinya. Namun pada postingan kali ini saya akan memberikan tips ringan yang tentunya dapat anda aplikasikan pada blog anda yaitu bagaimana cara membuat menu navigasi pada blog namun dengan bantuan aplikasi sederhana bernama CSS Menu Generator. Dari namanya kita tentu tahu bahwa nantinya kode yang dihasilkan berupa CSS Code. Langsung saja ke TKP :

* MEMBUAT MENU *

1. Download aplikasinya di http://www.wonderwebware.com/, install seperti biasa.

2. Jalankan Aplikasinya dan tampilan yang didapat adalah seperti ini :

Keterangan :
a. Kotak Merah adalah tombol untuk membuat menu baru (Menu Utama)
b. Kotak Biru adalah tempat untuk membuat Sub-Menu

3. Sekarang buatlah menu dengan menekan tombol New

4. Pada pilihan Item isi dengan nama menu, lalu isikan Link yang ingin dituju. Isikan hingga sesuai kebutuhan anda.

5. Setelah semua terisi, pilih tampilan menu yang diinginkan dengan memindahkan Tab kesamping menu.

a. Horizontal Menu : Menu dengan arah mendatar

Keterangan : Anda dapat melakukan perubahan pada Menu Settings (KOTAK MERAH) , banyak pilihan yang dapat anda Cuztomise mulai dari Perwarnaan, Jenis Font yang digunakan hingga ukuran font.

b. Vertical Menu : Menu dengan arah tegak

c. Combo –Box Menu : Menu Dropdown

d. Pull-Down Menu : Hampir sama dengan Horizontal menu tetapi mempunyai fungsi Dropdown menu

* MEMBUAT SUB – MENU *

Sama halnya jika kita ingin membuat Sub – Menu, yang harus kita dahulukan adalah penempatan menu akan ditaruh di Sub mana menu yang akan kita buat ??? Sebagai Contoh : Saya akan membuat Sub-Menu pada Menu SOFTWARE.

1. Klik pada menu Software lalu,Pilih tombol New Sub-Item

2. Isikan Nama Sub-Menu dan Link yang dituju

3. Buat lagi menu tersebut sesuai kebutuhan

4. Apabila sudah cukup arahkan tab anda pada Pull - Down menu. Tampilan yang didapat seperti gambar dibawah :

Catatan : ini hanya berlaku pada Pull – Down Menu saja

* MENERAPKAN PADA BLOG *

Setelah berhasil membuat menu saatnya untuk memasangnya pada Blog kita. Yang patut anda lakukan hanyalah copy paste kode CSS dari menu tersebut kedalam template blog kalian.

1. Buka tab HTML/CSS Code

2. Ada dua pilihan kode pada menu tersebut

Kotak Merah : adalah kode CSS menu yang ditempatkan diatas kode ]]></b:skin>
Kotak Biru : adalah kode HTML navigasi menu taruh diatas kode

<div id='NavbarMenu'>

atau

<div id="content-wrapper">

Tergantung template anda.Cukup mudah bukan anda dapat melakukan penyesuaian dengan template anda.

Kode HTML Untuk Membuat Kotak Dalam Posting

Kode ini aku dapatkan dari halaman FAQ situs FLAG counter ketika aku mengkopi paste contoh kodenya. Sepertinya kode ini bisa berguna banget untuk mempercantik penampilan posting ya. Misalkan dalam suatu posting ada suatu kalimat yang ingin ditaruh dalam kotak seperti dibawah ini:

Contoh tulisan yang diletakkan dalam kotak.

Maka cara membuatnya adalah sebagai berikut: pada mode Edit HTML, letakan tulisan yang ingin diberi kotak diantara baris kode yang berwarna biru seperti contoh dibawah ini :

<p style="border-right: #6c7a7d 1px inset; padding-right: 30px; border-top: #6c7a7d 1px inset; padding-left: 30px; margin-left: 20px; border-left: #6c7a7d 1px inset; margin-right: 70px; border-bottom: #6c7a7d 1px inset"><font color="#ff0000">Contoh tulisan yang diletakkan dalam kotak.</font></p>

*****
Catatan:

Pada waktu kode diletakan pada Edit HTML Posting blogspot, kode akan mengalami perubahan sedikit. Hal itu tidak jadi masalah, kodenya tetap sama hanya saja ditulis dalam bentuk yang sedikit berbeda.

border-right = garis pinggir kotak sebelah kanan
border-left = garis pinggir kotak sebelah kiri
border-top = garis pinggir kotak sebelah atas
border-bottom = garis pinggir kotak sebelah bawah
#6c7a7d; #ff0000 = kode warna, rubah sesuai keinginan
1px inset = ketebalan garis pinggir kotak, rubah sesuai keinginan
padding-right = jarak tulisan dengan garis pinggir kotak sebelah kanan
padding-left = jarak tulisan dengan garis pinggir kotak sebelah kiri
margin-right = jarak kotak dengan pinggir posting sebelah kanan
margin-left = jarak kotak dengan pinggir posting sebelah kiri
20px; 30px; 70px = satuan jarak, rubah sesuai keinginan
font color = warna teks, hapuskan kode ini jika ingin teksnya berwarna seperti warna teks pada posting

Selamat mencoba.

Jumat, 04 Maret 2011

MEMBUAT SUB SUB MENU DI BLOGGER

Postingan kali ini bercerita tentang sub menu atau dropdown menu dengan menggunakan CSS3, dari beberapa rekan yang baru saat ini bisa saya jawab.
Sebelumnya saya mohon maaf, dikarenakan banyaknya email dan pertanyaan yang masuk, yang mengakibatkan ada beberapa pertanyaan yang belum terjawab, mohon maklum adanya.

Saya akan coba buat dari dasar HTML sampai Customize sub menu-nya.
1. Hal pertama yang harus dilakukan adalah membuat kode HTML seperti dibawah ini.

<ul id="menuq">
    <li><a href="http;//www.karsono.co.cc">Home</a></li>
    <li><a href="#">About Me &gt;</a>
        <ul>
            <li><a href="http://id-id.facebook.com/people/karsono-sajah/1366190217" target="_blank">Facebook</a></li>   
            <li><a href="#">Profile &gt;</a>
    <ul>
                    <li><a href="http://id.linkedin.com/in/karsono" target="_blank">Linkedin</a></li>
                    <li><a href="http://www.visualcv.com/p1rx4tg" target="_blank">VisualCV</a></li>
               </ul>
   </li>
            <li><a href="http://twitter.com/karsono" target="_blank">Twitter</a></li>
        </ul>
    </li>
    <li><a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank">Email</a></li>
</ul>

dimana hasilnya akan terlihat seperti demo sub menu 1 disini.

2. Dalam demo tersebut kondisi dari menu masih berbentuk html standar, lalu saya akan coba tambahkan beberapa kode CSS yang akan menampilkan animasi dengan hover untuk menampilkan atau menyembunyikan list dari menu, kode CSS-nya:

#menuq { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#menuq li ul { display: none; }
#menuq li:hover ul{display: block; }
#menuq li:hover ul li ul{display: none; }
#menuq li ul li:hover ul { position:relative; top:-30px; left:8em; display: block; }
#menuq li ul li{ height: 30px; line-height: 30px; }

dimana hasilnya akan terbentuk seperti Demo sub menu 2 ini.

3. Dengan melihat hasil dari demo pada langkah kedua, berarti tinggal dibuat custom warna dari menu supaya menarik, caranya tinggal ditambahkan kode css menu dibawah

#menuq li { float: left; position: relative; padding: 0; line-height: 40px; background: #F6F5F1; }
#menuq li:hover { background-position: 0 -40px; }
#menuq li a { display: block; padding: 0 15px; color: #000; text-decoration: none; }
#menuq li a:hover { background:#CC716A; color: #fff; }
#menuq li ul { opacity: 0; position: absolute; left: 0; width: 8em; background:#CCD5E2; list-style-type: none; padding: 0; margin: 0; }
#menuq li:hover ul { opacity: 1; }
#menuq li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#menuq li:hover ul li { height: 30px; line-height: 30px; }
#menuq li ul li a { background: #F6F5F1; }
#menuq li ul li a:hover { background:#CC716A; }

sampai disini sub menu dengan css3 sudah berhasil dibuat, hasilnya bisa dilihat DEMO sub menu 3 disini.

4. Langkah keempat ini berbentuk pilihan, dimana kode CSS3 ini dibuat untuk menghasilkan animasi menu yang lebih menarik lagi, jadi gak dipake juga gak masalah, caranya tinggal ditambahkan saja kode seperti dibawah ini.

#menuq li { -webkit-transition: all 0.2s; }
#menuq li a { -webkit-transition: all 0.5s; }
#menuq li ul { -webkit-transition: all 1s; }
#menuq li ul li { -webkit-transition: height 0.5s; }

hasil dari sub menu ini, secara keseluruhan akan terlihat seperti DEMO sub menu disini.

sedangkan untuk kode-nya secara keseluruhan bisa langsung digunakan di blogger, pilih pada menu Design >> Page Elements >> Add a Gadget >> pilih HTML/Script dan pastekan kode dibawah ini tepat dibawah header.
Tentunya untuk penempatan harus disesuaikan dengan design dari template blog itu sendiri, jadi harus di custom lagi supaya letak dan posisinya pas dan sesuai dengan template blog yang ada.

<style type="text/css">
#menuq { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#menuq li ul { display: none; }
#menuq li:hover ul{display: block; }
#menuq li:hover ul li ul{display: none; }
#menuq li ul li:hover ul { position:relative; top:-30px; left:8em; display: block; }
#menuq li ul li{ height: 30px; line-height: 30px; }
#menuq li { float: left; position: relative; padding: 0; line-height: 40px; background: #F6F5F1; }
#menuq li:hover { background-position: 0 -40px; }
#menuq li a { display: block; padding: 0 15px; color: #000; text-decoration: none; }
#menuq li a:hover { background:#CC716A; color: #fff; }
#menuq li ul { opacity: 0; position: absolute; left: 0; width: 8em; background:#CCD5E2; list-style-type: none; padding: 0; margin: 0; }
#menuq li:hover ul { opacity: 1; }
#menuq li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#menuq li:hover ul li { height: 30px; line-height: 30px; }
#menuq li ul li a { background: #F6F5F1; }
#menuq li ul li a:hover { background:#CC716A; }
#menuq li { -webkit-transition: all 0.2s; }
#menuq li a { -webkit-transition: all 0.5s; }
#menuq li ul { -webkit-transition: all 1s; }
#menuq li ul li { -webkit-transition: height 0.5s; }
</style>

<ul id="menuq">
    <li><a href="http;//www.karsono.co.cc">Home</a></li>
    <li><a href="#">About Me &gt;</a>
        <ul>
            <li><a href="http://id-id.facebook.com/people/karsono-sajah/1366190217" target="_blank">Facebook</a></li>   
            <li><a href="#">Profile &gt;</a>
    <ul>
                    <li><a href="http://id.linkedin.com/in/karsono" target="_blank">Linkedin</a></li>
                    <li><a href="http://www.visualcv.com/p1rx4tg" target="_blank">VisualCV</a></li>
               </ul>
   </li>
            <li><a href="http://twitter.com/karsono" target="_blank">Twitter</a></li>
        </ul>
    </li>
    <li><a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank">Email</a></li>
</ul>

Rabu, 02 Maret 2011

Cara Membuat Halaman Menu Dropdown di Blog_02

Membuat Menu Drop down mungkin terdengar aneh di telinga kita, memang saya sendiri awalnya tidak tau harus membuat kata kunci apa yang umum di gunakan di Indonesia untuk mencari tutorial sejenis ini. awalnya mau cara pasang halaman li di blogspot, lalu coba cara buat navbar menu lebar ke bawah, dan akhirnya cara membuat halaman menu pada blogspot mudah-mudahan pada nyangkut ke sini hehe.

Seperti apa sih Menu Drop down itu langsung aja liat gambarnya biar saya ga sulit ngejelasinnya

LIVE DEMO

Nah dah ngerti belum? menu dropdown adalah seperti gambar di atas, saat kita arahin kursor mouse salah satu menu di navbar, tiba-tiba mucul panjang kebawah (menu tambahan ke bawah) itulah yang di maksud dengan Dropdown Menu

Bagaimana cara buatnya?

1. Login ke Blogger.
2. Pilih Edit Tamplate
3. pilih Edit HTML

4. cari kode ]]></b:skin>
5. Silakan anda copy kode di bawah ini :

/* ----- NAVBAR MENU ----- */
#NavbarMenu {

width: 780px;
height: 30px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvznc2suMjBPH0hW2H3ofaDxdhOSlKYO-cQKJ_cQ11orlvS-B3DBMEoW_KxhxxxBuGxJX-4Uq-jwyMSwVETmEiq41dk8GQ-1wsEKncWPYV8qW579uomFw8yJEomK_DPPPvkdKpjh-mvOes/s800/navbar.gif) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 14px ARIAL;
}
#nav li a:hover, #nav li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvznc2suMjBPH0hW2H3ofaDxdhOSlKYO-cQKJ_cQ11orlvS-B3DBMEoW_KxhxxxBuGxJX-4Uq-jwyMSwVETmEiq41dk8GQ-1wsEKncWPYV8qW579uomFw8yJEomK_DPPPvkdKpjh-mvOes/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 15px,;
}

#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav
li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

6. Simpan di atas kode ]]></b:skin>

catatan :

pada text yang berwarna hijau di atas sesuaikanlah dengan lebar tamplate yang anda gunakan
pada text yang berwarna orange di atas biarkan saja

7. Setelah itu silakan copy kode berikut ini :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='Link-Kamu'>Tentang Kami</a>
<ul>
<li><a href='Link-Kamu'>Sejarah Perusahaan</a></li>
<li><a href='Link-Kamu'>Profil Perusahaan</a></li>
<li><a href='Link-Kamu'>Struktur Organisasi</a></li>
<li><a href='Link-Kamu'>Hubungi Kami</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Komputer</a></li>
<li><a href='Link-Kamu'>Hardware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Download%20Software'>Software</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Anti%20Virus'>Antivirus</a></li>
<li><a href='Link-Kamu'>Download MP3</a></li>
<li><a href='Link-Kamu'>Desktop Enhancements</a></li>
<li><a

href='http://asksalman19.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software
Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility Tool'>Peralatan</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>System Tools</a></li>
<li><a href='Link-Kamu'>Others</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Template</a>
<ul>
<li><a

href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New
Blogger Template</a></li>
<li><a href='Link-Kamu'>Classic Template</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://asksalman19.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a

href='http://asksalman19.blogspot.com/2009/09/tutorial-mudah-blog.html'>Tutorial
Mudah Blog</a></li>
</ul>
</li>
<li><a
href='/feeds/posts/default'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2n7ObsARrESdnmExrCrpdmfVbiYRdWxjko7J71R18M5c_LdbE2vzE42od_R-4nNDYlGtCiepTG2HMeZx9crqDe8TP7jrEVoHu1lYHjD8GWF1j-qJ429-OJukD3P_Gk1rp-Z0QfBa-_A/s1600/rss.gif'
style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>

</div> >
</div>

8. Simpan di bawah <body>

9. save.

Sehingga hasilnya seperti ini :

]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='BELAJAR KOMPUTER (Header)' type='Header'/>
</b:section>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='Link-Kamu'>Tentang Kami</a>
<ul>
<li><a href='Link-Kamu'>Sejarah Perusahaan</a></li>
<li><a href='Link-Kamu'>Profil Perusahaan</a></li>
<li><a href='Link-Kamu'>Struktur Organisasi</a></li>
<li><a href='Link-Kamu'>Hubungi Kami</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Komputer</a></li>
<li><a href='Link-Kamu'>Hardware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Download%20Software'>Software</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Anti%20Virus'>Antivirus</a></li>
<li><a href='Link-Kamu'>Download MP3</a></li>
<li><a href='Link-Kamu'>Desktop Enhancements</a></li>
<li><a
href='http://asksalman19.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software
Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility Tool'>Peralatan</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>System Tools</a></li>
<li><a href='Link-Kamu'>Others</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Template</a>
<ul>
<li><a
href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New
Blogger Template</a></li>
<li><a href='Link-Kamu'>Classic Template</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://asksalman19.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a href='http://asksalman19.blogspot.com/2009/09/tutorial-mudah-blog.html'>Tutorial Blog</a></li>
</ul>
</li>
<li><a
href='/feeds/posts/default'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2n7ObsARrESdnmExrCrpdmfVbiYRdWxjko7J71R18M5c_LdbE2vzE42od_R-4nNDYlGtCiepTG2HMeZx9crqDe8TP7jrEVoHu1lYHjD8GWF1j-qJ429-OJukD3P_Gk1rp-Z0QfBa-_A/s1600/rss.gif'
style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>

</div> >
</div>

Kode
di atas adalah kode yang saya gunakan di salah satu blog saya. dan
mungkin akan sedikit berbeda posisinya dengan template anda. namun
standarnya seperti contoh di atas. lihat hasilnya disini

keterangan :
1. jika anda ingin menambah dropdown lagi tinggal tambahkan saja kode :

<li><a href='#'>Tutorial</a>

<ul>
<li><a href='http://asksalman19.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Tips%20Blog'>Belajar Blogspot</a></li>
</ul>
</li>

Catatan :
Yang berwarna ungu di atas adalah "tutorial" adalah menu yang akan di buat dropdown ke bawaholeh kita. jadi bila nanti anda ingin membuat dropdown tambahan, tambahkan saja kode pada kumpulan kode menu pada no.7

2. Di atas, saya banyak menuliskan link ke arah blog ini, ganti dengan link yang ingin anda tuju, bisa ke arah blog anda atau orang lain.

Silakan lihat contoh yang sudah saya buat disini