-->

Minggu, 12 Desember 2010

Cara Membuat dan Pasang Tab View

posted by: daroef
Membuat sebuah tab view menggunakan sebuah javascript sederhana yang terpadu dengan kode CSS dan xHTML bisa menjadi sebuah pilihan yang sangat tepat bagi blogger untuk mengefektifkan halaman blog atau widget. Dengan lebar kolom widget yang tersedia, sebuah tab view mampu menjadi wadah yang cukup longgar (luas) karena mampu memuat beberapa kali lipat dari kapasitas lebar widget yang ada. Kemampuan lebih ini disebabkan tab view didesain mempunyai beberapa kolom di dalamnya, dengan luas setara (sama) dengan luas widget yang ada. Melalui sebuah selektor (tab), masing masing kolom dapat dibuka sehingga semua yang tersimpan di dalamnya diperlihatkan. Isi tiap kolom tab view ini bisa berupa daftar menu (posting), gambar/image ataupun hal yang lain.
Sebagai gambaran, di bawah ini adalah bentuk dari Tab View yang akan kita buat.
Javascript-1 Tab View :
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display  = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
</script>
Javascript-2 Tab View :
<script type="text/javascript">
tabview_initialize('TabView');
</script> 
 
Kode CSS Tab View :
 
 background-position:0 3px;
 padding-left:20px;
 font-family:Arial;
 color:#00CCFF;
 text-decoration:none;
 font-size:11px;
 }
div.TabView div.Pages div.Page a.tView:hover{
 background:url(Image-5.gif) no-repeat;
 background-position:0 3px;
 color:#FDC97B;
 text-decoration:underline;
 }
div.TabView div.Pages div.Page div.Pad{
 padding: 8px 5px;
 }
 
 
xHTML Tab View :
 
 
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>.::.Panduan.::. BloGGeR</a>
<a>.::.Tutorial.::. BloGGeR</a>
<a>Gambar-Image</a>
</div>
<div class="Pages" style="width: 310px; height: 250px;">
<div class="Page">
<div class="Pad">
<a class="tView" href="Link-1">Image Effects</a> <br />
<a class="tView" href="Link-2">Javascript Image Gallery</a> <br />
<a class="tView" href="Link-3">CSS Image Gallery</a> <br />
<a class="tView" href="Link-4">Zoom Image</a> <br />
<a class="tView" href="Link-5">Javascript Tooltip</a> <br />
<a class="tView" href="Link-6">CSS Tooltip</a> <br />
<a class="tView" href="Link-7">Opacity Effects</a> <br />
<a class="tView" href="Link-8">Tab View</a> <br />
<a class="tView" href="Link-9">Tab Content</a> <br />
<a class="tView" href="Link-10">Rollover</a> <br />
</div>
</div>
<div class="Page">
<div class="Pad">
<a class="tView" href="Link-1">Rujak Uleg Pakai Cendol</a> <br />
<a class="tView" href="Link-2">Bakso Goreng Sambal Tempe</a> <br />
<a class="tView" href="Link-3">Telor Kerbau Warna Hijau</a> <br />
<a class="tView" href="Link-4">Daging Gajah Bengkak</a> <br />
<a class="tView" href="Link-5">Es Soda Api</a> <br />
<a class="tView" href="Link-6">Nasi Goreng Daging Kucing</a> <br />
<a class="tView" href="Link-7">Sate Ular Makan Kodok</a> <br />
<a class="tView" href="Link-8">Mie Ayam Pakai Nasi</a> <br />
<a class="tView" href="Link-9">Nasi Kucing Tanpa Lauk</a> <br />
<a class="tView" href="Link-10">Es Jeruk Purut</a> <br />
</div>
</div>
<div class="Page">
<div class="Pad">
<img src="image-6.jpg" style="border:5px solid #666;" /><br />
<img src="Image-7.jpg" style="border:5px solid #666;" />
</div>
</div>
</div>
</div>
</form>
 
