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 :)
