Membuat suatu "scrolling expanding list" yaitu seperti menu drop down, tapi disini mungkin lebih menarik, karena menu drop-nya bisa ditarik diperpanjang.
Jadi disini menu dropdown-nya bisa ditarik menggeser memanjang ataupun dikembalikan lagi ke posisi semula, pati bingung kan? Sama dong, HeHeHe.....
Gini-gini contohnya seperti ini :
contoh penggunaan scrolling-expanding-list
Langkahnya seperti ini :
1. Login Blogger anda
2. Layout --> Edit HTML --> Backup dahulu.
3. Setelah itu, download file ini scrollExpand.js
4. file ini scrollExpand.js simpan ke server anda.
5. Kemudian kita akan membuat CSS, cari kode --> <head> , copy paste kode dibawah ini dibawahnya kode --> <head>
#mContainer {
position:relative;
width:100px;
height:auto;
margin:auto;
border:2px solid #000;
overflow:hidden;
}
#nContainer {
position:relative;
overflow:hidden;
width:100px;
border-style:none;
background:#D8D8D8;
}
#listContainer {
display:block;
position:absolute;
top:0px;
left:0px;
width:100px;
padding:0px;
margin:0px;
}
#listContainer li {
position:relative;
display:block;
border-style:none;
width:100px;
height:10px;
padding:2px;
font:9px verdana;
cursor:pointer;
margin:0px;
color:#638DA1;
background-color:#D8D8D8;
line-height:10px;
}
#listContainer>li {
border-top:1px solid #311DF2; /* #638DA1; */
}
#listContainer li:hover {
color:#000;
}
#upArrow,#downArrow {
width:100px;
height:10px;
font:9px verdana;;
text-align:center;
color:#FFF;
cursor:pointer;
}
#upArrow {
background:#311DF2 url(up.gif) no-repeat center center;
}
#downArrow {
background:#311DF2 url(down.gif) no-repeat center center;
}
#changeSize {
width:10px;
height:10px;
position:relative;
float:right;
background:#311DF2 url(plus.gif) no-repeat center center;
}
6. Masih dalam kode <head>, copykan juga kode dibawah ini.
<script type="text/javascript" src="scrollExpand.js"></script>
7. Kemudian cari kode <body> dan copykan kode ini dibawahnya <body>
<p>
Click the up and down arrows to scroll the list. Click the "+" icon in the lower
right corner to expand the list to it's full height. Click the "-" icon to
contract the list again.</p>
<div id="mContainer">
<div id="upArrow"></div>
<div id="nContainer">
<ul id="listContainer">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
<li>List Item 11</li>
<li>List Item 12</li>
<li>List Item 13</li>
<li>List Item 14</li>
<li>List Item 15</li>
<li>List Item 16</li>
<li>List Item 17</li>
<li>List Item 18</li>
<li>List Item 19</li>
<li>List Item 20</li>
</ul>
</div>
<div id="downArrow">
<div id="changeSize"></div>
</div>
</div>
8. Kemudian download image ini
9. Kemudian save template dan lihat hasilnya.
Tidak ada komentar:
Posting Komentar