Home » , » Cara Membuat Menu Drop Down Horisontal Melayang Di Blog

Cara Membuat Menu Drop Down Horisontal Melayang Di Blog

Written By Ku Copas on Monday, 30 April 2012 | 4/30/2012 12:30:00 am

KUCOPAS - Cara Membuat Menu Drop Down Horisontal Melayang Di Blog. Kali ini saya akan share artikel tentang cara membuat menu di blog, namun menu yang akan saya kasih triknya ini sangat mudah untuk membuat dan memasangnya di blog, karena sobat tidak akan menggunakan Edit Template, cukup hanya dipasang pada Tata Letak atau Rancangan blog saja, menu yang saya maksud adalah Menu Drop Down Horisontal Melayang Di Blog.

Cara Membuat Menu Drop Down Horisontal Melayang Di Blog

Untuk Cara Membuat Menu Drop Down Horisontal Melayang di Blog, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan >> Login/Masuk ke akun blog sobat.

2. Kemudian pilih >> Rancangan atau Tata Letak >> Tambah gadget, lalu pilih >> HTML/ Java Script.

3. Langkah selanjutnya silahkan sobat masukkan semua kode script berikut di bawah ini:

<style type="text/css">

#kucopas ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#kucopas li .current{color: transparant;}#kucopas li a:hover, #kucopas li a:active {background: #4B0082;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#kucopas {width: auto;float: left;margin: 0;padding: 0;}#kucopas {margin: 0;padding: 0;}#kucopas ul {float: left;list-style: none;margin: 0;padding: 0;}#kucopas li {list-style: none;margin: 0;padding: 0;}#kucopas li a, #kucopas li a:link, #kucopas li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#kucopas li a:hover, #kucopas li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#kucopas li li a, #kucopas li li a:link, #kucopas li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#kucopas li li a:hover, #kucopas li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#kucopas li {float: left;padding: 0;}#kucopas li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#kucopas li ul a {width: 140px;}#kucopas li ul ul {margin: -32px 0 0 171px;}#kucopas li:hover ul ul, #kucopas li:hover ul ul ul, #kucopas li.sfhover ul ul, #kucopas  li.sfhover ul ul ul {left: -999em;}#kucopas  li:hover ul, #kucopas  li li:hover ul, #kucopas  li li li:hover ul, #kucopas  li.sfhover ul, #kucopas  li li.sfhover ul, #kucopas  li li li.sfhover ul {left: auto;}#kucopas  li:hover, #kucopas  li.sfhover {position: static;}#footer-column-divide {clear:both;}#kucopas{font-family:Comic Sans Ms;background:#000  url(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}

</style>

<div id='kucopas'>

<ul id='kucopas'>

<li><a href='http://kuc0pas.blogspot.com/'>Home</a></li>

<li><a href='Ganti link sobat' target='_blank'>Daftar Isi</a></li>

<li><a href='http://kuc0pas.blogspot.com/' target='_blank'>Download</a>

<ul class='children'>

<li><a href='Ganti link sobat' target='_blank'>Download Aplikasi</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Game</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Icon</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download MP3</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Software</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Template</a></li>

</ul>

</li>

<li><a href='http://kuc0pas.blogspot.com/' target='_blank'>VIDEO</a>

<ul class='children'>

<li><a href='Ganti link sobat' target='_blank'>VIDEO FILM</a></li>

<li><a href='Ganti link sobat' target='_blank'>VIDEO ORKES</a></li>

<li><a href='Ganti link sobat' target='_blank'>VIDEO LAGU</a></li>

</ul>

</li>

<li><a href='Ganti link sobat' target='_blank'>Tips And Triks</a>

<ul class='children'>

<li><a href='Ganti link sobat' target='_blank'>Tips Blogger</a></li>

<li><a href='Ganti link sobat' target='_blank'>Trik Facebook</a></li>

<li><a href='Ganti link sobat' target='_blank'>Trik Handpone</a></li>

<li><a href='Ganti link sobat' target='_blank'>Pernak-pernik Blog</a></li>

