-->
 
CSS Left Flayout Menu

BERANDAARCHIVEQUR'ANYASINTAHLILAMALAN

     


Demo Left Flayout Menu












Perhatikan Demo diatas dan arahkan Cursor Sobat Kesana. Bagi Sobat Yang mau memasang menu Left Flayout Copy Kode CSS dibawah ini

Kode CSSnya

<style type="text/css">
/* =======================
Original : www.stunicholls.com
Salam hangat & Happy Blogging
======================== */

#binkbenks,

#binkbenks{float:left; padding: 0 10px; margin:0; list-style:none; font: 14px Comic Sans MS;-moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); border-color:  #848484; border-style: inset; border-width:   2px 4px 4px 2px ; position:relative; z-index:200;width:200px;text-align:center;}

#binkbenks ul {float:left; padding:0 5px; margin:0; list-style:none; font: 12px Comic Sans MS;-moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); border-color:  #848484; border-style: inset; border-width:   2px 4px 4px 2px ; position:relative; z-index:200;}

#binkbenks li li {background:background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));}

/* a hack for IE5.x and IE6 */

* html #binkbenks li {float:left;}
#binkbenks li a {display:block; color:#fff; margin:0 25px 0 10px; height:20px; line-height:20px; text-decoration:none; white-space:nowrap;}

#binkbenks li:hover {position:relative; z-index:300;}
#binkbenks ul {position:absolute; left:-9999px; top:-9999px;}

/* yet another hack for IE5.x and IE6 */

* html #binkbenks, * html nav ul {width:1px;}

/* it could have been this simple if all browsers understood */

/* show next level */

#binkbenks li:hover > ul {left:-15px; margin-left:100%; top:-1px;}

/* keep further levels hidden */

#binkbenks li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}

/* show path followed */

#binkbenks li:hover > a {text-decoration:underline; color:#7b5;}

/* but IE5.x and IE6 need this lot to style the flyouts and path followed */

/* show next level */

#binkbenks li:hover ul,

#binkbenks li:hover li:hover ul,

#binkbenks li:hover li:hover li:hover ul,

#binkbenks li:hover li:hover li:hover li:hover ul,

#binkbenks li:hover li:hover li:hover li:hover li:hover ul

{left:-15px; margin-left:100%; top:-1px;}

/* keep further levels hidden */

#binkbenks li:hover ul ul,

#binkbenks li:hover li:hover ul ul,

#binkbenks li:hover li:hover li:hover ul ul,

#binkbenks li:hover li:hover li:hover li:hover ul ul

