CSS Left Flayout Menu

Sabtu, 23 Juni 2012

Tampilannya akan seperti dibawah ini.
Langsung saja jika kamu berminat.

Langkah langkahnya :

Login ke Blog Sobat
Pilih Tata Letak
Kemudian Tambah Gadget >> HTML/javascript
Copy kode CSS dibawah ini
Ganti nama menu-menunya dan URLnya
Untuk menyesuaikan dengan lebar Sidebar blog kamu, ganti pada kode warna hijau width;200px;
Lalu Simpan dan Letakkan pada Sidebar disebelah kiri Blog Sobat

<style type="text/css">
/* =======================
Original : www.stunicholls.com
Styler by: cuerosbhelatos.blogspot.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>