Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Girant_31 | Tab Vanilla Slick</title>
​
<script type="text/javascript" src="http://girant31.googlecode.com/files/jquery_002.js"></script>
  <script  type="text/javascript">
$(document).ready(function(){
    $('#archive, #blog').hide();    
    $("ul.slick li").click(function () {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(".content-slick").slideUp();
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });
 });</script>
​
    <link rel="stylesheet" type="text/css" href="accordion1_files/style.css">
    
    <script type="text/javascript" src="http://girant31.googlecode.com/files/jquery.js"></script>
    <script type="text/javascript" src="http://girant31.googlecode.com/files/infogrid.js"></script>   
<script src="http://girant31.googlecode.com/files/bsa.js" type="text/javascript"></script><script async="async" src="http://girant31.googlecode.com/files/s_3469a2a501a9e18091036aa0c89f9dcb.js" id="_bsap_js_3469a2a501a9e18091036aa0c89f9dcb" type="text/javascript"></script>
    <style type="text/css">
           * { margin: 0; padding: 0; }
    html, body { height: 100%; overflow: hidden;}
body { font: 14px Georgia, serif; }
#page-wrap { width: 100%; padding: 0 0 0 0; margin: 0 auto; overflow: hidden; height: 100%; }
    .one{position:relative;}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative;}.one .bsa_it_ad a{text-decoration:none;}.one .bsa_it_ad a:hover{text-decoration:none;}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0;}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%;}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0;}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px;}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none;}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic;}</style></head><body>
    <style type="text/css">
    a:link {
color: #fff;
text-decoration: none;
}
a, a:visited {
color: #db4b0c;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration:bold;
font-style:none;
}
.bsa_it_ad { border: 0 !important; padding: 6px !important; overflow: hidden !important; background: #eae3c0 !important; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px 0; }
.bsa_it_ad a { margin: 0 !important; padding: 0 !important; }
.bsa_it_ad a img { border: 0 !important; position: static !important; }
.bsa_it_ad a:hover img { margin: 0 !important; }
.bsa_it_ad a:hover { background: none !important; }
.bsa_it_i { margin: 0 15px 0 0 !important; }
.bsa_it_t { margin: 12px 0 0 0 !important; font: 16px Georgia, Serif !important; }
.bsa_it_d { font: 11px Verdana, Helvetica, Arial, Sans-Serif; padding-right: 10px; }
.bsa_it_p { bottom: 5px !important; right: 5px !important; padding: 0 !important; }
.bsa_it_p a:hover { background: none !important; }
.header-button {
   border-top: 1px solid #cf942d !important;
   border-bottom: 0 !important;
   background: #964418;
   background: -webkit-gradient(linear, left top, left bottom, from(#e86e36), to(#964418));
   background: -moz-linear-gradient(top, #e86e36, #964418);
   padding: 3px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white !important;
   font-size: 13px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   display: inline !important;
   margin: 0 !important;
   }
.header-button:hover {
   border-top-color: #4f220d !important;
   background: #4f220d;
   color: #ccc !important;
   text-decoration: none !important;
   margin: 0 !important;
   }
.header-button:active {
   border-top-color: #261105 !important;
   background: #261105;
   }
</style>
​
<div id="hook-just-in-case" style="background: black url(/examples/images/examples-header-bg.png) repeat-x scroll 0% 0%; height: 77px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: white ! important; font-family: Georgia,Serif ! important; font-style: normal ! important; font-variant: normal ! important; font-weight: normal ! important; font-size: 14px ! important; line-height: normal ! important; font-size-adjust: none ! important; font-stretch: normal ! important; position: relative; width: 100% ! important; z-index: 10000 ! important;">
    
    
  <div style="margin: 0pt auto; width: 960px; height: 77px; position: relative;">
    <img src="http://girant31.comoj.com/InfoGrid_files/example-logo.png" alt="Demo Page" style="position: absolute; top: 0pt; left: 0pt;">
    <div style="position: absolute; left: 140px; top: 52px; width: 400px;"> <a class="header-button" href="http://agoezimoetz.blogspot.com/2010/07/button-gradient-css3.html"> << Back to Tutorial</a> &nbsp; <a class="header-button" href="http://agoezimoetz.blogspot.com/">Other Tricks >></a> </div>
    <div style="width: 420px; position: absolute; right: 0pt; top: 0pt;">
      <div id="bsap_1248303" class="bsap_1248303 bsap">
        <div class="bsa_it one">
          <div class="bsa_it_ad ad1 odd" id="bsa_453314"><a href="http://agoezimoetz.blogspot.com/" onclick="_bsap.rocks('click',453314,1248303)" target="_blank"><span class="bsa_it_i"><img src="http://girant31.comoj.com/InfoGrid_files/28244-1276110453.gif" alt="Girant_31" width="120" height="90"></span></a><a href="http://agoezimoetz.blogspot.com/" onclick="_bsap.rocks('click',453314,1248303)" target="_blank"><span class="bsa_it_t">Girant_31</span><span class="bsa_it_d">Hanya
            untuk berbagi.. <br>
            Selamat mencoba dan semoga bermanfaat.</span></a></div>
          <span class="bsa_it_p"><a href="http://agoezimoetz.blogspot.com/">Goez</a></span></div>
      </div>
    </div>
  </div>
    
</div>
    <div id="page-wrap" style="background:url(http://lh3.ggpht.com/_JhWRxKBSF24/S-dlivfdtQI/AAAAAAAAAvA/xUH_Wy-XXZo/gam%20atas2.png) scroll 0 0 #EAF6E9;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;">
​
<style type="text/css">
  #wadah{width:600px; hight:auto; float:center; padding-bottom:150px;background:#fff;border: solid 3px #282828;-webkit-border-radius: .5em;
-moz-border-radius: .5em;}
#slick_area {
  border:1px solid #dedbd1;
  background-color:#f3f1eb;
  padding:8px;  
  margin:10px 0;
  line-height:18px;
  width:310px;
}
#slick_area  a{
  color:#222;
  text-decoration:none;
}
.slick_area a:hover{
  color:#009;
}
ul.slick {
  margin:2px 5px 8px 0;
  padding:0px;
}
ul.slick li {
  list-style:none;
  display:inline;
  background-color:#dedbd1;
  padding:5px 14px;
  text-decoration:none;
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
  cursor:pointer;
  border:1px solid #dedbd1;
}
ul.slick li:hover {
  color:#009;
}
ul.slick li.active {
  background-color:#fff;
  border:1px solid #585858;
​
}
.content-slick {
  background-color:#fff;
  border:1px solid #585858;
  color:#dedede;
  min-height:40px;
  padding:7px 13px 5px;
  text-align:justify;
}  
.content-slick ul {
  margin:2px;
  padding:0;
}
.content-slick ul li {
  list-style:none;
  border-bottom:1px solid #585858;
  padding:4px;
}
.content-slick ul li:last-child  {
  border-bottom:none;
}
.content-slick  ul li:hover, .content-slick  ul li a:hover {
  display:block;
  background-color:#dedbd1;
}
.content-slick  ul li a {
  text-decoration:none;
  color:#000;
  display:block;
}
​
#archive, #blog { display:none; }
</style>
<br><br>
      <center>
  <h2>Girant_31 | Tab Vanilla Slick</h2>
<div id="wadah">
<br />
<div id="slick_area">
​
  <ul class="slick">
    <li title="label" class="slick  active">Label</li>
    <li title="archive" class="slick">Archive</li>
    <li title="blog" class="slick">Blog</li>
  </ul>
​
  <div id="label" class="content-slick">
    <ul>
<li><a style="padding-left: 0px;" href="http://agoezimoetz.blogspot.com/search/label/Css">Css</a></li>
<li><a style="padding-left: 0px;" href="http://agoezimoetz.blogspot.com/search/label/hacker">Cyber</a></li>
<li><a style="padding-left: 0px;" href="http://agoezimoetz.blogspot.com/search/label/Design">Design</a></li>
<li><a style="padding-left: 0px;" href="http://agoezimoetz.blogspot.com/search/label/Game">Game</a></li>
<li><a style="padding-left: 0px;" href="http://agoezimoetz.blogspot.com/search/label/hardware">Hardware</a></li>
<li><a style="padding-left: 0px;" href="http://agoezimoetz.blogspot.com/search/label/jQuery">jQuery</a></li>
<li><a style="padding-left: 0px;" href="http://agoezimoetz.blogspot.com/search/label/Software">Software</a></li>
<li><a style="padding-left: 0px;" href="http://agoezimoetz.blogspot.com/search/label/Tips%20n%20Trik">Tips n Trick</a></li>
<li><a style="padding-left: 0px;" href="http://agoezimoetz.blogspot.com/search/label/Windows">Windows</a></li>
    </ul>
  </div>
​
  <div id="archive" class="content-slick">
    <ul>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_01_01_archive.html" title="januari">   Januari</a><br>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_02_01_archive.html" title="februari">   Februari</a><br>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_03_01_archive.html" title="maret">   Maret</a><br>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_04_01_archive.html" title="april">   April</a><br>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_05_01_archive.html" title="mei">   Mei</a><br>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_06_01_archive.html" title="juni">   Juni</a><br>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_07_01_archive.html" title="juli">   Juli</a><br>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_08_01_archive.html" title="agustus">   Agustus</a><br>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_09_01_archive.html" title="september">   September</a><br>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_10_01_archive.html" title="oktober">   Oktober</a><br>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_11_01_archive.html" title="november">   November</a><br>
<img src="http://lh3.ggpht.com/_JhWRxKBSF24/TCjSLDO-sWI/AAAAAAAABZY/yWJZo8nNTpU/2.png"><a href="http://agoezimoetz.blogspot.com/2010_12_01_archive.html" title="desember">   Desember</a><br>
​
    </ul>
  </div>
​
  <div id="blog" class="content-slick">
    <ul>
<li><a style="padding-left: 0px;" href="http://agoezimoetz.blogspot.com/">Girant_31</a></li>
<li><a style="padding-left: 0px;" href="http://nu-imuts.blogspot.com/">Nu_Imuts</a></li>
<li><a style="padding-left: 0px;" href="http://serabimachine.blogspot.com/" class="last">Serabi Machine</a></li>
 
    </ul>
  </div>
​
</div>
​
<br /><br /><br />
  </div></center></div></body></html>
 
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers