Menu


Menu Tab

Pages

Cara Memasang Sub Menu Rotatext

MEMASANG 
CSS MENU ROTATEXT
Login ke akun blog klik tata letak dan klik tambah gadged
copy code berikut letakan kedalam gadged tersebut klik simpan selesai
<style type="text/css"> #menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {
   border-bottom:2px solid #006400;
   margin:0 auto;
   text-align:center;
   position:relative;
   height:40px;
   z-index:999;
   background:#808080;
   -moz-perspective: 100px;
   -webkit-perspective: 100px;
   -o-perspective: 100px;
   perspective: 100px;} .menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip ul.nav {
   padding:0;margin:0;
   list-style:none;
   display:inline-block;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;} .text-logo {
   text-align:center;position:absolute;
   position: fixed;left: 52px;z-index: 999;
   overflow: hidden;color:#000;
   font-weight:bold;margin-top:-34px;
   border-bottom:3px solid blue;} .menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#006B6B;} .menu3Dflip ul.nav li:hover a.top-a {
   background:red;
   border-radius:8px 8px 0 0;
   -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);} .menu3Dflip ul.nav div {
   position:absolute;
   top:40px; left:4px;
   background:#fff;
   padding:5px 0 10px 0;
   border-radius:0 0 15px 15px;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;    -moz-transform-origin: 0px 0px;
   -moz-transform: rotateX(-90deg);
   -webkit-transform-origin: 0px 0px;
   -webkit-transform: rotateX(-90deg);
   -o-transform-origin: 0px 0px;
   -o-transform: rotateX(-90deg);
   transform-origin: 0px 0px;
   transform: rotateX(-90deg);
   -moz-backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;} .menu3Dflip ul.nav div.left {left:auto; right:4px;}
.menu3Dflip ul.nav div ul {
   padding:10px 0; list-style:none;
   width:140px; margin:10px 5px 0 5px;
   float:left; display:inline;
   text-align:left; background:#DCDCDC;
   border-radius:6px;
   -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);} .menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;} .menu3Dflip ul.nav div ul li a {
   display:block; width:105px;
   text-decoration:none;
   font:13px/16px arial, sans-serif;
   color:#8B0000 ; margin:0;
   padding:4px 0 4px 15px;
   background:transparent url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) no-repeat left center;} .menu3Dflip ul.nav div ul li a:hover {color:red; background:transparent url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) no-repeat 1px center;} .menu3Dflip ul.nav div.col1 {width:160px;}
.menu3Dflip ul.nav div.col2 {width:310px;}
.menu3Dflip ul.nav div.col3 {width:460px;}
.menu3Dflip ul.nav li:hover div {
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg); .logo {
   text-align:left;position:absolute;
   position: fixed;top: 0;left: 5px;
   z-index: 999;overflow: hidden;} </style>

<div id='menufixed'>
  <div class='menu3Dflip'>
    <ul class='nav'>
    <li><a class='top-a' href='#'><b>MENU 1</a>
<div class='col3'>
    <ul class='colLeft'>
<li><a href='http://myscript2010s.blogspot.co.id' title='HOME'>STOP</a></li>
    <li> <a href='http://Your Link'>Judul 1a</a> </li>
    <li> <a href='http://Your Link'>Judul 1b</a> </li>
    <li> <a href='http://Your Link'>Judul 1c</a> </li>
    </ul>
  <ul class='col'>
     <li><a href='http://Your Link'>Judul 2a</a></li>
     <li><a href='http://Your Link'>Judul 2b</a></li>
     <li><a href='http://Your Link'>Judul 2c</a></li>
     <li><a href='http://Your Link'>Judul 2d</a></li>
     </ul>
    <ul class='colRight'>
     <li><a href='http://Your Link'>Judul 3a</a></li>
     <li><a href='http://Your Link'>Judul 3b</a></li>
     <li><a href='http://Your Link'>Judul 3c</a></li>
     <li><a href='http://Your Link'>Judul 3d</a></li>
    </ul>

 <!!!..logo..:>
<div class='text-logo'>
<font size="3" color="grey"face="vivaldi">
&nbsp;&nbsp; <b>Mys2010<b></b></b></font> &nbsp;
<!..logo..!!:>

 </!..logo..!!:></div>
      </!!!..logo..:></div></li>
  <li><a class='top-a' href='#'><b>MENU 2</a>
