Membuat Tabber Tab Dengan Jquery #2

Postingan sebelumnya saya pernah mengetengahkan cara membuat tabber tab atau tab view dengan bantuan JQuery part 1. Namun tabber tab tersebut memiliki beberapa keterbatasan, diantaranya tidak dapat menambahkan beberapa widget umum seperti arsip blog, label, kecuali dengan memasukkan link Widget Blogger yang saya sebutkan tadi dengan cara manual. Sedangkan tabber tab dengan JQuery part 2 ini, kita dapat menembahkan fitur atau widget tadi dengan mudah, cukup dengan mendrag/ memindahkan widget kesidebar.

Sedang kegunaan tabber tab ini sangat membantu menghemat ruang sidebar blog anda. Karena sobat dapat memberikan fitur lebih pada wilayah tunggal sidebar tidak terbatas sekedar recent post, recent comment, random posts, tapi juga label/ kategori, daftar link, profil dan banyak lagi.

Nah tertarik ingin membuat tabber tab dengan JQuery part 2 ini? Silahkan ikuti tutorial berikut:

 

1. Setelah sig in pada account blogger anda>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;       
}
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://sites.google.com/site/amatullah83/bg/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

 

Cataan CSS diatas masih bisa anda modifikasi lagi sesuaikan dengan blog anda. Untuk mengganti warna silahkan lihat tabel kode warna disini. Image lain yang bisa sobat gunakan  
3. 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,

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

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bloggertabv1.0-min.js.txt'></script>

Catatan: Tab dari kode diatas terdiri dari 3 tab. Untuk menyesuaikan jumlah tab dengan keinginan sobat, silahkan ganti angka 2 dengan jumlah tab yang sobat inginkan, awal tab dimulai dengan angka 0. Sedangkan sidebarname adalah sidebar id.

5. Selanjutnya cari kode HTML berikut:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Sekarang ganti tulisan berwarna merah dengan sidebar id dari tabber tab, yaitu sidebar 1

6. Selesai.

Sekarang anda bisa menambahkan widget yang diinginkan pada bagian elemen halaman, pastikan setiap widget memiliki nama. Kemudian drag ke sidebar. Simpan dan simpan lihat hasilnya diblog anda.

Resource: Blogger Tuts

Ingin mencoba membuat tabber tab full widget tanpa menggunakan JQuery seperti screen shoot dibawah ini, bisa lihat disini

Atau tab view sederhana seperti screen shoot dibawah ini lihat disini.

 

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

Cara Membuat Menu Tab View

 

Barusan posting cara memasang widget recent post atau postingan terbaru, komentar pertama yang diterima dari sahabat blogger pada postingan itu disertai lagi dengan pertanyaan cara membuat tabel, walau blm begitu ngerti jelas pertanyaannya mengarah ketabel yang mana? Mungkin yang ditanya, bagaimana cara membuat menu tab view atau justru tab view slide?

Baiklah anaa coba posting satu persatu, yang pertama bagaimana cara membuat menu tab view seperti screen shoot disamping:

• Seperti biasa dalam keadaan loggin, klik Template=> edit HTML
• masukkan kode berikut pada bagian header, antara <head> dan </head>, kalau bingung letakkan saja dibawah kode <head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>

• kemudian letakkan kode berikut diatas kode ]]></b:skin>

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}

• Janganlupa simpan template. kemudian klik pada elemen halaman=> tambah gadget=> HTML/JavaSript=> copi dan paste code berikut dalam content:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs"> 
Disini letakkan kode untuk menu tab 1 
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2009/11/cara-membuat-menu-tab-view.html" target="_blank" title="Tabview Widget">Get This Widget</a></div>

Silahkan anda ganti dan edit kode diatas, judul tab dan untuk warna bisa lihat kodenya disini.

• Save, kemudian save lagi. Silahkan lihat hasilnya diblog anda!

Demikian tutorial cara membuat menu tab view sederhana. Semoga bermanfaat
Ingin membuat yang lebih mudah dan menarik, lihat tutorial membuat tabber tab disini.