Cara membuat menu scrollbox dengan elastiselastis
Pasti Penasaran apa yang dimaksud dengan cara membuat menu scrollbox dengan elastiselastis ayooo coba cari tau dengan mengikuti cara-caranya
- Cara membuatnya :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- Dan Simpan kode berikut diatasnya :
.elastcx {
float: left;
position: relative;
width: 170px;
height: 200px;
margin: 0 10px 5px 0;
}
.elastbx {
top: 0; left: 0; position: absolute;
line-height: 11px;width: 150px; height: 188px;
background: url(https://lh6.googleusercontent.com/-7EyIrmKnMhU/TWkEaNz8z8I/AAAAAAAAABo/KxVoPQB6ZlQ/s1600/papers.jpg) repeat;
border: 2px solid #999999;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-top-left-radius: 12px;
border-bottom-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-bottomright: 12px;
-webkit-border-top-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
overflow-x: hidden;
font-family: trebuchet ms;font-size: 9px;
padding: 8px 8px 15px;
overflow: hidden;-o-transition: all 0.9s ease-out;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.9s ease-out;
}
.elastbx:hover {
line-height: 15px;width: 500px; height: 300px;
color: #000;
background: url(https://lh6.googleusercontent.com/-7EyIrmKnMhU/TWkEaNz8z8I/AAAAAAAAABo/KxVoPQB6ZlQ/s1600/papers.jpg) repeat;
font-size: 14px;overflow: auto;
}
float: left;
position: relative;
width: 170px;
height: 200px;
margin: 0 10px 5px 0;
}
.elastbx {
top: 0; left: 0; position: absolute;
line-height: 11px;width: 150px; height: 188px;
background: url(https://lh6.googleusercontent.com/-7EyIrmKnMhU/TWkEaNz8z8I/AAAAAAAAABo/KxVoPQB6ZlQ/s1600/papers.jpg) repeat;
border: 2px solid #999999;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-top-left-radius: 12px;
border-bottom-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-bottomright: 12px;
-webkit-border-top-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
overflow-x: hidden;
font-family: trebuchet ms;font-size: 9px;
padding: 8px 8px 15px;
overflow: hidden;-o-transition: all 0.9s ease-out;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.9s ease-out;
}
.elastbx:hover {
line-height: 15px;width: 500px; height: 300px;
color: #000;
background: url(https://lh6.googleusercontent.com/-7EyIrmKnMhU/TWkEaNz8z8I/AAAAAAAAABo/KxVoPQB6ZlQ/s1600/papers.jpg) repeat;
font-size: 14px;overflow: auto;
}
Simpan template………
Untuk memanggilnya pada posting, simpan kode berikut pada edit html posting kawan :
<div class=”elastcx”>
<div
class=”elastbx”>Masukkan teks nya disini kaw an………Masukkan
teks nya disini kawan………Masukkan teks nya disini
kawan………Masukkan teks nya disini… </div></div>
<div
class=”elastbx”>Masukkan teks nya disini kaw an………Masukkan
teks nya disini kawan………Masukkan teks nya disini
kawan………Masukkan teks nya disini… </div></div>
selesai………..
Selamat Mencoba !!!