Jumat, 20 Mei 2011

Locations : » » » Cara Membuat Menu Gaya Koleksi Buku Dengan Kode CSS

Cara Membuat Menu Gaya Koleksi Buku Dengan Kode CSS

Diposting oleh Unknown di 18.56
Menu yang satu ini sangat baik untuk web blog yang mengandalkan penjualan e-book, atau blog yang mengandalkan library. Namun tidak kalah asyiknya menu ini dipasang pada blog yang ingin bergaya intelektual, patut dicoba. Menu ini bekerja baik di browser popular seperti: Safari, Chrome, Opera dan Firefox v4 beta. Tampilan terbaik akan terlihat di Safari dan Chrome.


Menu dengan gaya koleksi buku adalah sebuah menu dengan tampilan buku yang dipajang pada sebuah rak dan apabila kursor berada tepat pada salah satu buku seolah kita sedang menyeleksi buku itu. Kemudian buku akan pindah ke bawah dan terbuka daftar isi buku yang dipilih tadi. Lewat sub-sub menu itu yang seolah sebuah daftar isi buku, maka kita dapat mengklik link itu dan mengarah pada halaman yang dituju. Silahkan coba demo menu gaya buku di bawah ini:





Tertarik dan ingin memasang menu yang seperti ini? Kita hanya perlu melakukan tiga langkah.


Cara Memasang Menu Gaya Buku E-book




Pertama, kita harus menginstal kode CSS kedalam template blog. Login ke blogger, lalu klik element halaman >>> Edit HTML. Untuk lebih aman maka save dulu template anda.


Kedua, Kopi paste kode css di bawah ini kedalam kumpulan kode css yang ada di template anda. Temukan tag /skin, dan pastikan kode berikut ini diletakkan sebelum tag /skin. Kodenya adalah:




ul.topUL {padding:0; margin:0; list-style:none; width:250px; margin:0

auto; position:relative; z-index:100; font-family:verdana, arial,

sans-serif;}

ul.topUL > li {float:left; margin-right:1px; position:relative; z-index:10;}

ul.topUL > li a.p1 {display:block; width:43px; border:2px solid #333;

border-width:1px 3px; height:248px; color:#fff; top:0; left:0;


text-decoration:none; position:relative;

-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);



-webkit-transition: 0.25s;

-moz-transition: 0.25s;

-o-transition: 0.25s;


transition: 0.25s;

}

ul.topUL > li > a span {display:block; width:43px; white-space:nowrap;

position:absolute; left:0px; top:200px;

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);


transform: rotate(-90deg);

}

