K1R BANSEL @TAB BAR BLOGGER

Posted By: Unknown - 12:27 AM
0


Membuat Menu Drop Down pada Tab Bar Blogger


Model drop down bertingkat yang bisa mengakomodir anatara menu dan submenu.
Script ini juga bisa hanya memasang menu saja (label) untuk lebih simpelnya. Untuk contoh silakan lihat di gambar ini.


 




  •  Cara mengedit Script





























  • Skripnya adalah:


<style>

#menu

{

width: 100%;

margin: 0;

padding: 10px 0 0 0;

list-style: none;

background: #000000;

background: -moz-linear-gradient(#444, #000000);

background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-border-radius: 50px;

border-radius: 50px;

-moz-box-shadow: 0 2px 0px #9c9c9c;

-webkit-box-shadow: 0 2px 0px #9c9c9c;

box-shadow: 0 2px 0px #9c9c9c;

}

#menu li

{

float: left;

padding: 0 0 10px 0;

position: relative;

line-height: 0;

}

#menu a

{

float: left;

height: 25px;

padding: 0 25px;

color: #999;

text-transform: uppercase;

font: bold 12px/25px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#menu li:hover > a

{

color: #fafafa;

}

*html #menu li a:hover /* IE6 */

{

color: #fafafa;

}

#menu li:hover > ul

{

display: block;

}

/* Sub-menu */

#menu ul

{

list-style: none;

margin: 0;

padding: 0;

display: none;

position: absolute;

top: 35px;

left: 0;

z-index: 99999;

background: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);

-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);

box-shadow: 0 0 2px rgba(255,255,255,.5);

-moz-border-radius: 5px;

border-radius: 2px;

}

#menu ul ul

{

top: 0;

left: 150px;

}

#menu ul li

{

float: none;

margin: 0;

padding: 0;

display: block;

-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

}

#menu ul li:last-child

{

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#menu ul a

{

padding: 10px;

height: 10px;

width: 130px;

height: auto;

line-height: 1;

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

*html #menu ul a /* IE6 */

{

height: 10px;

}

*:first-child+html #menu ul a /* IE7 */

{

height: 10px;

}

#menu ul a:hover

{

background: #0186ba;

background: -moz-linear-gradient(#04acec, #0186ba);

background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

background: -webkit-linear-gradient(#04acec, #0186ba);

background: -o-linear-gradient(#04acec, #0186ba);

background: -ms-linear-gradient(#04acec, #0186ba);

background: linear-gradient(#04acec, #0186ba);

}

#menu ul li:first-child > a

{

-moz-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0;

}

#menu ul li:first-child > a:after

{

content: '';

position: absolute;

left: 30px;

top: -8px;

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 8px solid #444;

}

#menu ul ul li:first-child a:after

{

left: -8px;

top: 12px;

width: 0;

height: 0;

border-left: 0;

border-bottom: 5px solid transparent;

border-top: 5px solid transparent;

border-right: 8px solid #444;

}

#menu ul li:first-child a:hover:after

{

border-bottom-color: #04acec;

}

#menu ul ul li:first-child a:hover:after

{

border-right-color: #04acec;

border-bottom-color: transparent;

}



#menu ul li:last-child > a

{

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

/* Clear floated elements */

#menu:after

{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

* html #menu { zoom: 1; } /* IE6 */

*:first-child+html #menu { zoom: 1; } /* IE7 */

</style>

<ul id="menu">

<li><a href='/'>Home</a></li>

<li><a href='http://http://bansel1.blogspot.co.id/' rel='nofollow' target='_blank'>Drop menu</a>

<ul>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 1</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 2</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 4</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 5</a></li>

</ul>

</li>

<li><a href='http://bansel1.blogspot.co.id/' rel='nofollow' target='_blank'>Drop menu 2</a>

<ul>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 1</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 2</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3</a>

<ul>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3.1</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3.2</a></li>

<li><a href='http://bansel1.blogspot.co.id' rel='dofollow' target='_blank'>Menu 3.3</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3.4</a></li>

</ul>

</li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 4</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 5</a></li>

</ul>

</li>

<li><a href='http://bansel1.blogspot.co.id/' rel='nofollow' target='_blank'>Drop menu 3</a>

<ul>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 1</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 2</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 4</a></li>

<li><a href='http://bansel1.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 5</a></li>

</ul></li></ul> 

Keterangan:

1. Silakan ganti tulisan bansel1.blogspot.co.id dengan URL alamat blog kamu.

2. Skrip ini bisa dipasang di side bar (luar artikel) atau pun di dalam artikel.

- Untuk di side bar, kamu ke edit blogger- Tata letak - Tambah Gadget, dst.

- Untuk di dalam artikel, kamu mesti ke Template-Edit HTML dst., dan agar bisa terpasang di bagian paling atas blog, 
silakan copas skrip ini di atas kode  </head> atau sesudah </header>.


  • Mangga Di Copas dan Kreasikan Blog Kamu.... Mudah bukan ?







Home

About Unknown

Magazine Power Theme is officially developed by Templatezy Team. We published High quality Blogger Templates with Awesome Design for blogspot lovers.The very first Blogger Templates Company where you will find Responsive Design Templates.

0 komentar:

Post a Comment

Subscribe to: Post Comments (Atom)

Ads

Copyright © 2015 All Rights Reserved

Designed by Templatezy