MEMBUAT MENU DROPDOWN MENGGUNAKAN CSS SCRIPT (MENU NAVIGASI HORISONTAL)

Menu navigasi yang terpasang diblog dimaksudkan untuk memudahkan pengunjung menelusuri isi blog, selain itu juga menjadi pinti masuk robot search engine dalam menelusuri link yang ada di dalam blog.

Seperti dalam bahasan terdahulu tentang menu navigasi horisontal bercabang dengan cabang hanya 1 level, dalam postingan ini kita mencoba membuat menu navigasi horisontal (drop down menu) dengan cabang hingga dua level. Script menu ini bersumber dari css menu maker.

Tampilan menu navigasi bisa dilihat pada gambar di bawah ini

Untuk membuatnya login ke akun blogger



1. Pilih Dashboard - Tataletak - Edit HTML

cari kode berikut:  ]]></b:skin>

2. Di bagian atas kode tersebut masukkan kode berikut

div#container
{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }

h1
{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:left; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }

ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }

ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

3.  Klik tombol "Simpan Template"

4. Buka halaman "Tata Letak -> Elemen Halaman"

5. Pada Elemen header , klik " Tambah Gadget"

Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header 

6. Pilih gadget html/javascript masukkan script berikut :

<div id="container">
<br><br>
<ul id="navigation-1">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" >Notebook</a></li>
<li><a href="#" >Modem<span>»</span></a>
<ul class="navigation-3">
<li><a href="#">GSM Modem</a></li>
<li><a href="#">CDMA Modem</a></li>
</ul>
</li>
<li><a href="#">Desktop PC</a></li>
<li><a href="#">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#">VGA Card</a></li>
<li><a href="#">Sound card</a></li>
<li><a href="#">TV Tuners</a></li>
<li><a href="#">Modem</a></li>
<li><a href="#">Mainboard</a></li>
<li><a href="#">Firewire</a></li>
<li><a href="#">Hardisk</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#">Artikel Komputer</a></li>
<li><a href="#">Amazon</a></li>
<li><a href="#">Clothes</a></li>
<li><a href="#"> Computer Articles<span>»</span></a>
<ul class="navigation-3">
<li><a href="#">My Computer Dummies</a></li>
<li><a href="#">Dummy Blog</a></li>
<li><a href="#">Feed</a></li>
</ul>
</li>
</ul>
</li>
</ul>

</div>

Catatan:
Pada script di atas
Ganti  semua tanda # pada href="#" dengan url target atau url tujuan.

Contoh blog yang memakai menu horisontal bisa dilihat disini menu horisontal

MEMBUAT EFEK PELANGI PADA LINK

Nah triks kali ini cukup keren buat mempercantik blog anda penasaran gi mana sih efek linknya nah loe bisa mendekatkan mause pada judul posting saya, lihat kan judulnya jadi warna-warni.
membuatnya cukup mudah ya, langkah pertama ;

1. login terlebih dahulu
2. masuk ke tata letak(layout)>> edit HTML
3. beri tanda centang pada Expand Template Widget
4. cari code <body>
5. copy code berikut dan letakkan setelah code <body>

<script src='http://www.dhedyfaste.xp3.biz/script/rainbowlink.js'
type='text/javascript'>
</script>

6. simpan template . lihat hasilnya .. iih. . woww

KHASIAT MADU

Manfaat Madu untuk Wajah yang berjerawat

Jika Anda berjerawat atau punya banyak bekas jerawat di wajah, tentu Anda akan mencoba segala hal untuk membuat jerawat dan bekasnya segera menghilang dari wajah.

Alam telah menyediakan obat terbaik untuk menyembuhkan jerawat dan merawat kecantikan kulit.

Anda dapat membersihkan kulit secara holistik dengan menggunakan produk alami dan mengonsumsi makanan sehat.

Salah satu produk alam yang bisa digunakan untuk merawat wajah berjerawat sekaligus mempercantik dan mengencangkan kulit wajah adalah madu.

Madu dapat digunakan sebagai masker wajah untuk menghilangkan jerawat, bekas jerawat, serta mengurangi kemerahan dan iritasi akibat jerawat.

Madu mengandung sifat penyembuh alami yang terdiri dari enzim, antioksidan, dan anti bakteri yang dapat membantu membersihkan kulit.

Selain itu, madu merupakan pelembab alami yang sangat bagus. Madu juga dapat mengurangi kelebihan minyak pada kulit. Masker wajah yang terbuat dari madu sangat bagus untuk orang yang memiliki kulit sensitif.

Menggunakan madu 2-3 kali seminggu sebagai masker wajah, bukan hanya akan mengurangi jerawat dan bekasnya, tetapi juga akan membuat kulit wajah bercahaya.

Berikut adalah tips menggunakan madu sebagai masker wajah untuk menghilangkan jerawat dan bekasnya:

Gunakan bandana untuk mencegah rambut terurai ke area wajah sebelum menggunakan masker wajah dari madu.

Hapus semua make-up dan cuci wajah dengan sabun lembut dan air hangat sebelum menggunakan masker madu.

Tuangkan satu sendok makan madu murni yang masih mentah ke dalam mangkuk kecil. Jika mau, Anda bisa menghangatkan madu selama 10 detik dalam microwave sebelum menggunakannya.

Oleskan madu menggunakan aplikator atau jari yang sebelumnya sudah dibersihkan. Oleskan madu dengan lapisan tebal ke seluruh area wajah. Biarkan madu menempel pada wajah selama 15 menit sampai satu jam.

Untuk menghilangkan madu, usapkan handuk kecil yang telah dibasahi dengan air hangat ke wajah. Ulangi proses ini sampai semua madu benar-benar bersih dari wajah.

Anda dapat menggunakan masker madu ini 2-3 kali dalam seminggu atau sesuai dengan keinginan