Cara Membuat Effect Sliding Door With CSS3 Dengan Mudah

Hallo sahabat Mafia Hacker , Kali ini aku akan membahas tentang Cara Membuat Effect Sliding Door With CS3. Tapi sebelum mulai tau kan apa arti Sliding Door ? Pasti tau kan dan contohnya kayak gimana ? contoh kayak kita sedang membuka gorden dan menutup gorden kembali ! Nah tau kan sekarang?

Tapi menurut kalian pasti keren kalo gambar atau semacamnya dengan effect seperti itu?

Nah gimana caranya ?

Ini Dia 

1. Pertama Login Blogger

2. Lalu pilih Rancangan,pilih EDIT HTML, Lalu Cari kode  ]]></b:skin>

3. Lalu taruh kode CSS ini diatasnya ..

.covermbs {
position: relative;
width: 200px;
height: 200px;
margin: 20px auto;
background-color: #eee;
z-index: 1;
  
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.covermbs p {color:black;
text-align:center;
margin: 0;
}
.left_gate {
position: absolute;
background: #41B5F0;
bottom: 0; right: 50%; left: 0; top: 0;
  
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.covermbs:hover .left_gate {
right: 100%; left: -50%;
}
.right_gate {
position:absolute;
background:#0C5CA3;
bottom: 0;
left: 50%;
right:0;top:0;
  
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.covermbs:hover .right_gate {
left: 100%; right: -50%;
}
.slide_in {
overflow:hidden;
}
.slide_in .left_gate {
background: #0C5CA3;
}
.slide_in .right_gate {
background: #41B5F0;
}

4. Ganti kode yang berwarna Merah dengan Ukuran anda inginkan .

5. Lalu pasang Kode ini di HTML anda , Pilih Add a gadget dan taruh kode HTML dibawah ini kedalamnya.

<div class="covermbs">
  <div class="left_gate"></div>
  <div class="right_gate"></div>

  <p>Isi Content ato Teks Anda Disini</p>

</div>

<div class="covermbs slide_in">
  <div class="left_gate"></div>
  <div class="right_gate"></div>

<p>Isi Content ato Teks Anda Disini</p>

</div>

Hasilnya Mohon KLIK -DEMO-

Semoga Bermanfaat :)