Cara Mudah Dapat Uang di Internet Lewat Blog, Twitter, Facebook
» » Cara Buat Menu Drop Down Floatting Di Blogger

Cara Buat Menu Drop Down Floatting Di Blogger


D-Copy Blog | Hai sobat blogger, tutorial kali ini saya memposting tentang menu floatting drop down di blogger. Menu ini berwarna ungu kemerahan dan sangat cocok untuk gaya blog Anda yang lebih banyak menggunakan warna merah ataupun ungu.




Menu Drop Down Floaating

Langkah :
  1. Buka akun Blogger Anda
  2. Masuk ke menu edit HTML, jangan lupa centang Expand Template Widget
  3. Cari kode dibawah ini :
</head>
     4.  Pastekan kode dibawah ini, diatas pada kode diatas :
<style>
#menu { background-color: #ba1eaa;
 background-image: -moz-linear-gradient(#04acec, #ba1eaa);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
 background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
 background-image: -o-linear-gradient(#04acec, #ba1eaa);
 background-image: -ms-linear-gradient(#04acec, #ba1eaa);
 background-image: linear-gradient(#04acec, #0186ba);
                height:35px;; text-align:center; position:fixed; z-index:20; right: 0%; left: 0%;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#menu ul {display:inline-block;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {clear:both;float:none;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
#menu ul.level1 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu ul.level2 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu ul.level3 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu ul.level4 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
#menu a {display:block; font:normal 14px Arial; color:#fff; line-height:35px; text-decoration:none;padding:0px 15px 0 15px;outline:none;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover > ul {visibility:visible; left:0; top:35px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-35px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
#menu a:hover ul {left:0; top:30px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:30px;}
#menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}
#menu li a.fly {font-variant: small-caps;}
#menu li.left ul a.fly {font-variant: small-caps;}
#menu li a:hover,
#menu li a.fly:hover {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu li:hover > a,
#menu ul li:hover > a.fly {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu ul, .tabs-outer {overflow:visible;}
#menu li a {border: none;}
.main-outer {z-index:10;}/*for IE*/
.tabs-outer {z-index:11;}/*for IE*/
</style> 
    5.  Cari kode dibawah ini :
<div id='header-wrapper'>


Keterangan :

  • Jika kode diatas tidak ada, save lagkah 4 dan masuk ke menu layout > add gadget > HTML/Javascript dan pastekan kode dibawah ini (juga pada langkah 5 save kode dibawah ini) :
<div id="menu">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="###########">Home</a></li>
<li class="level1-li"><a class="level1-a fly" href="###########">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="###########">Email</a></li>
<li><a href="###########">Telephone</a></li>
<li><a href="###########">Online Form</a></li>
<li><a href="###########">Snail Mail Address</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="###########">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="###########">Ski Hire Facilities</a></li>
<li><a class="fly" href="###########">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="###########">Beginners Slopes</a></li>
<li><a href="###########">Intermediate Slopes</a></li>
<li><a class="fly" href="###########">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="###########">Local</a></li>
<li><a href="###########">Nearby</a></li>
<li><a href="###########">With instructor</a></li>
<li><a href="###########">Snow boarding</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="###########">Expert</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="###########">Night Life</a></li>
<li><a class="fly" href="###########">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="###########">Snow Hotel</a></li>
<li><a href="###########">The Snowman</a></li>
<li><a href="###########">Ice Cavern</a></li>
<li><a href="###########">Ski Inn</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="###########">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="###########">From Airport</a></li>
<li><a href="###########">In Resort</a></li>
<li><a href="###########">Multiple Resorts</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="###########">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="###########">Where to go</a></li>
<li><a href="###########">What to do</a></li>
<li><a href="###########">Places of interest</a></li>
<li><a href="###########">National parks &amp; Museums</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a" href="###########">Privacy</a></li>
<li class="level1-li"><a class="level1-a" href="###########">About Us</a></li>
<li class="level1-li"><a class="level1-a" href="###########">Contact Us</a></li>
<li class="level1-li"><a class="level1-a" href="###########">SiteMap</a></li>
<li class="level1-li"><a class="level1-a" href="###########">Official Website</a></li>
<li class="level1-li left"><a class="level1-a fly" href="###########">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="###########">Money Exchange</a></li>
<li><a class="fly" href="###########">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="###########">Lift Passes</a></li>
<li><a href="###########">Insurance</a></li>
<li><a class="fly" href="###########">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="###########">Boots</a></li>
<li><a href="###########">Skis</a></li>
<li><a href="###########">Ski Wear</a></li>
<li><a href="###########">Goggles</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="###########">Ski Schools</a></li>
<li><a href="###########">Snow Report</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="###########">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="###########">Austrian</a></li>
<li><a href="###########">German</a></li>
<li><a href="###########">French</a></li>
<li><a href="###########">English</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="###########">Short Breaks</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
</div>
     6.  Ganti kode yang berwarna merah dengan URL dan judul yang Anda inginkan.



Skill :

  1. Pemula
  2. Menengah
  3. Proffesional

Jika Anda bingun dengan kode-kode diatas Anda dapat berkomentar tau menghubungi saya lewat email Setiap Blogger bertanggung jawab atas apa yang dia tulis.

Terima kasih, semoga bermanfaat.

Odii Siitohang
Judul: Cara Buat Menu Drop Down Floatting Di Blogger;
Ditulis oleh: Unknown;
Rating Blog: 5 dari 5





Anda sedang membaca Artikel tentang Cara Buat Menu Drop Down Floatting Di Blogger dengan url http://d-copy.blogspot.com/2012/10/cara-buat-menu-drop-down-floatting-di-blogger.html, jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.
D-Copy Reader DMCA
[30] Komentar untuk Cara Buat Menu Drop Down Floatting Di Blogger:
  1. terima kasih infonya kawan. salam kenal

    ReplyDelete
  2. tanks gan ,,kunjungi juga gan blog ku
    http://logcyber.blogspot.com/

    ReplyDelete
  3. Thanks Gan... Kunjungi Blog Saya ya
    Kevintambunan.blogspot.com

    ReplyDelete
  4. Uraiannya tentang cara membuat menu sangat bermanfaat Sob. Ringkas dan padat namun sangat jelas. Oh ya, tidak lupa saya sampaikan salam kenal serta salam berbagi. :)

    ReplyDelete
  5. kalo ga mau floating gimana gan ???

    ReplyDelete
  6. Berguna gan kunjungi juga m-garuda.blogspot.com

    ReplyDelete
  7. Ane coba gan , blog sangat bermanfaat ,
    kunjungan balik
    www.edisukarman.com

    ReplyDelete
  8. mmm saya selalu gaga menu drop down, apa krn saya pemula??
    visit back ya ma odii http://azwarrangkuti.blogspot.com/

    ReplyDelete
    Replies
    1. Iya memang seperti itu lah bang kalau masih pemula. Saya juga dulu awalnya bingung dengan HTML tapi lama-kelamaan saya jadi terbiasa dengan penggunaan HTML.

      Delete
  9. sedapppppppppppppppp....

    langsung coba nih gan...
    thnks...kunjungi blog ane ya gan..ane masih pemula nih

    ReplyDelete
  10. horas bah lae..
    na mantap ma tutorial mu on..
    ro ma ho tu blog ku da..
    http://lavixtastar.blogspot.com
    maulate godang lae

    ReplyDelete
  11. Keren gan :
    Patut dikunjungi juga nih, buat sobat-sobat BLOGGER di blog sederhanaku!

    http://khae7.blogspot.com

    ada : PENGETAHUAN, DESAIN, RENUNGAN, KALIMAT BERGAMBAR GOKIL, CERITA LUCU DLL.

    Terima Kasih Sebelumnya

    ReplyDelete
  12. menunya keren sob , ijin mencoba...

    ReplyDelete
  13. kenapa menu nya pada saat srool down juga ikut turun mas..??
    mohon pencerahan

    ReplyDelete
    Replies
    1. Yah memang menu bar nya seprti itu bre, kan floatting (melayang).

      Delete
  14. cara masukin postingan kedalam medu dropdown td gmana bang ?

    ReplyDelete
  15. terima kasih min..
    infonya sangat membantu..

    salam luffy dari bandar lampung

    ReplyDelete
  16. Thanks for sharing such a nice post..it works like an incredible pc game, thanks for uploading this nice HD Games..we are happy if u also upload android games..thanks very much for such a wonderful work.

    ReplyDelete
  17. mangstab bro http://shawndown.blogspot.com/

    ReplyDelete
  18. ma ksih ilmunya gang
    kunjungi jga yah..!
    http://rudi-strife.blogspot.com/

    ReplyDelete
  19. izin nyobain ya sob. :D
    thanks for sharing. :)


    http://www.galaxy-ilmu.blogspot.com
    http://www.androidapkindonesia.blogspot.com

    ReplyDelete
  20. artikel menarik gan,kunjungan baliknya
    www.mbahgahol.blogspot.com
    follow aja nnti saya followbalik blog agan

    ReplyDelete

Beberapa panduan dalam berkomentar :
Untuk menyisipkan kode[code]KODE ANDA[/code]
Untuk menyisipkan quote[blockquote]QUOTE ANDA[/blockquote]
Untuk menyisipkan gambar[img]URL Gambar[/img]
Untuk menyisipkan video[youtube]URL Video[/youtube]
Anda bisa mengekspresikan komentar Anda dengan emoticon
Klik subscribe by email agar Anda segera tahu balasan komentar Anda

   


 
D-Copy Blog © 2013 - All Rights Reserved Design : Creating Website Published : Mas Template