Gudang Menu

Cara Membuat Simple Css Vertikal Menu Border Highlight

2012-09-30T09:25:00.000+07:00

Simple Css Vertikal Menu Border Hightight ini dibuat dengan Css murni dan kode html,Tidak jauh berbeda denagan menu vertikal sebelumnya (Simple Css vertikal Menu Dengan Highlight ) yang membedakannya adalah pada menu kali ini effect pada bagian kiri menu border dan highligt ketika mouse diarahkan.

Lihat Demo

Dan adapun cara pembuatanya adalah :

1 Sign in ke blogger dengan ID anda
2 Click layout tab
3 Click Edit HTML tab
4 Click Download Full Template, simpan template anda untuk backup data.
5 Letakan CSS code di bawah ini diatas kode ]]></b:skin>

#menu3 {
width: 200px;
float:left;
border:3px solid #eee;

}

#menu3 ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type: circle;
list-style-position:inside;
margin:0;
padding:0;
}
#menu3 li
{
display: inline;
/* for IE5 and IE6 */
}

#menu3 a
{
color: #483000;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;
width: 160px;
background-color: #fff;
border-bottom: 1px solid #fff;
width: 194px;
}

#menu3 a:link, #menu3 a:visited
{
color: #483000;
text-decoration: none;
}

#menu3 a:hover
{
border-left: 5px solid #901818;
color: #000;background: #F0F0F0;
}

#menu3 li a#current
{
border-left: 5px solid #901818;
background: #F0F0F0;
color: #000;
}

2.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut.

<div id="menu3">
<ul>
<li><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

7.Klik save templete button

8.selesai....

Simple Css vertikal Menu Dengan Highlight

2012-09-29T08:04:00.000+07:00

Simple Vertikal menu dengan highlight ini di buat mengguakan css murni dan kode html .menu ini akan berubah warna pada background (effect Highliht) jika kursor mouse di arahkan pada bagian menu tersebut.

Lihat Demo

Dan adapun cara pembuatanya adalah :
1 Sign in ke blogger dengan ID anda
2 Click layout tab
3 Click Edit HTML tab
4 Click Download Full Template, simpan template anda untuk backup data.
5 Letakan CSS code di bawah ini diatas kode ]]></b:skin>

#menu1 {
width: 200px;
float:left;
border:3px solid #eee;
}

#menu1 ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;

}

#menu1 li
{

display: inline;
/* for IE5 and IE6 */
}
#menu1 a
{
color: #fff;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;
width: 160px;
background-color: #686C7A;
border-bottom: 1px solid #eee;width:194px;
}

#menu1 a:link, #menu1 a:visited
{
color: #EEE;
text-decoration: none;
}

#menu1 a:hover
{
background-color: #00BEE4;
color: #fff;
}

#menu1 li a#current
{
border-bottom: 3px solid #DAD6B7;
background: #00BEE4;
}

2.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut.

<div id="menu1">
<ul>
<li><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

7.Klik save templete button

8.selesai....

Cara Membuat Graphic Menu Dengan Rollovers

2012-09-28T06:11:00.000+07:00

Menu ini berbentuk grapik dengan rollover yang akan memancarkan sinar (spot light) pada bagian menu bila mouse di arahkan kebagian menu tersebut.graphik menu rollovers ini di buat dengan css murni dan potongan-potongan background image (menggunakan Photoshop).

Lihat Demo
dan adapun cara pembuatanya adalah :
1 Sign in ke blogger dengan ID anda
2 Click layout tab
3 Click Edit HTML tab
4 Click Download Full Template, simpan template anda untuk backup data.
5 Letakan CSS code di bawah ini diatas kode ]]></b:skin>

* {margin:0; padding:0;}

div#menu {width:184px; background:url(http://gm-menu-file.googlecode.com/files/menu_1.gif) top no-repeat; padding-top:44px;}

div#menubody {background:url(http://gm-menu-file.googlecode.com/files/menu_2.gif) repeat-y; padding-left:21px;}

div#menubottom {height:26px; background:url(http://gm-menu-file.googlecode.com/files/menu_4.gif) bottom no-repeat;}

ul#menulist {width:144px; list-style-type:none;}

ul#menulist li {height:27px; background:url(http://gm-menu-file.googlecode.com/files/menu_3.gif) bottom repeat-x;}

ul#menulist a {width:122px; height:20px; border-left:#75c5de 10px solid; font:bold 10px Verdana, Arial, sans-serif; color:#ffffff; text-decoration:none; padding:5px 0 0 10px; display:block !important; display:inline-block;}

ul#menulist a:hover {background:url(http://gm-menu-file.googlecode.com/files/menu_5.jpg) left repeat-y;}

2.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut.

