Menu dalam sebuah web atau blog adalah bagian yang paling diutamakan tampilannya. Banyak variasi menu tapi kali ini kita membuat tampilan menu seperti kartu Poker. Cara membuat menu seperti di bawah ini semuanya menggunakan kode CSS dan sama sekali tidak menggunakan foto. Jadi jangan takut halaman blog anda berat saat loading.
Contoh Menu Dengan Tampilan Kartu
- HOME
♥
♥
- CHAT
♣
♣
- EMAIL
♦
- Srinialton[et]yahoo[dot]com
- Sabuncair[et]gmail[dot]com
- SabunCurah[et]blo[dot]com
- Bahankimia[et]gmail[dot]com
- Jual[et]sabun[dot]com
♦
- SHOP
♠
♠
- DELIVERY
♥
♥
- MENU♕
Untuk membuat menu seperti di atas, maka kita hanya perlu menginstal kode CSS ke dalam template kita dan memasang kode HTML menu ini keposisi mana yang diinginkan.
Cara Memasang Menu Kartu Poker
Pertama, Login ke blogger lalu klik Element Halaman >> Edit HTML. Lalu tempatkan kode di bawah ini ke dalam bagian kode CSS dari blog. Jika anda sudah sering mengedit template pasti sudah tahu tempatnya, buat pemula, cari kode /skin. dan paste sebelum kode itu.
#kartu {position:relative; z-index:10;}
.cards {padding:0; margin:50px auto; list-style:none; position:relative;
height:270px; width:200px;}
.cards > li {width:200px; height:270px; position:absolute; top:0; left:0;
background:url(trans.gif);
transform-origin: 100px 300px;
-ms-transform-origin: 100px 300px;
-o-transform-origin: 100px 300px;
-moz-transform-origin: 100px 300px;
-webkit-transform-origin: 100px 300px;
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.cards > li > a {display:block; width:200px; height:270px; border:1px solid #ccc;
position:absolute; background:#fff; top:0; left:0; color:#000; text-decoration:none;
font:bold 12px/18px arial, sans-serif;
border-radius:10px;
-moz-border-radius:10px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.cards > li > a:after,
.cards > li > a:before {display:block; width:75%; height:75%; content: "";
position:absolute; z-index:-1;}
.cards > li > a:after {right: 5px; bottom:5px;
transform-origin: bottom right;
-o-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform: rotate(5deg) skew(12deg);
-o-transform: rotate(5deg) skew(12deg);
-moz-transform: rotate(5deg) skew(12deg);
-webkit-transform: rotate(5deg) skew(12deg);
-ms-transform: rotate(5deg) skew(12deg);
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.3);
}
.cards > li > a:before {left:5px; bottom:5px;
transform-origin: bottom left;
-o-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform: rotate(-5deg) skew(-12deg);
-o-transform: rotate(-5deg) skew(-12deg);
-moz-transform: rotate(-5deg) skew(-12deg);
-webkit-transform: rotate(-5deg) skew(-12deg);
-ms-transform: rotate(-5deg) skew(-12deg);
box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.3);
}
ul.cards > li a b {
display:block; width:100px; height:20px; margin-left:-40px; text-align:right; margin-top:50px;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
ul.cards:hover > li:nth-of-type(1) {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
}
ul.cards:hover > li:nth-of-type(2) {
transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-webkit-transform: rotate(-18deg);
}
ul.cards:hover > li:nth-of-type(3) {
transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-webkit-transform: rotate(-6deg);
}
ul.cards:hover > li:nth-of-type(4) {
transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
}
ul.cards:hover > li:nth-of-type(5) {
transform: rotate(180deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-webkit-transform: rotate(18deg);
}
ul.cards:hover > li:nth-of-type(6) {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
ul.cards > li:nth-of-type(-n+5):hover {height:480px; top:-200px;
transform-origin: 100px 470px;
-ms-transform-origin: 100px 470px;
-o-transform-origin: 100px 470px;
-moz-transform-origin: 100px 470px;
-webkit-transform-origin: 100px 470px;
}
ul.cards li ul {padding:0; margin:0; list-style:none; position:absolute; top:25px; left:30px;}
ul.cards li ul li a {font:bold 12px/18px arial, sans-serif; color:#c00; text-decoration:none;}
ul.cards li ul li a:hover {color:#000;}
ul.cards li span:nth-of-type(1) {font-size:30px; position:absolute; top:10px; right:10px; color:#c00;}
ul.cards li em:nth-of-type(1) {font-size:30px; position:absolute; top:10px; right:10px; color:#000;}
ul.cards li span:nth-of-type(2) {font-size:30px; position:absolute; top:220px; left:10px; color:#c00;}
ul.cards li em:nth-of-type(2) {font-size:30px; position:absolute; top:220px; left:10px; color:#000;}
ul.cards li i {font:normal 200px/270px arial, sans-serif; color:#c00;
position:absolute; left:0; top:0; width:200px; text-align:center;}
Kemudian klik preview, dan jika tidak ada pesan eror muncul. Langsung save template anda.
Kedua, Pasang kode html menu poker ini kedalam sidebar. Caranya, klik elemen halaman dan add witget HTML/javascript. Paste kode di bawah ini.
<div id="kartu">
<br /><br />
<ul class="cards">
<li><a href="/"><b>HOME</b></a>
<span>♥</span>
<ul>
<li><a href="/">Sabun Cair</a></li>
<li><a href="/">Sabun Cair Curah</a></li>
<li><a href="/">Sabun Mandi</a></li>
<li><a href="/">Sabun Cream</a></li>
<li><a href="/">Sampo Motor</a></li>
<li><a href="/">Pembersih Lantai</a></li>
</ul>
<span>♥</span>
</li>
<li><a href="/"><b>CHAT</b></a>
<em>♣</em>
<ul>
<li><a href="/">Facebook Chat</a></li>
<li><a href="/">Twitter Chat</a></li>
<li><a href="/">Google Chat</a></li>
<li><a href="/">Chat Nimbuzz</a></li>
<li><a href="/">Chat Yahoo Msgr</a></li>
<li><a href="/">Windows Msgr</a></li>
<li><a href="/">Plurk</a></li>
</ul>
<em>♣</em>
</li>
<li><a href="/"><b>EMAIL</b></a>
<span>♦</span>
<ul>
<li><a href="/">Srinialton[et]yahoo[dot]com</a></li>
<li><a href="#x">Sabuncair[et]gmail[dot]com</a></li>
<li><a href="#x">SabunCurah[et]blo[dot]com</a></li>
<li><a href="#x">Bahankimia[et]gmail[dot]com</a></li>
<li><a href="#x">Jual[et]sabun[dot]com</a></li>
</ul>
<span>♦</span>
</li>
<li><a href="/"><b>SHOP</b></a>
<em>♠</em>
<ul>
<li><a href="/">Bahan Sabun</a></li>
<li><a href="/">Sabun Cair</a></li>
<li><a href="/">Sabun Curah</a></li>
<li><a href="/">Pembersih Lantai</a></li>
<li><a href="/">Sampo Motor</a></li>
<li><a href="/">Karbol</a></li>
</ul>
<em>♠</em>
</li>
<li><a href="/"><b>DELIVERY</b></a>
<span>♥</span>
<ul>
<li><a href="/">Delivery by POS</a></li>
<li><a href="/">Delivery by TIKI</a></li>
<li><a href="/">Delivery by Ekspedisi</a></li>
<li><a href="/">Delivery by Bus</a></li>
<li><a href="/">Delivery by Cargo</a></li>
</ul>
<span>♥</span>
</li>
<li><a href="#url"><b>MENU</b><i>♕</i></a></li>
</ul>
<br /><br /><br /><br />
</div> <!-- end of kartu -->
Save Html anda dan lihat hasilnya. Jika sudah berhasil, maka anda hanya perlu mengganti link dengan link anda sendiri.
Selamat mencoba...
Post title : Cara Membuat Menu Seperti Kartu Poker.
URL post : https://adanggak.blogspot.com/2011/05/cara-membuat-menu-seperti-kartu-poker.html
URL post : https://adanggak.blogspot.com/2011/05/cara-membuat-menu-seperti-kartu-poker.html
0 komentar:
Show Emoticons
Posting Komentar