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 2px 4px 4px ; position:relative; z-index:200;width:200px;text-align:center;}
#binkbenks {float:right;}
#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 2px 4px 4px ; 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
{right:-5px; left:auto; margin-right: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/"><<Lensese </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>
/* =======================
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 2px 4px 4px ; position:relative; z-index:200;width:200px;text-align:center;}
#binkbenks {float:right;}
#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 2px 4px 4px ; 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
{right:-5px; left:auto; margin-right: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/"><<Lensese </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 :
- Login ke Blog Sobat
- Masuk Rancangan tambah Gadget HTML/javascript
- Copy Kode CSSnya
- Rubah nama menu-menunya dan URLnya
- Untuk Menyesuaikan dengan lebar Sidebar Blog Sobat Rubah Pada Kode warna biru width;200px;
- Lalu Simpan dan Letakkan pada Sidebar disebelah kanan Blog Sobat
Selamat Mencoba
Menu-Menu Lainnya
Posted On : 8 November 2011 Time : 22.37