<div id="menu">
<div id="menubody">
<ul id="menulist">
<li><a href="#">Position 1</a></li>
<li><a href="#">Position 2</a></li>
<li><a href="#">Position 3</a></li>
<li><a href="#">Position 4</a></li>
<li><a href="#">Position 5</a></li>
</ul>
</div>
<div id="menubottom"></div>
</div>

7.Klik save templete button

8.selesai....

Cara Membuat Css Spotlight Menu

2012-09-25T23:37:00.001+07:00

Seperti halnya Css circle menu ,Css spotlight menu ini juga di buat menggunakan css dsn css3 border radius property dan transisi membentuk background lingkaran,pada menu ini ketika anda menujukan mouse anda ke menu maka menu tersedbut akan bersinar membentuk lingkaran pada backgroud menu.Background akan bekerja pada semua browser pada umumnya termasuk IE9,yang mendukunng Css3 termasuk FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+.

Lihat Demo
Adapun cara pembuatanya adalah :

1. Letakan (copy&paste) CSS code di bawah ini diatas kode ]]></b:skin>

.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}

.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}

.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}

2.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut.

<div class="spotlightmenu">
<ul>
<li><a href="http://bambangpage.blogspot.com/"><span>Home</span></a></li>
<li><a href="http://gudangmenu.blogspot.com/"><span>Gudang Menu</span></a></li>
<li><a href="http://cilimoes.blogspot.com/"><span>Cilimoes</span></a></li>
<li><a href=""><span>Forums</span></a></li>
<li><a href=""><span>JavaScript</span></a></li>
</ul>
</div>

7.Klik save templete button

8.selesai....

Cara Membuat Css Circle Menu

2012-09-25T20:33:00.002+07:00

Menu ini di buat menggunakan css,dan css3 ,lingkaran terbentuk oleh Css3 border-radius property.Ketika kamu membuat menu ini border pada keempat sudut bergabung menjadi sebuah lingkaran.Teknik ini bekerja pada semua browser yang mendukung CSS3's border-radius property,seperti IE9+, FF3+, Safari, Chrome, and Opera 9+.

Lihat Demo
Adapun cara pembuatanya adalah :

1. Letakan (copy&paste) CSS code di bawah ini diatas kode ]]></b:skin>

2.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut.

7.Klik save templete button

8.selesai....

Menu Horizontal Biru Tua

2012-09-25T11:25:00.000+07:00

Menu horizontal biru tua ini merupakan menu yang di buat murni dengan css .Dengan warna biru tua dan jika anda mengarahkan kursor mouse anda ke bagian dari menu ini warnanya akan berubah menjadi biru muda (lihat Demo) dan ini akan cocok bagi anda yang menyukai warna dengan warna dasar biru pada blog atau website anda .

Dan adapun cara pembuatanya adalah :

1 Sign in ke blogger dengan ID anda

2 Click layout tab

3 Click Edit HTML tab

4 Click Download Full Template, simpan template anda untuk backup data

5 Letakan CSS code di bawah ini diatas kode ]]></b:skin>

6.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut

7.Klik save templete button

8.selesai....

Cara Membuat Corp Blue CSS Menu

2011-01-04T16:52:00.000+07:00

Corp blue css menu ini akan tampil sempurna dengan background putih ( lihat
Demo) dan pada tab akan tampak putih tebal dengan background hitam(lihat Demo) ,

adapun cara untuk membuat menu tersebut adalah:
1 Sign in ke blogger dengan ID anda
2 Click layout tab
3 Click Edit HTML tab
4 Click Download Full Template, simpan template anda untuk backup data
5 Letakan CSS code di bawah ini diatas kode ]]></b:skin>

/*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */  #tabs {  float:left;  width:100%;  font-size:93%;  line-height:normal;  border-bottom:1px solid #666;  margin-bottom:1em; /*margin between menu and rest of page*/  overflow:hidden;  }  #tabs ul {  margin:0;  padding:10px 10px 0 0px;  list-style:none;    }  #tabs li {  display:inline;  margin:0;  padding:0;  }  #tabs a {  float:left;  background:url("http://gudang-project.do.am/horizontal-men/corp-blue/image/left.png") no-repeat left top;  margin:0;  padding:0 0 0 6px;  text-decoration:none;  }  #tabs a span {  float:left;  display:block;  background:url("http://gudang-project.do.am/horizontal-men/corp-blue/image/right.png") no-repeat right top;  padding:6px 15px 4px 6px;  margin-right:2px;  color:#FFF;  }  /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;}  /* End IE5-Mac hack */ #tabs a:hover span {  }  #tabs a:hover {  background-position:0% -42px;  }  #tabs a:hover span {  background-position:100% -42px;  }