{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */

#binkbenks li:hover a,

#binkbenks li:hover li:hover a,

#binkbenks li:hover li:hover li:hover a,

#binkbenks li:hover li:hover li:hover li:hover a,

#binkbenks li:hover li:hover li:hover li:hover li:hover a,

#binkbenks li:hover li:hover li:hover li:hover li:hover li:hover a

{text-decoration:none; color:#fff;}

#binkbenks a:hover{border-color: #fff; -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px;border-style: inset; border-width: 2px 4px; transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg);background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#D9FE00)); background: -moz-linear-gradient(top,#FF0000, #D9FE00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#D28000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#D9FE00'); color: #FFFFFF;font-size:16px;font-family:Verdana;text-align: center;padding: 7px 10px;text-shadow: 0 0 4px #000, 0 -5px 4px #000, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;}

/* hide futher possible paths */

#binkbenks li:hover li a,

#binkbenks li:hover li:hover li a,

#binkbenks li:hover li:hover li:hover li a,

#binkbenks li:hover li:hover li:hover li:hover li a,

#binkbenks li:hover li:hover li:hover li:hover li:hover li a

{text-decoration:none; color:#fff;}
</style>
<ul id="binkbenks">
<li><a href="http://www.blogger.com/">Home</a></li>
<li><a href="http://www.blogger.com/">About us »</a>
<ul>
<li><a href="http://www.blogger.com/">Who we are</a></li>
<li><a href="http://www.blogger.com/">What we do</a></li>
<li><a href="http://www.blogger.com/">Where to find us</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">Products »</a>
<ul>
<li><a href="http://www.blogger.com/">Tripods »</a>
<ul>
<li><a href="http://www.blogger.com/">Monopods</a></li>
<li><a href="http://www.blogger.com/">Tripods</a></li>
<li><a href="http://www.blogger.com/">Adjutable head</a></li>
<li><a href="http://www.blogger.com/">Fixed</a></li>
<li><a href="http://www.blogger.com/">Flash mount</a></li>
<li><a href="http://www.blogger.com/">Floating head</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">Films »</a>
<ul>
<li><a href="http://www.blogger.com/">35mm</a></li>
<li><a href="http://www.blogger.com/">Color Print</a></li>
<li><a href="http://www.blogger.com/">Black and White</a></li>
<li><a href="http://www.blogger.com/">Roll</a></li>
<li><a href="http://www.blogger.com/">Color Slide</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">Cameras »</a>
<ul>
<li><a href="http://www.blogger.com/">Compact »</a>
<ul>
<li><a href="http://www.blogger.com/">Canon</a></li>
<li><a href="http://www.blogger.com/">Nikon</a></li>
<li><a href="http://www.blogger.com/">Minolta</a></li>
<li><a href="http://www.blogger.com/">Pentax</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">Digital »</a>
<ul>
<li><a href="http://www.blogger.com/">Canon</a></li>
<li><a href="http://www.blogger.com/">Nikon »</a>
<ul>
<li><a href="http://www.blogger.com/">Lenses »</a>
<ul>
<li><a href="http://www.blogger.com/">Standard</a></li>
<li><a href="http://www.blogger.com/">Telephoto</a></li>
<li><a href="http://www.blogger.com/">Wide Angle</a></li>
<li><a href="http://www.blogger.com/">Fish Eye</a></li>
<li><a href="http://www.blogger.com/">Mirror</a></li>
<li><a href="http://www.blogger.com/">Macro</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">Speedlight</a></li>
<li><a href="http://www.blogger.com/">Coolpix »</a>
<ul>
<li><a href="http://www.blogger.com/">Coolpix S10</a></li>
<li><a href="http://www.blogger.com/">Coolpix L2</a></li>
<li><a href="http://www.blogger.com/">Coolpix S500</a></li>
<li><a href="http://www.blogger.com/">Coolpix P5000</a></li>
<li><a href="http://www.blogger.com/">Coolpix 4600</a></li>
<li><a href="http://www.blogger.com/">Coolpix S6 Silver</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">D200</a></li>
<li><a href="http://www.blogger.com/">D80</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">Minolta</a></li>
<li><a href="http://www.blogger.com/">Pentax</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">SeLLeR »</a>
<ul>
<li><a href="http://www.blogger.com/">Canon</a></li>
<li><a href="http://www.blogger.com/">Nikon</a></li>
<li><a href="http://www.blogger.com/">Minolta</a></li>
<li><a href="http://www.blogger.com/">Pentax</a></li>
<li><a href="http://www.blogger.com/">Panasonic</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.blogger.com/">Flash</a></li>
<li><a href="http://www.blogger.com/">Video</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">FAQs »</a>
<ul>
<li><a href="http://www.blogger.com/">Cameras</a></li>
<li><a href="http://www.blogger.com/">Film types</a></li>
<li><a href="http://www.blogger.com/">Digital Photography</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">Privacy »</a>
<ul>
<li><a href="http://www.blogger.com/">Privacy Policy</a></li>
<li><a href="http://www.blogger.com/">Privacy Statement</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">Contact us</a></li>
</ul>

Langkah-langkahnya Sebagai berikut :
  1. Login ke Blog Sobat
  2. Masuk Rancangan tambah Gadget HTML/javascript
  3. Copy Kode CSSnya
  4. Rubah nama menu-menunya dan URLnya
  5. Untuk Menyesuaikan dengan lebar Sidebar Blog Sobat Rubah Pada Kode warna biru width;200px;
  6. Lalu Simpan dan Letakkan pada Sidebar disebelah kiri Blog Sobat
    Selamat Mencoba
    Posted On : 8 November 2011 Time : 21.02
    | | Powered By : C.(BH-elatos) | Copyright By : cuerosbhelatos | |