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 :
  1. Masuk ke blog kamu
  2. Klik Tata Letak
  3. Pilih Tambah Gadget >> HTML/Javascript 
  4. Copy kode CSS nya dan ubah nama menunya dan alamat URLnya 
  5. Ubah kode warna biru auto dengan 300px atau berapa sajalah untuk merubah lebarnya secara manual 
  6. Untuk menambah kecepatan slidenya ubah angka pada kode slideSpeed = 20; menjadi lebih besar misalnya menjadi 60 
  7. 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 
  8. Lalu simpan dan letakan dibagian sidebar blog kamu.
Kodenya :
<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

Arsip Blog

Ayat Alkitab

Friend's Banner

Copyright © 2013 David As'Chri ChieLietonga 06 | Robotic Notes | Powered by Blogger

Designed by : Johanes Djogan | Redesignde by : David As'Chri ChieLietonga 06: CSS Slide Table Content