Cara Membuat Slide Box Cantik

I

ni adalah Slidebox Indah mengagumkan untuk blogger atau situs web. Slidebox ini dirancang dengan css saja, sebagian besar masyarakat menggunakan java script atau jquery untuk slide namun script ini akan memperlambat blog Anda yang menghasilkan situs lambat untuk membuka, tapi di sini dengan slidebox tidak ada skrip yang ditambahkan dan tidak ada coding tambahan hanya menggunakan Css dan gambar. Fitur dari slidebox yang akan mencakup teks latar belakang Anda sebagai script memperluas java. misalnya dalam beberapa kasus ketika kita klik link mereka akan exapand semua link atau konten teks. Tapi slidebox akan memuluskan gambar slide untuk membuka konten teks latar belakang Anda dengan menggeser gambar kedua belah pihak seperti pembukaan gerbang. Penggunaan slidebox Anda dapat menyembunyikan teks konten latar belakang Anda. Ketika mouse pengunjung mengarahkan kursor pada gambar akan menampilkan teks isi background dengan menggeser gambar kanan ke kiri dan kiri ke kanan seperti membuka gerbang. Sebagian besar menggunakan slidebox ini di sekitar halaman kami atau hubungi kami halaman. Menambahkan Slidebox ke blogger pos atau halaman Jika Anda ingin menunjukkan ini hanya pada satu halaman maka Anda copy dan paste kode di halaman posting pada modus html. sedangkan jika anda ingin menggunakan dibeberapa halaman silahkan copy paste kode CSS diatas ]]></b:skin>dengan menghilangkan <style> & </style>

Kode Slidebox css

</style> .Slidebox{
float:center;
}
.cover {
position: relative;
width: 590px;
height: 282px;
margin: 20px auto;
background-color: #f7f7f7;
z-index: 1;
padding: 10px;
-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);
}
.left_gate{
position: absolute;
background: #DBDCDE;
bottom: 0; right: 50%;
left: 0;
top: 0;
border:1px solid #F0F0F0;
-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;
}
.cover:hover .left_gate{
right: 100%;
left: -50%;
}

.right_gate{
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border:1px solid #F0F0F0;
-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;
}
.cover:hover .right_gate{
left: 100%;
right: -50%;
}
.slide_in {
overflow: hidden;
}
.slide_in .left_gate {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1y-w_X8xCEG7bZEDqmehl_j8f7sASRZNIW11JMz65Jl8kDdXGLwhvWDM8rISnXccslUOEmp-oYtaqDQJLObwby0r6hDL5jQXXOgFX9lfEx_7Qb3ymxbP-DXuMalyiWH6wH_ydfCV4EkKL/s320/right+gate.png)#DBDCDE;
border:1px solid #F0F0F0;
}
.slide_in .right_gate {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbqM7tyH1nznCBNwgRopRnJZoTt-WvRrpqc6-h9MUzJj3fpKCkm1e5wrlnMtWjquVQj_DD9RTn9zNVckNKRSVct_WIGuOb_1lj-8BwFPL3lVxWC_8KV_ZSBR48KXF6CHtvk-i-m4ni3suS/s1600/left+gate.png)#DBDCDE;
border:1px solid #F0F0F0;
}
.cover img {
margin-top: 15px;
}</style>

Kode Html Slidebox

 <div class="Slidebox">

<div class="cover slide_in">

<div class="left_gate">

</div>

<div class="right_gate">

</div>

TEXT ANDA DISINI

</div>

Ubah Lebar slidebox 590px ganti dengan lebar Anda sendiri. perubahan tinggi slidebox 282px ganti dengan tinggi Anda sendiri berubah warna Background # f7f7f7 ganti dengan warna Anda sendiri ,atau mencoba Generator Warna Html kami, mengubah Gambar mengubah Gambar Samping Kanan gambar Ganti URL (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1y-w_X8xCEG7bZEDqmehl_j8f7sASRZNIW11JMz65Jl8kDdXGLwhvWDM8rISnXccslUOEmp-oYtaqDQJLObwby0r6hDL5jQXXOgFX9lfEx_7Qb3ymxbP-DXuMalyiWH6wH_ydfCV4EkKL/s320/right+gate.png) dengan link gambar Anda Ubah Samping kiri gambar Ganti URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbqM7tyH1nznCBNwgRopRnJZoTt-WvRrpqc6-h9MUzJj3fpKCkm1e5wrlnMtWjquVQj_DD9RTn9zNVckNKRSVct_WIGuOb_1lj-8BwFPL3lVxWC_8KV_ZSBR48KXF6CHtvk-i-m4ni3suS/s1600/left+gate.png) dengan link gambar Anda
Catatan: Gambar ukuran harus pixles lebar 303 & 302 tinggi