<div class='col2'>
   <ul class='colLeft'>
   <li><a href='http://Your Link'>Judul 1a</a></li>
   <li><a href='http://Your Link'>Judul 1b</a></li>
   <li><a href='http://Your Link'>Judul 1c</a></li>
   <li><a href='http://Your Link'>Judul 1d</a>
   <li><a href='http://Your Link'>Judul 1e</a>
      </li>
      </li></ul>
      <ul class='colRight'>
   <li><a href='http://Your Link'>Judul 2a</a></li>
   <li><a href='http://Your Link'>Judul 2b</a></li>
   <li><a href='http://Your Link'>Judul 2c</a>   
   <li><a href='http://Your Link'>Judul 2d</a>
   <li><a href='http://Your Link'>Judul 2e</a>

     </li></li></li></ul>
</div>
  </li>
     <li><a class='top-a' href='#'><b>MENU 3</a>
<div class='col1'>
    <ul class='colSingle'>
      <li><a href='http://Your Link'>Judul 1a</a></li>
      <li><a href='http://Your Link'>Judul 1b</a></li>
      <li><a href='http://Your Link'>Judul 1c</a></li>
    </ul>
</div>
     </li>
     <li><a class='top-a' href='#'><b>MENU 4</a>
<div class='col2 left'>
 <ul class='colLeft'>
      <li><a href='http://Your Link'>Menu  1a</a></li>
      <li><a href='http://Your Link'>Menu  1b</a></li>
      <li><a href='http://Your Link'>Menu  1c</a></li>
      <li><a href='http://Your Link'>Menu  1d</a></li>
    </ul>
    <ul class='colRight'>
       <li><a href='http://Your Link'>Menu 2a</a></li>
       <li><a href='http://Your Link'>Menu 2b</a></li>
       <li><a href='http://Your Link'>Menu 2c</a></li>
       <li><a href='http://Your Link'>Menu 2d</a></li>
    </ul>
</div>
    </li>
     <li><a class='top-a' href='#'><b>MENU 5</a>
<div class='col1'>
    <ul class='colSingle'>
       <li><a href='http://Your Link'>Menu 1a</a></li>
       <li><a href='http://Your Link'>Menu 1b</a></li>
       <li><a href='http://Your Link'>Menu 1c</a></li>
    </ul>
</div>
      </li>
     <li><a class='top-a' href='#'><b>MENU 6</a>
<div class='col1'>
    <ul class='colSingle'>
      <li><a href='http://Your Link'>Beranda</a></li>
      <li><a href='http://www.blogger.com/follow-blog.g?blogID=8776766672634547419' target="_blank">
         Follow My Blog</a></li>     
    </ul>
</div>
  </li></ul></div><!!..ending to class='menu3Dflip'..!!>
</!!..ending></div><!!..edited by. myscript2010'..!!>
<!!..ending to id='menufixed'..!!></!!..ending></!!..edited>
Penjelasan :
Ganti Link yang berwarna orange dengan link sobat
Sumber by. SB77
Edited by. Myscript2010
Labels:

Memasang Menu Drop Down

Menu Drop down berfungsi untuk membuat menu
tanpa harus memakan banyak tempat, berikut cara memasang menu tersebut.
Login ke akun blog klik tatletak klik tambah gadged
copy code dibawah ini letakan kedalam gadged tersebut klik simpan selesai
<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);

}
#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='http://myscript2010s.blogspot.co.id/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiao5bxLqHJnLJhfsah6b9hNh1jZLEn014O2vKiVPU_we0JCGNL_c3VLq_agxJVkbBG4M77L7cEJy2fCqAyMq2ynPl5VqkwfXpOgLbi0mkbEKsfzb8aqvr9P8ZsnpFTwWj0Uvey3WFSI/s1600-r/button-mys2010.png" name="e902" border="0" width="28" height="29" /></a>

