Membuat Menu Navigasi Dropdown Efek Pelangi Diatas Header

Membuat Menu Navigasi Efek Pelangi Diatas Header >>

Malam sobat blogger kita berjumpa lagi di blog DEWATA ini, dan disini saya akan posting masih tentang Tips dan Desain blog, dimana masih ada kaitannya dengan efek pelangi.

Sebelumnya saya pernah share tentang cara Membuat efek pelangi text/tulisan pada postingan dan juga Membuat efek pelangi link blog. Dan pada kesempatan kali ini saya akan posting cara Membuat Menu Navigasi Efek Pelangi Diatas Header. Sesuai dengan judulnya menu navigasi ini sangat berbeda karena memiliki efek Hover pelangi, dan juga Menu Dropdown, Pokoknya keren deh..!

Contoh demo dari Menu navigasi Tersebut.

jika sobat tertarik silhkan ikuti langkah-langkah dibawah ini:

1. Login blogger Anda
2. Pilih Rancangan/Design
3. Klik Edit HTML
4. Cari Kode ]]></b:skin> untuk memudahkan pencarian coba kalian tekan CRL + F dan F3 jika sudah ketemu copykan kode dibawah ini tepat diatas kode ]]></b:skin>

#naviplangi 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;}#naviplangi li .current{color: transparant;}#naviplangi li a:hover, #naviplangi li a:active {background: #950E0E;background: -webkit-gradient(linear, left top, left bottom, from(#950E0E), to(#BF0D0D)); background: -moz-linear-gradient(top,#4B0082, #BF0D0D); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#BF0D0D'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#BF0D0D'); 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: #BF0D0D;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#naviplangi {width: auto;float: left;margin: 0;padding: 0;}#naviplangi {margin: 0;padding: 0;}#naviplangi ul {float: left;list-style: none;margin: 0;padding: 0;}#naviplangi li {list-style: none;margin: 0;padding: 0;}#naviplangi li a, #naviplangi li a:link, #naviplangi li a:visited {color: #F3F8F8;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#naviplangi li a:hover, #naviplangi li a:active {background:transparant;color: #BF0D0D;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#naviplangi li li a, #naviplangi li li a:link, #naviplangi li li a:visited {background: #BF0D0D;background: -webkit-gradient(linear, left top, left bottom, from(#BF0D0D), to(#BF0D0D)); 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;}#naviplangi li li a:hover, #naviplangi 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;}#naviplangi li {float: left;padding: 0;}#naviplangi li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#naviplangi li ul a {width: 140px;}#naviplangi li ul ul {margin: -32px 0 0 171px;}#naviplangi li:hover ul ul, #naviplangi li:hover ul ul ul, #naviplangi li.sfhover ul ul, #naviplangi li.sfhover ul ul ul {left: -999em;}#naviplangi li:hover ul, #naviplangi li li:hover ul, #naviplangi li li li:hover ul, #naviplangi li.sfhover ul, #naviplangi li li.sfhover ul, #naviplangi li li li.sfhover ul {left: auto;}#naviplangi li:hover, #naviplangi li.sfhover {position: static;}#footer-column-divide {clear:both;}#naviplangi{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisRqcDfPmV4pQbZxWPGbFyx-0sj8vZ7KQhS1BiCBjwl9UxRa_LDapJ_9vpJbaHfPSrChoXl4LHO0cSnHcgiDRcDABaytE9ltEDJVRejW1030RxR6sMGFYpvnpWFaDE7rB-I19UJkxKurOs/)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;}

5. Kalau sudah kemudian klik Save
6. Pilih rancangan / Design
7. Tambah Add a Gadget Klik HML/Javascript
8. silahkan pastekan kode dibawah ini

<div id='naviplangi'>
<ul id='naviplangi'>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='URL artikel' target='_blank'>judul artikel</a>
<ul class='children'>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
</ul>
</li>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='URL artikel' target='_blank'>judul artikel</a>
<ul class='children'>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
</ul>
</li>
<li><a href='URL artikel' target='_blank'>judul artikel</a>
<ul class='children'>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
</ul>
</li>
<li><a href='URL artikel' target='_blank'>judul artikel</a>
<ul class='children'>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
</ul>
</li>
<li><a href='URL artikel' target='_blank'>judul artikel</a>
<ul class='children'>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='URL artikel' target='_blank'>judul artikel</a></li>
<li><a href='http://dharla-ferdana.blogspot.com/2012/06/membuat-menu-navigasi-dropdown-efek.html' target='_blank'>Dewata</a></li>
</ul>
</li>
<div style="text-align:right; font-size:10px"> Widget by <a href="http://dharla-ferdana.blogspot.com"> Dewata </a></div>
</ul></div>




9. Klik simpan dan lihat hasilnya

Keterangan : Ganti tulisan yang berwarnah Merah dengan URL dan Judul Artikel sobat.
Sekian artikel tentang cara Membuat Menu Navigasi Efek Pelangi Diatas Header Semoga bermanfaat.