Home » Archives for October 2010

Vista Aero Buttons Menu





Demo
HomeCSS ExamplesForumsWebmaster Tools

File Eksternal
  
  
CSS Kode
<style type="text/css">

.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
background: #F7F7F7; /*menu strip background*/
border: 1px solid gray;
padding: 4px 0;
border-width: 1px 0;
}

* html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.aerobuttonmenu a.aero{ /*aero button CSS*/
background: transparent urlundefined'media/aeroleft.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Verdana, Trebuchet MS; /* Change 13px as desired */
line-height: 23px; /* This value + 8px should equal height of button background undefineddefault is 31px) */
height: 31px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration: none;
margin-right: 5px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alphaundefinedopacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

.aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{
color: white; /*button text color*/
}

.aerobuttonmenu a.aero span{
background: transparent urlundefined'media/aeroright.gif') no-repeat top right;
display: block;
padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
}

.aerobuttonmenu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alphaundefinedopacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

.aerobuttonmenu a.aero:hover span{ /* Hover state CSS undefinedfor text) */
color: yellow;
}

.black a.aero{
background-image: urlundefined'media/aeroleftblack.gif');
}

.black a.aero span{
background-image: urlundefined'media/aerorightblack.gif');
}

.aerobuttonmenu .rightsection{
float: right;
width: 100px;
position: relative;
top: 3px;
padding-right: 5px;
text-align: right;
}

.aerobuttonmenu .rightsection a{
color: navy;
}

</style>

Cara memasukkan kode CSS dapat dilakukan dengan 2 cara :
1. Melalui menu Rancangan >> Edit HTML >> Cari kode ]]></b:skin> kemudian letakkan kode CSS diatasnya.

2. Melalui menu Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/JavaScript >> kemudian masukkan kode css pada gadget HTML/JavaScipt.

HTML Kode
<div class="aerobuttonmenu black">

<div class="rightsection">
<a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a>
</div>

<a href="http://www.dynamicdrive.com" class="aero"><span>Home</span></a>
<a href="http://www.dynamicdrive.com/style/" class="aero"><span>CSS Examples</span></a>
<a href="http://www.dynamicdrive.com/forums/" class="aero"><span>Forums</span></a>
<a href="http://tools.dynamicdrive.com" class="aero"><span>Webmaster Tools</span></a>
<a href="http://www.javascriptkit.com"

Kode HTML dapat dimasukkan dimana saja yang kamu mau baik dalam postingan , di dalam sidebar melalui gadget atau dalam halaman HTML.



Matt Black Tabs





Demo

CSS Kode
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs undefineddefault state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>

Cara memasukkan kode CSS dapat dilakukan dengan 2 cara :
1. Melalui menu Rancangan >> Edit HTML >> Cari kode ]]></b:skin> kemudian letakkan kode CSS diatasnya.

2. Melalui menu Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/JavaScript >> kemudian masukkan kode css pada gadget HTML/JavaScipt.

HTML Kode
<div class="mattblacktabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>




Wire Frame Aura Menu






Demo

File Eksternal
    
CSS Kode
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.wireframeauramenu{
font-weight: bold;
font-size: 90%;
width: 100%;
}

.wireframeauramenu ul{
border: 1px solid #BBB;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
overflow: hidden;
}

.wireframeauramenu ul li{
display: inline;
}

.wireframeauramenu ul li a{
color: #494949;
padding: 6px 12px 6px 6px;
margin: 0;
text-decoration: none;
border-right: 1px dashed #BBB; /*right border between menu items*/
}

.wireframeauramenu ul li a:hover{
color: black;
background: transparent urlundefinedmedia/lightyellow.gif) center center no-repeat; /*background of menu item onMouseover*/
}

</style>

Cara memasukkan kode CSS dapat dilakukan dengan 2 cara :
1. Melalui menu Rancangan >> Edit HTML >> Cari kode ]]></b:skin> kemudian letakkan kode CSS diatasnya.

2. Melalui menu Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/JavaScript >> kemudian masukkan kode css pada gadget HTML/JavaScipt.

HTML Kode
<div class="wireframeauramenu">
<ul>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.cssdrive.com/">CSS Drive</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ul>
</div>

Kode HTML dapat dimasukkan dimana saja yang kamu mau baik dalam postingan , di dalam sidebar melalui gadget atau dalam halaman HTML.



Uber Round Color Tabs








Uber Round Color Tabs

Demo

File Eksternal
  
CSS Kode
<style type="text/css">

/*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 urlundefinedmedia/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 urlundefinedmedia/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*/
}

</style>

Cara memasukkan kode CSS dapat dilakukan dengan 2 cara :
1. Melalui menu Rancangan >> Edit HTML >> Cari kode ]]></b:skin> kemudian letakkan kode CSS diatasnya.

2. Melalui menu Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/JavaScript >> kemudian masukkan kode css pada gadget HTML/JavaScipt.

HTML Kode
<div class="ubercolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com" style="margin-left: 12px"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm"><span>New</span></a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/revised.htm"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com"><span>Tools</span></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><span>Forums</span></a></li>
</ul>
</div>

<div class="ubercolordivider"> </div>

Kode HTML dapat dimasukkan dimana saja yang kamu mau baik dalam postingan , di dalam sidebar melalui gadget atau dalam halaman HTML.

thick underline menu








Thick Underline Menu

Demo

CSS Kode
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.underlinemenu{
font-weight: bold;
width: 100%;
}

.underlinemenu ul{
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}

.underlinemenu ul li{
display: inline;
}

.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 3px solid gray; /*bottom border is 3px*/
}

.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
}

</style>

Cara memasukkan kode CSS dapat dilakukan dengan 2 cara :
1. Melalui menu Rancangan >> Edit HTML >> Cari kode ]]></b:skin> kemudian letakkan kode CSS diatasnya.

2. Melalui menu Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/JavaScript >> kemudian masukkan kode css pada gadget HTML/JavaScipt.

HTML Kode
<div class="underlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>

Kode HTML dapat dimasukkan dimana saja yang kamu mau baik dalam postingan , di dalam sidebar melalui gadget atau dalam halaman HTML.

corp blue css menu







Demo

File Eksternal
  

CSS Kode
<style type="text/css">

/*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("media/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("media/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;
}

HTML Kode

</style>
</div>
<div class="head">HTML Kode</div><div class="pre"><div id="tabs">
<ul>
<li></li>
<li><a href="#"><span>Menu 1</span></a></li>
<li><a href="#"><span>Menu 2</span></a></li>
<li><a href="#"><span>Menu 3</span></a></li>
<li><a href="#"><span>Menu 4</span></a></li>
<li><a href="#"><span>Menu 5</span></a></li>
<li><a href="#"><span>Menu 6</span></a></li>
</ul>
</div>


Sumber Artikel : www.dynamicdrive.com

Subscribe to: Posts (Atom)
 

Blog Archive

Copyright 2010 Juan Juni Home's. All rights reserved.
Themes by Bonard Alfin l Home Recording l Distorsi Blog