Membuat Tabber Tab Menu Dengan JQuery #1

Saat ini tabber tab mulai banyak terkenal dalam dunia desain web. Banyak situs yang menggunakan tabber tab dan mengisinya dengan berbagai konten untuk menghemat ruang halaman web site. Diantara yang banyak saya lihat menggunakan tabber tab untuk kategori recent posts, recent comments dan random posts adalah template atau theme wordpress.
InsyaAllah kali ini saya ingin mengetengahkan cara membuat tabber tab dengan JQuery untuk template blogger. Diantara ragam tabber tab satu diantara yang akan kita pelajari cara pembuatannya sekarang, adalah tabber tab dengan struktur menu menggunakan icons seperti screenshot berikut atau silahkan lihat dulu demox
View Demo


Oke langsung pada tutorial pembuatan tabber tab menu atau tab view dengan JQuery:
Langkah Pertama:
1. Setelah sig in pada account blogger anda>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag atau kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

catatan: Bagi anda yang pernah menambahkan atau ditemplate anda sudah terdapat script JQuery maka langkah kedua abaikan saja,

3. Kemudian tambahkan pula script berikut dibawah script JQuery tadi:

<script type='text/javascript'>
$(document).ready(function() {  
  //Get all the LI from the #tabMenu UL
  $(&#39;#tabMenu &gt; li&#39;).click(function(){
    //perform the actions when it&#39;s not selected
    if (!$(this).hasClass(&#39;selected&#39;)) {  
    //remove the selected class from all LI  
    $(&#39;#tabMenu &gt; li&#39;).removeClass(&#39;selected&#39;);
    //Reassign the LI
    $(this).addClass(&#39;selected&#39;);
    //Hide all the DIV in .boxBody
    $(&#39;.boxBody div&#39;).slideUp(&#39;1500&#39;);
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    $(&#39;.boxBody div:eq(&#39; + $(&#39;#tabMenu &gt; li&#39;).index(this) + &#39;)&#39;).slideDown(&#39;1500&#39;);
  }
  }).mouseover(function() {
    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest  
    $(this).addClass(&#39;mouseover&#39;);
    $(this).removeClass(&#39;mouseout&#39;); 
  }).mouseout(function() {
    //Add and remove class
    $(this).addClass(&#39;mouseout&#39;);
    $(this).removeClass(&#39;mouseover&#39;);  
  });
    //Mouseover with animate Effect for Category menu list
  $(&#39;.boxBody #category li&#39;).click(function(){
    //Get the Anchor tag href under the LI
    window.location = $(this).children().attr(&#39;href&#39;);
  }).mouseover(function() {
    //Change background color and animate the padding
    $(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);
    $(this).children().animate({paddingLeft:&quot;20px&quot;}, {queue:false, duration:300});
  }).mouseout(function() {
    //Change background color and animate the padding
    $(this).css(&#39;backgroundColor&#39;,&#39;&#39;);
    $(this).children().animate({paddingLeft:&quot;0&quot;}, {queue:false, duration:300});
  });
    //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  $(&#39;#.boxBody li&#39;).click(function(){
    window.location = $(this).children().attr(&#39;href&#39;);
  }).mouseover(function() {
    $(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);
  }).mouseout(function() {
    $(this).css(&#39;backgroundColor&#39;,&#39;&#39;);
  });    
});
</script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

#tabMenu {margin:0;    padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}
/* this is the button images http://amatullah83.blogspot.com*/
li.comments {background:url(http://sites.google.com/site/amatullah83/bg/tabComment.png) no-repeat 0 -32px;}
li.posts {background:url(http://sites.google.com/site/amatullah83/bg/tabstar.png) no-repeat 0 -32px;}
li.category {background:url(http://sites.google.com/site/amatullah83/bg/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://sites.google.com/site/amatullah83/bg/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://sites.google.com/site/amatullah83/bg/tabRandom.png) no-repeat 0 -32px;}
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}
.box {width:227px}
.boxTop {background:url(http://sites.google.com/site/amatullah83/bg/boxTop.png)no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(http://sites.google.com/site/amatullah83/bg/boxBottom.png) no-repeat;
    height:11px;}
.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block}
/* styling for the content*/
.boxBody div ul {    margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://sites.google.com/site/amatullah83/bg/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div li span {    font-size:8px;color:#9F9F9F;}
/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}

Catatan kode CSS diatas masih bisa anda modifikasi untuk menyesuaikan dengan template anda untuk membantu mengenali property CSS diatas lihat screenshot berikut:

Icons image lain yang bisa sobat gunakan:
Untuk background bodynya, cari aja sendiri ya!
5. Simpan Template
Langkah kedua:

• Masih pada menu tata letak>>> klik elemen laman>>> tambah gadget>>> Pilih HTML/JavaScript

• Pada kolom konten isi dengan kode HTML berikut:

<div class="box">
  <ul id="tabMenu">
    <li class="posts selected"></li> <!-- default button-->
    <li class="comments"></li>
    <li class="category"></li>
    <li class="famous"></li>
    <li class="random"></li>
  </ul>
  <div class="boxTop"></div>
  <div class="boxBody">
      <!-- default page-->
    <div id="posts" class="show">
      <ul>
        <li>Post 1</li>
        <li>Post 2</li>
        <li class="last">Post 3</li>
      </ul> 
    </div> 
    <div id="comments">
      <ul>
        <li>Comment 1</li>
        <li>Comment 2</li>
        <li class="last">Comment 3</li>
      </ul>
    </div>
     <div id="category">
         <ul>
           <li>Category 1</li>
           <li>Category 2</li>
        <li class="last">Category 3</li>
         </ul> 
       </div>
      <div id="famous">
      <ul>
        <li>Famous post 1</li>
        <li>Famous post 2</li>
        <li class="last">Famous post 3</li>
      </ul> 
    </div>
    <div id="random">
      <ul>
        <li>Random post 1</li>
        <li>Random post 2</li>
        <li class="last">Random post 3</li>
         </ul>   
    </div>       
  </div>
  <div class="boxBottom"></div>
</div>

• Silahkan isi tabber tab menu dengan konten yang anda inginkan kemudian simpan dan simpan lagi. Lihat hasilnya diblog anda.

Semoga berhasil dan bermanfaat. Jangan lupa lihat demo hasil pekerjaan saya disini.

Resource: queness

Cek Out tutorial membuat tabber tab JQuery 2 disini


Ingin mencoba membuat tabber tab full widget tanpa menggunakan JQuery bisa lihat disini


atau tab view sederhana lihat disini

• Tweet
• Share
• Share
• Share
• Share