Di Siang hari yang panas dan menyengat ini ku 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 .
<div class="elastcx">
<div class="elastbx">input your teks here </div></div>
Belum ada tanggapan untuk "Membuat Scrollbox Elastis Di Blogspot"
Posting Komentar