6.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut

7.Klik save templete button
8.selesai...

Cara Membuat Uber Round Color Tabs menu

2011-01-04T04:52:00.000+07:00

Uber round color tabs menu adalah sebuah menu css warna tebal dengan tab-tab yang berbentuk bulat pada tiap-tiap sisinya (lihat Demo)

dan adapun cara pembuatanya adalah :
1 Sign in ke blogger dengan ID anda
2 Click layout tab
3 Click Edit HTML tab
4 Click Download Full Template, simpan template anda untuk backup data
5 Letakan CSS code di bawah ini diatas kode ]]></b:skin>

/*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .ubercolortabs{ padding: 0; width: 100%; overflow: hidden; background: transparent; }  .ubercolortabs ul{ font: bold 11px Arial, Verdana, sans-serif; margin: 0; padding: 0; list-style: none; }  .ubercolortabs li{ display: inline; margin: 0 2px 0 0; padding: 0; text-transform: uppercase; }   .ubercolortabs a{ float: left; color: white; background: #804000 url(http://gudang-project.do.am/horizontal-men/uber-round-tab/image/roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/ margin: 0 2px 0 0; padding: 0 0 1px 3px; text-decoration: none; letter-spacing: 1px; }  .ubercolortabs a span{ float: left; display: block; background: transparent url(http://gudang-project.do.am/horizontal-men/uber-round-tab/image/roundright.gif) no-repeat right top; /*right corner image*/ padding: 7px 9px 3px 6px; cursor: pointer; }  .ubercolortabs a span{ float: none; }   .ubercolortabs a:hover, .ubercolortabs li.selected a{ background-color: #AE5300; /*background color of tabs onMouseover*/ color: white; }  .ubercolortabs a:hover span{ background-color: transparent; }   .ubercolordivider{ /*CSS for horizontal line.*/ clear: both; padding: 0; width: 100%; height: 5px; line-height: 5px; background: #804000; /*background color of horizontal line*/ border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/ }

6.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut

7.Klik save templete button
8.selesai....

Cara Membuat Menu Effect Timbul Versi Ke II

2011-01-02T16:52:00.000+07:00

Cara Membuat Menu Effect Timbul Versi Ke II adalah sebuah menu yang memberikan effect timbul ketika anda mengarah kan kursor pada menu tersebut (lihat Demo) dan ini sama halnya dengan versi I (lihat disini)cuma perbedaanya hanya pada bagian css yang sedikit di ubah.

Dan adapun cara pembuatanya adalah:
1 Sign in ke blogger dengan ID anda
2 Click layout tab
3 Click Edit HTML tab
4 Click Download Full Template, simpan template anda untuk backup data
5 Letakan CSS code di bawah ini diatas kode ]]></b:skin>

6.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut.

7.Klik save templete button
8.selesai....

Cara Membuat Horizontal Plang Menu

2010-01-03T13:36:00.000+07:00

Horizontal plang menu merupakan menu yang menggunakan murni css yang akan terlihat lebih menonjol pada tab-tab setelah tab pertama dan akan terliat bulat pada ujung kiri atas dan kanan bawah tab jika dilihat pada firefox browser dan ini akan sangat cantik untuk menghiasi blog atau website anda (lihat Demo).

Dan adapun cara pembuatanya adalah:

1 Sign in ke blogger dengan ID anda
2 Click layout tab
3 Click Edit HTML tab
4 Click Download Full Template, simpan template anda untuk backup data
5 Letakan CSS code di bawah ini diatas kode ]]></b:skin>

#gurame { margin-top:20px; background: black; border-top: 1px solid #9CC; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; }  #emas { list-style: none outside none; margin: 0; padding: 0; }  @media all { #emas { text-align: center } }  #emas li { bottom: 11px; display: inline; line-height: 2em; margin: 0; padding: 0; position: relative; }  html>body #emas li { background: black; margin: 0 3px 0 0; padding: 4px 0px 4px 0; high:6px; -moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; }  #emas a, #emas a:link, #emas a:visited { -moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: #900; border: 1px solid #9CC; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; }  #emas a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; }  #emas a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; }  #emas li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #emas li#active { background: #000; margin: 0 4px 0 4px; }  #emas #active a, #emas #active a:link, #emas #active a:visited, #emas #active a:hover { background: black; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; }

6.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut

7.Klik save templete button
8.selesai....

Cara Membuat Menu Effect Timbul Versi Ke I

2010-01-02T12:42:00.000+07:00

Menu timbul ini adalah menu yang akan timbul ke luar ketika anda mengarahkan kursor pada menu tersebut (lihat Demo).

6.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut

7.Klik save templete button
8.selesai....