Membuat Tab Menu pada Blog

Saturday, October 27, 2012

Pernahkah Anda temui blog yang menggunakan menu tab, biasanya dipasang pada sidebar blog. Mengenai cara dan pembuatannya kali ini masih menggunakan manual. Bisa saja Anda modifikasi sedemikian rupa sehingga bisan ditempatkan untuk penambahan widget blog.

Sesuatu yang indah akan terlihat tatkala Anda sudah menerapkannya pada blog. Siapa sadar ataupun tidak, pembuatan blog ini menupakan penerapan antara CSS dan jQuery.

Tab Menu pada Blog

body {
  font:14px Georgia,serif;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhATyF0GnepCISWFTdgiHWmOc_DMw6cUcE3VeASpyKwgMVlUR-vwJVFKrwkFhZ2q69AGo0LZHcJptmJAXmTdmUDulePPKBQON-PpxftbtkxAILyDiMom9jd4jwFgsZeFNzDcsOoCO44w3ui/s1600/bg_itptabs.png);
}
#itpmenu-tabs {
  width:700px;
  margin:50px auto;
}
a {
  text-decoration:none;
}
h3 {
  margin:0 0 10px 0;
}
.tabs {
  list-style:none;
  overflow:hidden;
  padding-left:1px;
}
.tabs li {
  display:inline;
}
.tabs li a {
  display:block;
  float:left;
  padding:4px 8px;
  color:black;
  border:1px solid #ccc;
  background:#eee;
  margin:0 0 0 -1px;
}
.tabs li a.current {
  background:white;
  border-bottom:0;
  position:relative;
  top:2px;
  z-index:2;
}
.box-wrapper {
  -moz-box-shadow:0 0 20px black;
  -webkit-box-shadow:0 0 20px black;
  padding:20px;
  background:white;
  border:1px solid #ccc;
  margin:-1px 0 0 0;
  height:210px;
  position:relative;
}
.content-box {
  overflow:hidden;
  position:absolute;
  top:20px;
  left:20px;
  width:658px;
  height:230px;
}
.current {
  z-index:100;
}
.itptabs-one,
.itptabs-two,
.itptabs-three {
  width:30%;
  float:left;
  position:relative;
  top:350px;
}
.itptabs-one,
.itptabs-two {
  margin-right:3%;
}

<div id="itpmenu-tabs">
 <div id="slot-machine-tabs">
  <ul class="tabs">
   <li><a href="#one">Tab One</a></li>
   <li><a href="#two">Tab Two</a></li>
   <li><a href="#three">Tab Three</a></li>
  </ul>
         
  <div class="box-wrapper">
  <div id="one" class="content-box">
   <div class="itptabs-one itptabs">
    <img src="URL gambar Anda" alt="" />
   </div>
   <div class="itptabs-two itptabs">
    <h3>Default Lorem Ipsum</h3>
    <p>letak ulisan Anda</p>
   </div>
   <div class="itptabs-three itptabs">
    <p>letak ulisan Anda</p>
   </div>
  </div>

  <div id="two" class="content-box">
   <div class="itptabs-one itptabs">
    <img src="URL gambar Anda" alt="" />
   </div>
   <div class="itptabs-two itptabs">
    <h3>Default Lorem Ipsum</h3>
    <p>letak ulisan Anda</p>
   </div>
   <div class="itptabs-three itptabs">
    <p>letak ulisan Anda</p>
   </div>
  </div>
          
  <div id="three" class="content-box">
   <div class="itptabs-one itptabs">
    <img src="URL gambar Anda" alt="" />
   </div>
   <div class="itptabs-two itptabs">
    <h3>Default Lorem Ipsum</h3>
    <p>letak ulisan Anda</p>
   </div>
   <div class="itptabs-three itptabs">
    <p>letak ulisan Anda</p>
   </div>
  </div>
          
  </div>
        
 </div> <!-- END Box Wrapper -->
</div> <!-- END Slot Machine Tabs -->

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
var columnReadyCounter = 0;

// This is the callback function for the "hiding" animations
// it gets called for each animation (since we don't know which is slowest)
// the third time it's called, then it resets the column positions
function ifReadyThenReset() {
 
 columnReadyCounter++;
 
 if (columnReadyCounter == 3) {
  $(".itptabs").not(".current .itptabs").css("top", 350);
  columnReadyCounter = 0;
 }

};

// When the DOM is ready
$(function() {
 
 var $allContentBoxes = $(".content-box"),
     $allTabs = $(".tabs li a"),
     $el, $itptabsOne, $itptabsTwo, $itptabsThree,
     hrefSelector = "",
     speedOne = 1000,
  speedTwo = 2000,
  speedThree = 1500;
 
 // first tab and first content box are default current
 $(".tabs li:first-child a, .content-box:first").addClass("current");
 $(".box-wrapper .current .itptabs").css("top", 0);
 
 $("#slot-machine-tabs").delegate(".tabs a", "click", function() {
  
  $el = $(this);
  
  if ( (!$el.hasClass("current")) && ($(":animated").length == 0 ) ) {
  
   // current tab correctly set
   $allTabs.removeClass("current");
   $el.addClass("current");
   
   // optional... random speeds each time.
   speedOne = Math.floor(Math.random()*1000) + 500;
   speedTwo = Math.floor(Math.random()*1000) + 500;
   speedThree = Math.floor(Math.random()*1000) + 500;
  
   // each column is animated upwards to hide
   // kind of annoyingly redudundant code
   $itptabsOne = $(".box-wrapper .current .itptabs-one");
   $itptabsOne.animate({
    "top": -$itptabsOne.height()
   }, speedOne);
  
   $itptabsTwo = $(".box-wrapper .current .itptabs-two");
   $itptabsTwo.animate({
    "top": -$itptabsTwo.height()
   }, speedTwo);
  
   $itptabsThree = $(".box-wrapper .current .itptabs-three");
   $itptabsThree.animate({
    "top": -$itptabsThree.height()
   }, speedThree);
   
   // new content box is marked as current
   $allContentBoxes.removeClass("current");  
   hrefSelector = $el.attr("href");
   $(hrefSelector).addClass("current");
  
   // columns from new content area are moved up from the bottom
   // also annoying redundant and triple callback seems weird
   $(".box-wrapper .current .itptabs-one").animate({
    "top": 0
   }, speedOne, function() {
    ifReadyThenReset();
   });
 
   $(".box-wrapper .current .itptabs-two").animate({
    "top": 0
   }, speedTwo, function() {
    ifReadyThenReset();
   });
  
   $(".box-wrapper .current .itptabs-three").animate({
    "top": 0
   }, speedThree, function() {
    ifReadyThenReset();
   });
  
  };

 });

});
//]]>
</script>

• Jika pada template blog Anda sudah terpasang jquery.min.js maka abaikan saja jquery/1.7.2/jquery.min.js diatas
• Disarankan Anda memakai jquery.min.js versi terbaru

Coba sendiri

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini