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>&#9829;</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>&#9829;</span>
 </li>

 <li><a href="/"><b>CHAT</b></a>
 <em>&#9827;</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>&#9827;</em>
 </li>

 <li><a href="/"><b>EMAIL</b></a>
 <span>&#9830;</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>&#9830;</span>
 </li>
 <li><a href="/"><b>SHOP</b></a>
 <em>&#9824;</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>&#9824;</em>
 </li>
 <li><a href="/"><b>DELIVERY</b></a>

 <span>&#9829;</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>&#9829;</span>
 </li>
 <li><a href="#url"><b>MENU</b><i>&#9813;</i></a></li>
</ul>

<br /><br /><br /><br />
</div> <!-- end of kartu -->



semoga bermanfaat ya sobat


sumber: http://wisencare.blogspot.com/2011/05/cara-membuat-menu-seperti-kartu-poker.html

Anda telah membaca artikel tentang Cara Memasang Menu Kartu Poker dan anda juga bisa menemukan artikel Cara Memasang Menu Kartu Poker ini dengan url http://hbiepwidjaia.blogspot.com/2013/06/cara-memasang-menu-kartu-poker.html.Anda boleh menyebarluaskan atau mengcopy artikel Cara Memasang Menu Kartu Poker ini jika memang bermanfaat bagi Anda, namun dengan catatan jangan lupa untuk mencantumkan link sumbernya.