Membuat Menu Scrollbox Elastis

.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://i269.photobucket.com/albums/jj72/myem0/star-background-034.gif) 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(http://i269.photobucket.com/albums/jj72/myem0/star-background-034.gif) repeat;
font-size: 14px;overflow: auto;
}
 

1. Cara membuatnya : Login blogger
2. Rancangan, edit html, cari kode ]]></b:skin>
3. Simpan kode berikut tepat diatas kode tadi :

.elastcx {<br /> float: left;<br /> position: relative;<br /> width: 170px;<br /> height: 200px;<br /> margin: 0 10px 5px 0;<br /> }<br /> .elastbx {<br /> top: 0; left: 0; position: absolute;<br /> line-height: 11px;width: 150px; height: 188px;<br /> background: url(http://i269.photobucket.com/albums/jj72/myem0/star-background-034.gif) repeat;<br /> border: 2px solid #999999;<br /> border-radius: 6px;<br /> -moz-border-radius: 6px;<br /> -webkit-border-radius: 6px; <br /> border-top-left-radius: 12px;<br /> border-bottom-right-radius: 12px;<br /> -moz-border-radius-topleft: 12px;<br /> -moz-border-radius-bottomright: 12px;<br /> -webkit-border-top-left-radius: 12px;<br /> -webkit-border-bottom-right-radius: 12px;<br /> overflow-x: hidden;<br /> font-family: trebuchet ms;font-size: 9px;<br /> padding: 8px 8px 15px;<br /> overflow: hidden;-o-transition: all 0.9s ease-out;<br /> -moz-transition: all 0.6s ease-out;<br /> -webkit-transition: all 0.9s ease-out;<br /> }<br /> .elastbx:hover {<br /> line-height: 15px;width: 500px; height: 300px;<br /> color: #000;<br /> background: url(http://i269.photobucket.com/albums/jj72/myem0/star-background-034.gif) repeat;<br /> font-size: 14px;overflow: auto;<br /> }

Save template.........

Untuk memanggilnya pada posting, simpan kode berikut pada edit html posting sobat :

<div class="elastcx"><div class="elastbx">Masukkan teks nya disini... </div></div>

Selesai dah , gimana??? punya sobat berhasilkah???

Selamat mencoba, semoga BerhasiL...