membuat kotak scrooll box elastis

"Blogging With Me" Di sore hari yang dingin mencoba tuk menuliskan sesuatu yang menarik untuk sahabat semua, kali ini postingannya brjudul Membuat Scrollbox Elastis Di Blogspot . Daripada saya basa basi langsung aja anda bisa lihat demonya berikut :

INI JUGA DEMO

Setelah Melihat demo tadi jika anda tertarik lihatlah langkah* berikut untuk membuatnya :

• Masuk ke Blogger.com
• Pilih Rancangan >>Edit Html >> Expand Widget Template
• Letakkan kode berikut diatas kode ]]>< /b:skin> :

/* Elastic Scroll Box ------------------------------------ */
.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(http://t3.gstatic.com/images?q=tbn:ANd9GcRnAYjc1Go58c3rXgzOq9uMeDxGghDhLU3rpAisgLPDZkSRIQheHNiVbFQ) 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;
-moz-box-shadow: 2px 2px 4px #fff;
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: 450px; height: 300px;
color: #000;
background: url(http://t3.gstatic.com/images?q=tbn:ANd9GcRnAYjc1Go58c3rXgzOq9uMeDxGghDhLU3rpAisgLPDZkSRIQheHNiVbFQ) repeat;
font-size: 14px;overflow: auto;
}

*Note:background:url(http://t3.gstatic.com/images?q=tbn:ANd9GcRnAYjc1Go58c3rXgzOq9uMeDxGghDhLU3rpAisgLPDZkSRIQheHNiVbFQ)*  *Ganti tulisan yang berwarna biru dengan Url Gambar anda.
* Save Template .

• Cara Posting :

<div class="elastcx">
<div class="elastbx">input your teks here </div></div>