Langsung ke konten utama

Tab Menu untuk Blogger

Untuk hal berikut ini,sebenarnya merupakan requestnya dari sahabatku “MINANGKABAU” yang minta saya menampilkan bagaimana sih membuat TAB MENU seperti layaknya yang ada pada Blog yosaadi.blogspot.com ini .kepada semua sahabat yang sudah mengetahui hal ini,saya mohon juga sarannya bila nanti dalam penguraian bagaimana cara membuat TAB MENU ini bila masih kurang ya. saya sebetulnya mendapatkan ilmunya dari pinginbelajar. Namun entah kenapa sobat tersebut ketika saya liat kembali sudah tak mempergunakan SCRIPT tersebut lagi.

Oh ya sekedar info saja bila kita menggunakan Script javascript ini biasanya loading blog kita akan bertambah berat dari biasanya.Coba nanti sobat cek saja loading pagenya sebelum dan sesudah menggunakan TAB MENU ini ya..

Langkah Pertama :
1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head> 

{ sebaiknya bila menggunakan kode script js apapun diletakkan disini juga ya ,spt readmore otomatis,related article dll }
6. Persis sebelum kode tersebut, pastekan script di bawah ini
<script src=http://h1.ripway.com/rangminang/tabview.jstype='text/javascript'/>

{ atau sobat ganti dengan alamat hosting sobat sendiri,ditakutkan mungkin saja di kemudian hari saya sudah tak menggunakan layanan ini }


7. Cari lagi di dalam template anda kode ]]></b:skin>


8. Persis sebelum kode tersebut, pastekan script di bawah ini


div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; }
div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; }
div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; }
div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; }
div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; }
div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }


9. Klik Simpan Template

Langkah Kedua :
1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan ke dalam kolom Konten script di bawah ini


<div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #999999;">
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
<a>Judul 4</a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">

masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 1

</div>
</div>
<div class="Page">
<div class="Pad">


masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 2

</div>
</div>
<div class="Page">
<div class="Pad">

 

masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 3

 

</div>
</div>
<div class="Page">
<div class="Pad">

masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 4

 

</div>
</div>

</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>

 

7. Klik Simpan

8. Silahkan dilihat ,Apakah berhasil ?? pasti berhasil ya..

nb.

bila sobat ingin menambahkan judul atau mengurangi ,silahkan diubah saja pada

<a>Judul xx</a>

dan

<div class="Page">
<div class="Pad">

masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul  xx 

 

</div>
</div>


bila sobat tak mau menggunakan layanan file hosting seperti yang saya gunakan disini,sobat masih bisa kok langsung memasukkan script berikut ini pada </head>

function tabview_aux(TabViewId, id)

{

var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;

while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;

var i = 0;

do

{

if (Tab.tagName == "A")

{

i++;

Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";

Tab.className = (i == id) ? "Active" : "";

Tab.blur();

}

}

while (Tab = Tab.nextSibling);

// ----- Pages -----

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);

}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

Tag Technorati: {grup-tag}

Komentar

  1. Tips yang menarik boss. Pengen buat sama yang ada di blog ini takutnya di anggap copy paste. :D Lagi pula aku terlalu malas untuk ngedit2 template lagi. Habis kemarin sempat hilang sebelum di back up. hik..Salam Kenal.

    BalasHapus
  2. saya beralih tempat hostingnya ke http://belajarblog.googlecode.com/files/tabview.js

    BalasHapus

Posting Komentar

Silahkan berkomentar ya..saya berharap sobat dapat memberikan saran dan komentarnya disini..Terimakasih.

Postingan populer dari blog ini

2 Cara Untuk mengembalikan hilangnya menu tab di task manager windows

Suatu saat ada saja kemungkinan Task Manager di komputer kita mengalami kehilangan menu tabnya sehingga yang tampil hanya TASK(processes)nya saja .dimana tab yang lainnya seperti Application, performance,networking dan usersnya tidak tampil ketika mengaktifkan task manager tersebut.Task Manager yang merupakan bawaan windows ini merupakan suatu aplikasi yang menampilkan informasi secara rinci tentang kinerja komputer dan aplikasi yang berjalan, proses dan penggunaan CPU ( Central Prosessing Unit ) , melakukan informasi muatan dan memori, aktivitas jaringan dan statistik, log-in pengguna, dan sistem pelayanan. Task Manager juga dapat digunakan untuk menetapkan prioritas proses, prosesor affinitas, secara paksa menghentikan proses, dan mematikan, Aktifkan Ulang, hibernasi atau log off dari Windows.Biasanya kalau menu tab pada task manager ini hilang disebabkan oleh virus yang bisa dikembalikan bisa dengan 2 cara yang saya ketahui ,yaitu :1. Melalui GPEDIT  ,langkahnya seperti dibawah ini…

Rumah Gadang dan maknanya

Tak adil rasanya kalau saya tak menampilkan artikel tentang Rumah Gadang yang merupakan ciri Khas dari Suku Minangkabau yang banyak makna terkandung didalam bangunan Rumah Gadang ini.Apalagi saya menggunakan nama blog ini ada embel-embel minangnya.

Rumah Gadang merupakan ciri khas Rumah Adat Minangkabau (Sumatra Barat), yang berfungsi sebagai tempat tinggal keluarga besar dan pusat kegiatan orang yang sedarah dan seketurunan dari kerabat matrilinial baik kegiatan ekonomi dan sosial maupun kegiatan budaya, dikepalai oleh seorang Tungganai (Mamak) dan sebagai syarat berdirinya suatu nagari di Minangkabau, dengan arsitektur bentuk atap bergonjong (berbentuk tanduk kerbau).

Rumah Gadang dibangun dengan bergonjong dimana semakin keatas semakin runcing, agar air mudah meluncur dan atap tahan lama walaupun terbuat dari injuk. Gonjong atap Rumah Gadang terdiri dua pola, yaitu gonjong Rumah Gadang Pola Koto Pialang (Aristokrat) terdiri dari 3 gonjong, 3 gonjong kanan , 1 gonjong depan dan 1 gon…

CMOS CHECKSUM BAD atau selalu setting BIOS setiap menghidupkan Komputer

Seiring dengan kita terus menggunakan komputer PC atau Laptop kita lambat laun ,adakalanya akan tampil saat booting ada pesan kalau kita harus menekan tombol F1 untuk run setup atau F2 untuk ke posisi default setinggan BIOS. Namun nyatanya setelah kita menyetting ulang konfigurasi BIOS ,setelah kita mematikan komputer dan ketika menghidupkan PC/Laptop lagi akan tampil posisi semula kembali. Bingung bagaimana solusinya ? sebaiknya diteruskan membacanya. he he he..biar tuntas semuanya.Kita kenali dulu apa itu BIOS ? = Basic Input Output System, merujuk kepada kumpulan rutin perangkat lunak yang mampu melakukan hal-hal berikut:Inisialisasi (penyalaan) serta pengujian terhadap perangkat keras (dalam proses yang disebut dengan Power On Self Test, POST) Memuat dan menjalankan sistem operasi Mengatur beberapa konfigurasi dasar dalam komputer (tanggal, waktu, konfigurasi media penyimpanan, konfigurasi proses booting, kinerja, serta kestabilan komputer) Membantu sistem operasi dan aplikasi dal…