Gudang

Gudang
Header

Cara Membuat Simple Css Vertikal Menu Border Highlight

Posted by Bambang on Sep 30, 2012 Labels: , ,
1
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....

Baca Selengkapnya »»  

Simple Css vertikal Menu Dengan Highlight

Posted by Bambang on Sep 29, 2012 Labels: , , ,
0
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....

Baca Selengkapnya »»  

Cara Membuat Graphic Menu Dengan Rollovers

Posted by Bambang on Sep 28, 2012 Labels: , , ,
0
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....



Baca Selengkapnya »»  

Cara Membuat Css Spotlight Menu

Posted by Bambang on Sep 25, 2012 Labels: , , ,
0
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....


Baca Selengkapnya »»