Langkah Pembuatan Tab View :
  1. Login to Blogger (Login ke Blogger)
  2. Setelah memasuki halaman Dasboard (Dasbor), KLIK link Layout (Design) atau Tata Letak (Rancangan).
  3. Yang sampeyan jumpai setelah langkah di atas adalah Page Element (Elemen Laman). KLIK link Edit HTML.
  4. BackUp Template (Amankan Template) dengan cara KLIK link Download Full Template (Download Template Lengkap), kemudian simpan file template di folder PC.
  5. Tetap di Halaman Edit HTML. Cari kode ]]></b:skin> » Gunakan Ctrl+F untuk mencari kode tersebut.
  6. Letakkan Kode CSS Tab View di atas kode ]]></b:skin> , sedang Javascript-1 Tab View di bawah kode ]]></b:skin>
  7. Sebelumnya ganti terlebih dahulu background image yang digunakan dalam kode CSS :
    8. Image-1.png = http://i40.tinypic.com/9abas8.png Image-2.gif = http://i48.tinypic.com/25asxzl.gif Image-3.jpg = http://i48.tinypic.com/n5hilv.jpg Image-4.jpg = http://i44.tinypic.com/95q8fq.jpg Image-5.gif = http://i44.tinypic.com/chrv9.gif
  8. Cari kode </body> » Gunakan Ctrl+F untuk mencari kode tersebut.
  9. Letakkan Javascript-2 Tab View di atas kode </body>
  10. SAVE Template/Simpan Template.
Lanjutkan dengan Langkah ke-2 :
  1. xHTML di simpan melalui penambahan widget dengan cara masuk ke Page Elemen (Elemen Laman), kemudian KLIK Add Gadget (Tambah Gadget), KLIK HTML/Javascript. Letakkan xHTML di box yang tersedia, dan lanjutkan dengan KLIK SAVE (Simpan).
  2. Beberapa kode xHTML yang harus di ganti adalah :
    - Judul Menu » .::.Panduan.::. BloGGeR, .::.Tutorial.::. BloGGeR dan Gambar-Image
    - Link Menu » Link-1 s/d Link-10
    - URL Gambar/Image » Image-6.jpg dan Image-6.jpg.
    - Nama Link Menu » Image Effects, Rujak Uleg Pakai Cendol dan beberapa yang lain.
  3. Sampeyan bisa mengganti setiap tab menu dengan bentuk yang berbeda. Tidak harus berupa daftar menu/posting atau gambar/image.
  4. Untuk merubah lebar dan tinggi tab view, ganti width:350px; dan height: 250px; pada kode :
    <div class=”Pages” style=”width: 310px; height: 250px;”>. Gantilah dengan ukuran yang sesuai dengan ruang widget yang tersedia. Saat mengganti tinggi dan lebar tab view di atas, sesuaikan juga width:100px; pada kode CSS :
    div.TabView div.Tabs a{
    ….
    ….
    width:100px;
    …
    …
    }
Catatan/Keterangan
  1. Panduan tentang cara mencari kode HTML menggunakan Ctrl+F dapat sampeyan buka dengan KLIK link di bawah ini :
  2. Panduan cara back-up template juga dapat diikuti dengan KLIK link di bawah ini :
  3. Supaya kode yang digunakan di template lebih ringkas, sebaiknya upload javascript-1 di javascript hosting. Gunakan linknya untuk menggantikan javascript-1 dalam bentuk :
    <script src=”TabView.js” type=”text/javascript”></script>
    4. Kode ini diletakkan seperti halnya cara di atas. Posisinya Di bawah kode ]]></b:skin>
  4. Bila sampeyan ingin mendapatkan javascript-1 yang sudah di upload dan tinggal pasang di blog, silahkan download dengan cara KLIK link download di bawah ini :
     5.DOWNLOAD DISINI



TUTORIAL INI DIAMBIL DARI BLOG 
di terbit kan oleh RCA di 13.44
Label:

0 boleh koment:

Posting Komentar

Langganan: Posting Komentar (Atom)
daroef
SELAMAT DATANG DI BLOG BOCAH LEBAKSIU KIDUL