</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='nofollow'>Drop menu a</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu a1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a3</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a4</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a5</a></li>
</ul>
</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='nofollow'>Drop menu b</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu b1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3 next</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu b3.1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3.2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3.3</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3.4</a></li>
</ul>
</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='dofollow'>Menu c</a></li>
<li><a href= rel='dofollow'>Menu d</a></li>
</ul>
</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='nofollow'>Drop menu c</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu c1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c3</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c4</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c5</a></li>
</ul>
</li>
<a href='http://myscript2010s.blogspot.co.id/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiao5bxLqHJnLJhfsah6b9hNh1jZLEn014O2vKiVPU_we0JCGNL_c3VLq_agxJVkbBG4M77L7cEJy2fCqAyMq2ynPl5VqkwfXpOgLbi0mkbEKsfzb8aqvr9P8ZsnpFTwWj0Uvey3WFSI/s1600-r/button-mys2010.png" name="e902" border="0" width="28" height="29" /></a></ul>
Penjelasan : Ganti tanda yang berwarna orange dengan link sobat
All Sources
Edited by. Myscript2010
Labels:

Memasang CSS Menu Horizontal

Memasang CSS Menu Horizontal
Fungsi CSS Menu Horizontal Sama halnya  dengan yang membedakan hanya tampilannya saja
berikut cara penerapannya :
Login ke akun blog klik tatletak klik tambah gadged
copy code dibawah ini letakan kedalam gadged tersebut klik simpan selesai
<style type="text/css">#cssmenu ul{margin:0;padding:0;list-style-type:none;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglamUmBic5iaAbwhR0LBpPQ2JQLcSyRjiX1vkzvSwrSeL94YQDUgzzgbmQNOJVXnVHaNQr7YEeK1_kJGtPtBq8Ey63s0m1rzUpDPVGlQy-EbtctEE6d7Nr7S5fLGIMCE6UKIrshm9fYIo/s1600-r/Capture.PNG') repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #004c99;border-top:1px solid #74b0c6;width:auto}#cssmenu li{display:block;float:left;margin:0;padding:0}#cssmenu li a{display:block;float:left;color:#6d7078;text-decoration:none;font-weight:bold;padding:12px 20px 0 20px;height:24px;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglamUmBic5iaAbwhR0LBpPQ2JQLcSyRjiX1vkzvSwrSeL94YQDUgzzgbmQNOJVXnVHaNQr7YEeK1_kJGtPtBq8Ey63s0m1rzUpDPVGlQy-EbtctEE6d7Nr7S5fLGIMCE6UKIrshm9fYIo/s1600-r/Capture.PNG') no-repeat top right}#cssmenu li a:hover{background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirgMoCEK8iANs2bwwehBGZyNqC2rxUdUVQ-SLBgRz2tPt2Awhz3iCxd0OtcE38ua3P_ZOAidjrMmitIej-QR0CpjZhwLyOcO36iO8Kp3uWxENe7e3FXvnthial_aFtmdXV6C6AYisitZE/s1600-r/3-mys2010.PNG') no-repeat top right;color:#6d7078}</style><a href="http://myscript2010s.blogspot.co.id/" rel="dofollow" target="_blank" title="Mys2010"><img src="http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png" alt="Mys2010" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://myscript2010s.blogspot.co.id/" rel="dofollow" target="_blank" title="Mys2010"><img src="http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png" alt="Mys2010" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://myscript2010s.blogspot.co.id/" rel="dofollow" target="_blank" title="Mys2010"><img src="http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png" alt="Mys2010" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this code Pure CSS Menu Mys2010 or it will not work -->

<!-- customize your menus Links -->
<div id="cssmenu">
<ul>
<li class="active"><a href="#/" ><span> MENU 1</span></a>
</li>
<li class="active"><a href="#/" target="_blank"><span>MENU 2</span></a></li>
<li class="active"><a href="#/"><span>  MENU 3 </span></a></li>
<li class="active"><a href="#/"><span>  MENU 4 </span></a></li>
<li class="active"><a href="#/"><span>  MENU  5 </span></a></li>
<li class="active"><a href="#/"><span>  MENU 6 </span></a></li>
<li>
<li class="active"><a href="#/"><span>  MENU 7 </span></a></li>
<li class="active">
<a href="#/"><span> MENU 8 </span></a></li></li></ul></div>
Penjelasan : Ganti tanda yang berwarna orange dengan link sobat
All Sources
Edited by. Myscript2010
Labels:
Subscribe to: Posts (Atom)

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi