Membuat Halaman Posting dalam Tab View jQuery

Bismillahirrohmaanirrohiim.. hmmm.. Assalaamu'alaikum wr. wb. apa kabar sobat semua?? semoga baik-baik saja ya.. amiin..!!! udah lama saya tidak update tutorial blog heehe,, OK sobat kali ini saya memberikan tips tentang "Membuat Halaman Posting Dalam Tab View" seperti gambar diatas.

untuk contoh silahkan klik DEMO itu dalah blog saya yang lainya .. :D heheh..

Biasanya kita memasang tab view pada sidebar dengan tujuan untuk menghemat tempat, ini pun fungsinya sama. Cara ini cocok agi sobat yang memakai template 1 Kolom dengan banyak sidebar, tapi bagi sobat yang memakai template 2 atau 3 kolom lebih juga bisa ko.. setelah saya mencari-cari di google dengan kata kunci "membuat halaman posting dalam tab view" ternyata tidak ketemu, karena saya merasa agak kecewa akhirnya saya memutuskan untuk membuatnya sendiri dengan CSS dan Script yang ada yaitu script untuk widget sidebar yang saya dapatkan dari sebuah blog. berikut script yang belum saya modifikasi:

/*Start Tabber CSS*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#fff;background:#0066B3;padding:4px 5px;display:block;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font:bold 11px Trebuchet MS;}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#FF6600;color:#FFF;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}
/*Tabber CSS Code End*/

<div class='tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(".tabs-widget-content-tab").hide();
                $("ul.tabs-widget-tab li:first a").addClass("tabs-widget-current").show();
                $(".tabs-widget-content-tab:first").show();

                $("ul.tabs-widget-tab li a").click(function() {
                    $("ul.tabs-widget-tab li a").removeClass("tabs-widget-current a");
                    $(this).addClass("tabs-widget-current");
                    $(".tabs-widget-content-tab").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='tabs-widget tabs-widget-tab'>
<li><a href='#tab1'>Terbaru</a></li>
<li><a href='#tab2'>Hot</a></li>
<li><a href='#tab3'>Kategori</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-tab' id='tab2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-tab' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>

Saya hanya mengganti semua element widget dan sidebar dengan main. Baiklah abaikan saja kode diatas itu saya tidak mau berlama-lama lagi langsung saja sobat praktekan sendiri saja. :D

Kita masuk tahap pemasangan.

Ikuti lanngkah-langkah berikut ini:

Login ke akun Blogspot sobat,
Klik Design/Rancangan >> Edit HTML

untuk antarmuka tampilan baru blogger tentu kalian sudah paham.

Cari kode ]]></b:skin> kemudia letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/*Start Tabber CSS main*/
.tabs-main{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:14px}
.tabs-main li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-main li:first-child{margin:0}
.tabs-main li a{color:#fff; background:#0066B3; padding:4px 5px; display:block; text-decoration:none; text-transform:uppercase; letter-spacing:1px; font:bold 11px Trebuchet MS;text-align:center;}
.tabs-main li a:hover,.tabs-main li a.tabs-main-current{background:#FF6600; color:#FFF;text-decoration:none}
.tabs-main-content{background:none; border:4px solid #FF6600; padding:5px;}
.tabviewsection2{margin-top:10px;padding-bottom:10px;}
/*Tabber CSS Code main End*/

kemudian cari kode </head> letakkan kode dibawah ini tepat di atasnya

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

jika pada template sobat sudah ada kode jQuery tersebut sebaiknya jangan di tambahkan atau sobat juga bisa mengganti kode jQuery yang lama dengan yang ini.

Ok kita lanjutkan, cari kode <div id='main-wrapper'> atau 'main-wrapper'>
letakkan kode berikut ini tepat dibawah kode tersebut:

<div class='tabviewsection2'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(".tabs-main-content-tab").hide();
                $("ul.tabs-main-tab li:first a").addClass("tabs-main-current").show();
                $(".tabs-main-content-tab:first").show();

                $("ul.tabs-main-tab li a").click(function() {
                    $("ul.tabs-main-tab li a").removeClass("tabs-main-current a");
                    $(this).addClass("tabs-main-current");
                    $(".tabs-main-content-tab").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='tabs-main tabs-main-tab'>
<li><a href='#tab10'>POSTING</a></li>
<li><a href='#tab20'>KATEGORI</a></li>
<li><a href='#tab30'>ARSIP</a></li>
</ul>
<div class='tabs-main-content tabs-main-content-tab' id='tab10'>
<b:section class='main' id='maintab10' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div class='tabs-main-content tabs-main-content-tab' id='tab20'>
<b:section class='main' id='maintab20' preferred='yes'>
</b:section>
</div>

<div class='tabs-main-content tabs-main-content-tab' id='tab30'>
<b:section class='main' id='maintab30' preferred='yes'>
</b:section>
</div>
</div>

Kemudian, cari kode <b:section class='main' id='main' showaddelement='no'> perhatikan kode berikut ini:

<b:section class='main' id='main' showaddelement='no'/>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

</div>

lihat kode yang berwarna kuning apakah sama dengan kode yang ada pada template sobat, kalau sama hapus kode warna kuning tersebut. karena saya sudah memasukan kode tersebut pada script diatas, apabila kodenya berbeda dengan kode yang warna biru pada script diatas silahkan ganti dengan kode pada template sobat.

Langkah terakhir, jangn lupa sobat pratinjau terlebih dahulu untuk mengetahui berhasil atau tidaknya. jika berhasil silahkan klik Simpan Template

Keterangan: untuk merubah warna tab, border, background, ukuran dan jenis font silahkan sobat kreasikan sendiri pada kode CSS diatas..

sobat juga bisa mengganti judul tab dan juga bisa menambah jumlah tab. perhatikan saja kode tab10 dan maintab10 dan setrusnya, yang penting pada saat penmbahan tab, ID tab dan ID maintab harus berbeda dengan ID tab tab yang lainya.

Contoh penambahan tab, coba perhatikan kode dibawah ini:

<li><a href='#tab40'>judul tab</a></li>
....
...

<div class='tabs-main-content tabs-main-content-tab' id='tab40'>
<b:section class='main' id='maintab40' preferred='yes'>
</b:section>
</div>

Untuk menambah widget silahkan sobat tambahkan sendiri.
Sekian saja tips dari saya semoga bermanfaat. jika ada yang tidak di mengerti silahkan tanyakan lewat komentar. Keep Smile :D

Judul: Membuat Halaman Posting dalam Tab View jQuery; Ditulis oleh Unknown; Rating Blog: 5 dari 5