ul.topUL > li.b1 > a {background:#562; border-color:#340;

background: -moz-linear-gradient(0, #562, #784 50%, #562 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#562),

color-stop(50%, #784), color-stop(100%, #562));

}


ul.topUL > li.b2 > a {background:#366; border-color:#144;

background: -moz-linear-gradient(0, #366, #688 50%, #366 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#366),

color-stop(50%, #688), color-stop(100%, #366));

}

ul.topUL > li.b3 > a {background:#246; border-color:#024;


background: -moz-linear-gradient(0, #246, #579 50%, #246 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#246),

color-stop(50%, #579), color-stop(100%, #246));

}

ul.topUL > li.b4 > a {background:#741; border-color:#520;

background: -moz-linear-gradient(0, #741, #a74 50%, #741 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#741),


color-stop(50%, #a74), color-stop(100%, #741));

}

ul.topUL > li.b5 > a {background:#623; border-color:#401;

background: -moz-linear-gradient(0, #623, #956 50%, #623 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#623),

color-stop(50%, #956), color-stop(100%, #623));

}




ul.topUL ul.sub {padding:0; list-style:none; position:absolute;

left:-51px; top:230px; width:0; overflow:hidden; height:250px;

margin:0 0 20px 0;

-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);



-webkit-transition: 0s;


-moz-transition: 0s;

-o-transition: 0s;

transition: 0s;

transition-delay:0s;

-o-transition-delay: 0s;

-moz-transition-delay: 0s;

-ms-transition-delay: 0s;

-webkit-transition-delay: 0s;

}




ul.topUL > li.b1 > ul {background:#784;}

ul.topUL > li.b2 > ul {background:#688;}

ul.topUL > li.b3 > ul {background:#579;}


ul.topUL > li.b4 > ul {background:#a74;}

ul.topUL > li.b5 > ul {background:#956;}



ul ul li.content {width:0; height:190px; position:absolute; left:0;

top:10px; background:#eee; padding:40px 0 0 0; text-indent:20px;


font-size:11px; color:#444; overflow:hidden;

-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);



-webkit-transition: 0s;

-moz-transition: 0s;

-o-transition: 0s;


transition: 0s;

transition-delay: 0s;

-o-transition-delay: 0s;

-moz-transition-delay: 0s;

-ms-transition-delay: 0s;

-webkit-transition-delay: 0s;

}

ul ul li b {display:block;}

ul ul li a {text-decoration:none; color:#444; padding-left:20px;


line-height:20px;}

ul ul li a:hover {color:#000; text-decoration:underline;}



ul ul li.cover {width:0; height:220px; position:absolute;

padding-top:30px; text-indent:10px; font-size:14px font-weight:bold;

color:#fff; left:0; top:0; z-index:100; overflow:hidden;

white-space:nowrap;}



ul ul li.cover i {font-weight:normal; font-style:normal;

font-size:10px; line-height:40px; padding-left:10px;}


ul ul li.cover em {display:block; font-weight:normal;

font-style:normal; margin-top:120px; font-size:10px;

line-height:40px;}



ul.topUL > li.b1 li.cover {background:#562;

background: -moz-linear-gradient(0, #562, #784 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#562),

color-stop(100%, #784));


}

ul.topUL > li.b2 li.cover {background:#366;

background: -moz-linear-gradient(0, #366, #688 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#366),

color-stop(100%, #688));

}

ul.topUL > li.b3 li.cover {background:#246;


background: -moz-linear-gradient(0, #246, #579 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#246),

color-stop(100%, #579));

}

ul.topUL > li.b4 li.cover {background:#741;

background: -moz-linear-gradient(0, #741, #a74 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#741),

color-stop(100%, #a74));


}

ul.topUL > li.b5 li.cover {background:#623;

background: -moz-linear-gradient(0, #623, #956 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#623),

color-stop(100%, #956));

}





ul.topUL > li:hover {direction:ltr; z-index:100;}


ul.topUL > li:hover a.p1 {top:230px;left:-100px;

-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);



-webkit-transition: 0.5s;

-moz-transition: 0.5s;


-o-transition: 0.5s;

transition: 0.5s;

transition-delay: 0s;

-o-transition-delay: 0s;

-moz-transition-delay: 0s;

-ms-transition-delay: 0s;

-webkit-transition-delay: 0s;

}




ul.topUL li:hover ul {width:200px;

-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);



-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;


transition: 0.5s;

transition-delay: 0.5s;

-o-transition-delay: .5s;

-moz-transition-delay: 0.5s;

-ms-transition-delay: 0.5s;

-webkit-transition-delay: 0.5s;

}

ul.topUL li:hover ul li.cover {width:200px;

-webkit-transition: 0.25s;


-moz-transition: 0.25s;

-o-transition: 0.25s;

transition: 0.25s;

}



ul.topUL li:hover ul li.content {width:190px;

background: -moz-linear-gradient(0, #ddd, #fff 50%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#ddd),

color-stop(50%, #fff));


-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;

transition: 0.5s;

}



ul.topUL li:hover ul:hover {overflow:visible;}



ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}

ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}


ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}

ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}

ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}



ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}

ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}

ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}

ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}

ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}




ul.topUL li:hover ul:hover li.cover {left:-2px; width:1px;

height:235px; top:-15px; padding-top:45px;

-o-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);



-webkit-transition: 0.25s;

-moz-transition: 0.25s;


-o-transition: 0.25s;

transition: 0.25s;

}



.shelf {clear:left; width:350px; height:25px; background:#620; margin:0 auto;

background: -moz-linear-gradient(90deg, #620, #950 20%, #620 30%);

background: -webkit-gradient(linear, 0 100%, 0 0 , from(#620),

color-stop(20%, #950), color-stop(30%, #620));

-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);


-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

}

<!--[if IE]>

ul.topUL > li > a span {display:block; width:170px;

white-space:nowrap; position:absolute; left:0px; top:60px;


line-height:43px;

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

<![endif]-->







Lalu klik preview, jika tidak adal muncul pesan eror, maka segera save template anda.


Ketiga, Kopi paste kode HTML di bawah ini ke sidebar. Bisa juga dipaste kedalam blog bersama tulisan anda yang lain. Akan lebih baik jika kode ini diletakkan di sidebar, atau didalam right header. Tapi pilihannya tergantung anda sendiri. Klik elemen halaman lalu >> Add Widget HTML/Javascript. Paste semua kodenya. Kode HTML nya adalah:



<div id="infoc">

<ul class="topUL">

 <li class="b1"><a class="p1"

href="http://medichinesse.blogspot.com"><span>JUAL SABUN

CAIR</span></a>


 <ul class="sub">

  <li class="cover">Home Industri Online<br /><i>by

WiseNcare</i><em>Hover to open ...</em></li>

  <li class="content">




   <b>Contents</b><br />

   <a href="http://medichinesse.blogspot.com/2011/04/jual-sabun-cair-sunlight-curankemasan.html">1.

Jual Sabun Cair</a><br />


   <a href="http://medichinesse.blogspot.com/2011/05/cara-membuat-sampo-anti-ketombe.html">2.

Sampo Anti Ketombe</a><br />

   <a href="http://medichinesse.blogspot.com/2011/05/video-cara-membuat-sabun-hand-soap.html">3.


Video Tutorial</a><br />

   <a href="http://medichinesse.blogspot.com/2011/05/cara-membuat-sabun-mandi.html">4.

Sabun Mandi</a><br />

   <a href="http://medichinesse.blogspot.com/2011/05/video-cara-membuat-sabun.html">5.


Tutorial Sabun Cair</a><br />



   <a href="http://medichinesse.blogspot.com/2011/05/daftar-tarif-pengiriman-lewat-pos.html">6.

Tarif Pengiriman</a><br />


  </li>

 </ul>

 </li>

 <li class="b2"><a class="p1" href="#url"><span>BLOG PILIHAN PEMBACA</span></a>

 <ul class="sub">

  <li class="cover">Mempercantik Blog<br /><i>by


WiseNcare</i><em>Hover to open ...</em></li>



  <li class="content">

   <b>Contents</b><br />


   <a href="http://wisencare.blogspot.com/2011/05/cara-membuat-menu-sliding-vertikal.html">1.

Menu Sliding</a><br />

   <a href="http://wisencare.blogspot.com/2011/05/cara-membuat-menu-gaya-bunga-dengan.html">2.


Menu Gaya Bunga</a><br />

   <a href="http://wisencare.blogspot.com/2011/05/cara-membuat-menu-drop-list-dengan-kode.html">3.

Menu Drop List</a><br />


   <a href="http://wisencare.blogspot.com/2011/05/cara-membuat-sliding-tab-menu-vertical.html">4.

Menu Slide Vertikal</a><br />



  </li>


 </ul>

 </li>

 <li class="b3"><a class="p1" href="/"><span>TOP PENCARIAN KEYWORD</span></a>

 <ul class="sub">

  <li class="cover">Blog Paling Dicari<br /><i>by CSS


play</i><em>Hover to open ...</em></li>

  <li class="content">



   <b>Contents</b><br />


   <a href="http://wisencare.blogspot.com/2011/02/cara-membuat-bom-rakitan.html">1.

Cara Membuat Bom</a><br />

   <a href="http://wisencare.blogspot.com/2011/04/cara-membuat-sabun-cair.html">2.


Membuat Sabun Cair</a><br />

   <a href="http://wisencare.blogspot.com/2011/03/download-photoshop-cs5-crack-keygen.html">3.

Download Photoshop</a><br />


   <a href="http://wisencare.blogspot.com/2010/08/photoshop-cs5-beberapa-efek-dari-curves.html">4.

Efek Curve PS CS3</a><br />

   <a href="http://wisencare.blogspot.com/2011/04/cara-membuat-gambar-keluar-dari-bingkai.html">5.


Photo Diluar Bingkai</a><br />



  </li>

 </ul>

 </li>

 <li class="b4"><a class="p1" href="/"><span>MENU DENGAN CSS</span></a>


 <ul class="sub">

  <li class="cover">Mempercantik Gaya Menu<br /><i>by

WiseNcare</i><em>Hover to open ...</em></li>

  <li class="content">




   <b>Contents</b><br />

   <a href="http://wisencare.blogspot.com/2011/04/cara-membuat-menu-dengan-aneka-photo.html">1.

Aneka Menu Photo</a><br />


   <a href="http://wisencare.blogspot.com/2011/04/cara-membuat-menu-gaya-televisi.html">2.

Menu Gaya Tivi</a><br />

   <a href="http://wisencare.blogspot.com/2011/05/cara-membuat-menu-seperti-kartu-poker.html">3.


Menu Gaya Kartu</a><br />

   <a href="http://wisencare.blogspot.com/2011/04/cara-membuat-menu-shout.html">4.

Menu Shout!</a><br />

   <a href="http://wisencare.blogspot.com/2011/04/cara-membuat-menu-tab-view-dengan-css.html">5.


Tab Menu</a><br />



   <a href="http://wisencare.blogspot.com/2011/04/cara-membuat-pull-menu.html">6.

Pull Menu</a><br />


  </li>

 </ul>

 </li>

 <li class="b5"><a class="p1" href="#url"><span>TRIK HTML BLOGGER</span></a>

 <ul class="sub">

  <li class="cover">Trik Html<br /><i>by WiseNcare</i><em>Hover to


open ...</em></li>



  <li class="content">

   <b>Contents</b><br />

   <a href="http://wisencare.blogspot.com/2011/04/cara-mebuat-google-sitemap.html">1.


Google Sitemap</a><br />

   <a href="http://wisencare.blogspot.com/2011/04/cara-membuat-label-cloud.html">2.

Label Clouds</a><br />

   <a href="http://wisencare.blogspot.com/2011/04/cara-membuat-list-item-ul-li-mendatar.html">3.


List Item Horizontal</a><br />

   <a href="http://wisencare.blogspot.com/2011/04/cara-membuat-related-post-pada-blog.html">4.

Related Post</a><br />




   <a href="http://wisencare.blogspot.com/2011/03/tabel-warna-hexadecimal.html">5.

Tabel Warna</a><br />

  </li>

 </ul>


 </li>

</ul>

<div class="shelf"></div>

<br /><br /><br /><br />



</div> <!-- end of info -->






Save kode html dan lihat hasilnya. Jika masih ada yang perlu dibenahi hanyalah pergantian link, Dan Judul. Ganti semua Judul menu dan sub menu dengan link anda sendiri, saya yakin anda bisa melakukannya. Jika anda bermurah hati, sisakan satu link mengarah ke blog ini. Jika itu anda lakukan, segera beritahu saya agar saya membuat link back ke blog anda.


Selamat mencoba.
Kemudian save
Post title : Cara Membuat Menu Gaya Koleksi Buku Dengan Kode CSS
URL post : https://adanggak.blogspot.com/2011/05/cara-membuat-menu-gaya-koleksi-buku.html
Label: ,

0 komentar:

Show Emoticons

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :q: :s:

Posting Komentar