Selasa, 19 Juni 2012
@Theme Windows Xplore
@Tebak-tebakan Narsis
@Tips & Tricks
Untuk melihat hasil dari kode CSS diatas silahkan klik demonya. Klik saja pada menu @Theme Windows Xplore , @Tebak-tebakan Narsis atau @Tips & Tricks, Bagaimana jelek ya ??? hehee...
Cara membuatnya sebagai berikut :
- Masuk ke blog kamu
- Klik Tata Letak
- Pilih Tambah Gadget >> HTML/Javascript
- Copy kode CSS nya dan ubah nama menunya dan alamat URLnya
- Ubah kode warna biru auto dengan 300px atau berapa sajalah untuk merubah lebarnya secara manual
- Untuk menambah kecepatan slidenya ubah angka pada kode slideSpeed = 20; menjadi lebih besar misalnya menjadi 60
- Biar tambah cantik utak-atik pada kode font-family: Comic Sans MS; font-size: 16px; dan font-family: Segoe Script; font-size: 14px; juga kode-kode warnanya
- Lalu simpan dan letakan dibagian sidebar blog kamu.
<style type="text/css"> /* ====================== Styler:cuerosbhelatos.blogspot.com/ Salam hangat & happy Blogging Don't Remove This Text ====================== */ .binkbenks_question{ /* Styling question */ /* Start layout CSS */ color:#FFF; font-size:0.9em; background-color:#317082; width:auto; margin-bottom:2px; margin-top:2px; padding-left:2px; -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; background-color: background: black; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); border-color: #BDBDBD; border-style: groove; border-width: 4px;font-family: Comic Sans MS;font-size: 16px; text-align:center; height:20px; /* End layout CSS */ overflow:hidden; cursor:pointer; } .binkbenks_answer{ /* Parent box of slide down content */ /* Start layout CSS */ -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; border-color: #BDBDBD; border-style: inset; border-width: 2px; background:#151515 url(http://i1206.photobucket.com/albums/bb455/binkbenk/AlienLogo.png)no-repeat center; width:auto; font-family: Segoe Script; font-size: 14px; text-align: left; /* End layout CSS */ visibility:hidden; height:0px; overflow:hidden; position:relative; } .binkbenks_answer_content{ /* Content that is slided down */ padding:1px; font-size:0.9em; position:relative; } </style> <script type="text/javascript"> var binkbenks_slideSpeed = 20; // Higher value = faster var binkbenks_timer = 10; // Lower value = faster var objectIdToSlideDown = false; var binkbenks_activeId = false; var binkbenks_slideInProgress = false; var binkbenks_slideInProgress = false; var binkbenks_expandMultiple = false; // true if you want to be able to have multiple items expanded at the same time. function showHideContent(e,inputId) { if(binkbenks_slideInProgress)return; binkbenks_slideInProgress = true; if(!inputId)inputId = this.id; inputId = inputId + ''; var numericId = inputId.replace(/[^0-9]/g,''); var answerDiv = document.getElementById('binkbenks_a' + numericId); objectIdToSlideDown = false; if(!answerDiv.style.display || answerDiv.style.display=='none'){ if(binkbenks_activeId && binkbenks_activeId!=numericId && !binkbenks_expandMultiple){ objectIdToSlideDown = numericId; slideContent(binkbenks_activeId,(binkbenks_slideSpeed*-1)); }else{ answerDiv.style.display='block'; answerDiv.style.visibility = 'visible'; slideContent(numericId,binkbenks_slideSpeed); } }else{ slideContent(numericId,(binkbenks_slideSpeed*-1)); binkbenks_activeId = false; } } function slideContent(inputId,direction) { var obj =document.getElementById('binkbenks_a' + inputId); var contentObj = document.getElementById('binkbenks_ac' + inputId); height = obj.clientHeight; if(height==0)height = obj.offsetHeight; height = height + direction; rerunFunction = true; if(height>contentObj.offsetHeight){ height = contentObj.offsetHeight; rerunFunction = false; } if(height<=1){ height = 1; rerunFunction = false; } obj.style.height = height + 'px'; var topPos = height - contentObj.offsetHeight; if(topPos>0)topPos=0; contentObj.style.top = topPos + 'px'; if(rerunFunction){ setTimeout('slideContent(' + inputId + ',' + direction + ')',binkbenks_timer); }else{ if(height<=1){ obj.style.display='none'; if(objectIdToSlideDown && objectIdToSlideDown!=inputId){ document.getElementById('binkbenks_a' + objectIdToSlideDown).style.display='block'; document.getElementById('binkbenks_a' + objectIdToSlideDown).style.visibility='visible'; slideContent(objectIdToSlideDown,binkbenks_slideSpeed); }else{ binkbenks_slideInProgress = false; } }else{ binkbenks_activeId = inputId; binkbenks_slideInProgress = false; } } } function initShowHideDivs() { var divs = document.getElementsByTagName('DIV'); var divCounter = 1; for(var no=0;no<divs.length;no++){ if(divs[no].className=='binkbenks_question'){ divs[no].onclick = showHideContent; divs[no].id = 'binkbenks_q'+divCounter; var answer = divs[no].nextSibling; while(answer && answer.tagName!='DIV'){ answer = answer.nextSibling; } answer.id = 'binkbenks_a'+divCounter; contentDiv = answer.getElementsByTagName('DIV')[0]; contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; contentDiv.className='binkbenks_answer_content'; contentDiv.id = 'binkbenks_ac' + divCounter; answer.style.display='none'; answer.style.height='1px'; divCounter++; } } } window.onload = initShowHideDivs; </script> <div class="binkbenks_question"> @Theme Windows Xplore</div> <div class="binkbenks_answer"> <div> <ul> <li><a href="http://blogloecooy.com/">black theme</a></li> <li><a href="http://blogloecooy.com/">red theme</a></li> <li><a href="http://blogloecooy.com/">blue theme</a></li> <li><a href="http://blogloecooy.com/">yellow theme</a></li> <li><a href="http://blogloecooy.com/">green theme</a></li> <li><a href="http://blogloecooy.com/">dark theme</a></li> <li><a href="http://blogloecooy.com/">sexy theme</a></li> </ul> </div> </div> <div class="binkbenks_question"> @Tebak-tebakan Narsis </div> <div class="binkbenks_answer"> <div> <ul> <li><a href="http://blogloecooy.com/">jablay gila</a></li> <li><a href="http://blogloecooy.com/">jomblo gila</a></li> <li><a href="http://blogloecooy.com/">stress gila</a></li> <li><a href="http://blogloecooy.com/">balap gila</a></li> <li><a href="http://blogloecooy.com/">nangis gila</a></li> <li><a href="http://blogloecooy.com/">susah gila</a></li> </ul> </div> </div> <div class="binkbenks_question"> @Tips & Tricks</div> <div class="binkbenks_answer"> <div> <ul> <li><a href="http://blogloecooy.com/">Tips & Tricks merayu</a></li> <li><a href="http://blogloecooy.com/">Tips & Tricks menipu</a></li> <li><a href="http://blogloecooy.com/">Tips & Tricks menggauli</a></li> <li><a href="http://blogloecooy.com/">Tips & Tricks Merangsang</a></li> <li><a href="http://blogloecooy.com/">Tips & Tricks bercinta</a></li> <li><a href="http://blogloecooy.com/">Tips & Tricks gila</a></li> </ul> </div> </div>Sumber : http://cuerosbhelatos.blogspot.com/2011/11/css-slide-table-content.html