Cara Membuat CSS Expandable

By Unknown

Jumat, 25 November 2011

Ini merupakan widget yang dilengkapi dengan tombol buka tutup, sehingga dapat anda gunakan untuk menempatkan link di dalamnya. Setidaknya anda dapat menghemat tempat yang anda gunakan dalam menempatkan aksesoris blog. Mari kita bahas cara membuat CSS expandable, ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Centang Expand Template Widget
Masukkan kode berikut di atas kode ]]></b:skin>

.leftCol{width:295px; overflow:hidden; padding:15px 0px 0px 0px; margin:0px 25px 0px 0px; float:left; clear:both}
.leftBoxHeading_Off{width:295px; height:19px; background:url(images/left-box-heading-off.png) no-repeat; color:#94c93d; font-size:100%; padding:8px 0px 0px 18px; cursor:pointer}
.leftBoxExpander{width:295px; overflow:hidden; height:0px; background:url(images/left-box-expander-bg.png)}
.leftBoxInnerPic{width:287px; overflow:hidden; background:url(images/left-box-inner-bg.png) bottom repeat-x; margin:0px 0px 0px 1px}
.leftBoxInnerPicImg{width:89px; overflow:hidden; float:left; padding:0px 0px 0px 18px}
.leftBoxInnerPicUlWrap{width:167px; overflow:hidden; float:left}
.leftBoxInnerPic ul{width:138px; padding:0px 0px 0px 0px; margin:0px 0px 0px 9px; list-style:none}
.leftBoxInnerPic ul li{color:#69c; font-size:110%; width:266px}
.leftBoxInnerPic ul li a{color:#69c; text-decoration:none; display:block; padding:3px 0px 3px 20px}
.leftBoxInnerPic ul li a:hover{color:#69c}
.leftBoxHeading_Off{width:295px; height:19px; background:url(images/left-box-heading-off.png) no-repeat; color:#69c; font-size:110%; padding:8px 0px 0px 18px; cursor:pointer}
.leftBoxHeading_On{width:295px; height:19px; background:url(images/left-box-heading-on.png) no-repeat; color:#69c; font-size:110%; padding:8px 0px 0px 18px; cursor:pointer}
.leftBoxFooter_Off{width:295px; height:12px; background:url(images/left-box-footer-off.png) no-repeat; cursor:pointer; margin:0px 0px 15px 0px}
.leftBoxFooter_On{width:295px; height:12px; background:url(images/left-box-footer-on.png) no-repeat; cursor:pointer; margin:0px 0px 15px 0px}
.leftBoxExpander{width:295px; overflow:hidden; height:0px; background:url(images/left-box-expander-bg.png)}
.leftBoxInner{width:287px; overflow:hidden; margin:0px 0px 0px 1px}
.leftBoxInner ul{padding:0px 0px 0px 0px; margin:0px 0px 0px 9px; list-style:none}
.leftBoxInner ul li{color:#69c; font-size:75%; width:266px}
.leftBoxInner ul li a{text-decoration:none; display:block; padding:3px 0px 3px 20px}
.leftBoxInner ul li a:hover{color:#69c}
.leftBoxInnerPic{width:287px; overflow:hidden; background:url(images/left-box-inner-bg.png) bottom repeat-x; margin:0px 0px 0px 1px}

Selanjutnya masukkan kode berikut di atas kode </head>

<script type="text/javascript" src="Javascripts/yahoo-dom-event.js"></script><script type="text/javascript" src="Javascripts/animation-min.js"></script><script type="text/javascript" src="Javascripts/main-javascript.js"></script>

Selanjutnya klik Simpan Template
Sekarang klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<div id="Layer1"><div class="leftCol">
<div id="lhsHeader6" class="leftBoxHeading_Off" onclick="lhsAction('6',true,'T6_Effective_Behaviour_Change');">MASUKKAN JUDUL WIDGET ANDA DI SINI</div><div id="lhsExpander6" class="leftBoxExpander">
<div id="lhsInner6" class="leftBoxInnerPic"><img src="images/left-box-inner-img.png" alt="Left image" height="18" width="287" /><ul>
<li><a href="MASUKKAN LINK ANDA DI SINI" target="_blank">JUDUL LINK ANDA DI SINI</a></li>
<li><a href="MASUKKAN LINK ANDA DI SINI" target="_blank">JUDUL LINK ANDA DI SINI</a></li>
<li><a href="MASUKKAN LINK ANDA DI SINI" target="_blank">JUDUL LINK ANDA DI SINI</a></li>
<li><a href="MASUKKAN LINK ANDA DI SINI" target="_blank">JUDUL LINK ANDA DI SINI</a></li>
<li><a href="MASUKKAN LINK ANDA DI SINI" target="_blank">JUDUL LINK ANDA DI SINI</a></li>
</ul></div></div>
<div id="lhsFooter6" class="leftBoxFooter_Off" onclick="lhsAction('6',true,'false');"></div></div></div></div>

Silahkan ganti tulisan sesuai petunjuk
Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Share :

Facebook Twitter Google+