Membuat Menu Navigasi Dropdown Efek Pelangi Diatas Header

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:

Login blogger Anda
Pilih Rancangan/Design
Klik Edit HTML
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/AVvXsEiUWGg89futKvDBHEqdIxpmn342fibk5vXC8ieJxWWYL1G912WNlZblJnjb1veDMaAQCLoz1b0-Hmdo42vOcal3VaJGYgZniGQ9pJhJbYuSyIbsCp5UAnp4AFulo_4iOalo5qnIpsTizVRV/)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;
}

Kalau sudah kemudian klik Save
Pilih rancangan / Design
Tambah Add a Gadget Klik HML/Javascript
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>

Klik simpan dan lihat hasilnya

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

❖ Membuat Menu Navigasi Dropdown Efek Pelangi Diatas Header

Posting Komentar