</ul>

</li>

<li><a href='http://kuc0pas.blogspot.com/'>Tutorial Blog</a>

<ul class='children' target='_blank'>

<li><a href='Ganti link sobat' target='_blank'>Tutorial Blogger</a></li>

<li><a href='Ganti link sobat' target='_blank'>Tutorial Photosop</a></li>

</ul>

</li>

<li><a href='Ganti link sobat' title='tv online' target='_blank'>Tv Online</a>

<ul class='children'>

<li><a href='Ganti link sobat'>INDOSIAR</a></li>

<li><a href='Ganti link sobat' target='_blank'>RCTI</a></li>

</ul>

</li>

<li><a href='http://kuc0pas.blogspot.com/' target='_blank'><blink>Tukar Link Blog</blink></a></li>

<li><a href='www.geonggeong.com' title='GEONG GEONG' target='_blank'><blink>GEONG GEONG</blink></a></li>

</ul>
</div>

4. Silahkan sobat Simpan dan lihat hasilnya.

Keterangan:
  • Silahkan sobat ganti Link Url nya yang berwarna PINK dengan alamat URL yang sobat inginkan.
  •  Warna MERAH adalah teks Menu yang akan di tampilkan, silahkan sobat ganti.
Semoga artikel tentang Cara Membuat Menu Drop Down Horisontal Melayang Di Blog, bisa sangat bermanfaat untuk sobat KUCOPAS semua.

Artikel Terkait:

thumbnail Title: Cara Membuat Menu Drop Down Horisontal Melayang Di Blog
Posted by:Ku Copas
Published :2012-04-30T00:30:00+07:00
Rating: 5
Reviewer: 737 Reviews
Cara Membuat Menu Drop Down Horisontal Melayang Di Blog
Comments
20 Comments

20 comments:

  1. Ma kasih gan.bermanfaat banget!!!! salam kenal dari saya!!!!.dchoi

    ReplyDelete
  2. DavidChoi@ Terima kasih juga sudah berkunjung Gan...

    ReplyDelete
  3. terimakasih bayak gan,saya banyak belajar dr blog anda

    ReplyDelete
  4. Adien R.@ Iya Maksih balik Gan, Atas Kunjunganya... Happy Blogging...

    ReplyDelete
  5. Sbelumnya makasih ,cuma saya mau minta tolong yang menunya Biasa aja/yg standart ada gk code.nya...,

    ReplyDelete
  6. Aditya@ Maksud sobat menu yang biasa gimana?

    ReplyDelete
  7. @ Cendhikia Aditya Pratama >>>
    Dan
    @ Junaidi Sharez >>>
    Silahkan Sobat klik linkCara Membuat Menu Di Bawah Header Blog... Untuk membuat menu yang biasa.

    ReplyDelete
  8. Thanks infonya, izin sedooot....

    ReplyDelete
  9. thanks infonya
    sangat bermanfaat
    visit back ya
    http://abiyyiabdurrouf.blogspot.com/

    ReplyDelete
  10. menu nya berfungsi tapi dropdown nya gak muncul tuh gan

    ReplyDelete
    Replies
    1. Sudah saya cek, Menu-nya tetap normal sob...
      Mungkin ada kesalahan kode-nya yang sobat terapkan.
      Silahkan di cek lagi.
      Lihat DEMO menunya pada http://demokucopas.blogspot.com/

      Delete
  11. Ijin pasang, di blog sy.....saya suka tampilannya

    http://menguakrahasiadiri.blogspot.com/

    Tapi, saya susah mau merubah ukuran font-nya...mhn pencerahannya


    ReplyDelete
    Replies
    1. Cari saja kode font-size: dan ubah ukurannya dalam px; sob...

      Delete
  12. teriakasih banyak. syukurlah bisa berhasil. salam

    ReplyDelete
  13. Cakep menunya tanks Ilmunya Gan
    Kunjungi Balik gan http://caraanticopas.blogspot.com/

    ReplyDelete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger