20 Juli 2010

Pin It

Membuat Tab View Pada Blogspot

Membuat Tab View Pada Blogspot - khamardos blog

Postingan ini merupakan permintaan sobat Zikri yang merupakan salah satu teman saya di SMAN 1 Pekanbaru yang selalu ingin berkonsultasi dan memberi saya ide tentang postingan blog saya, untuk sobat Zikri, ini merupakan permintaan anda dan mohon maaf jika terlambat dan lama mempostingnya !!!

Apa Fungsi Tab View ?
Sobat Blogger semua tentu tahu tantang Tab View. Jika belum maka gambar disamping merupakan salah satu contoh Tab View yang merupakan tutorial yang akan saya beri kepada sobat blogger semua !!! Jika anda masih bingung seperti apa Tab View ini, Silahkan lihat pada sidebar sebelah kanan blog saya, Sidebar :: Information :: tersebutlah salah satu contoh Tab View yang terpasang pada blog saya saat ini !!!

Lalu apa fungsi dari Tab View ini ? Selain menu yang berada pada menu blog kita, tab view juga merupakan salah satu solusi bagaimana seseorang blogger yang mengunjungi blog kita akan mudah memperoleh banyak informasi di blog kita !!! Selain itu, Tab View dapat memperhemat lokasi baik pada bagian sidebar blog kita untuk memberikan lebih banyak lagi informasi kepada pengujung blog kita !!!

Bagaimana Cara Membuatnya ?
Ok, Jika Tidak mau pikir panjang, ayo dan simak pembuatannya di bawah ini !!!
1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
    Back up Template dengan cara Mengklik : Download Template Lengkap
    Setelah itu, beri tanda cek pada .
 
3. Copy kode CSS dibawah ini,
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Note : Pada tulisan berwarna merah silahkan anda rubah dan sesuaikan dengan blog anda, untuk kode warna bisa dilihat di Kode Warna HTML
4.  Setelah itu, Paste kode tersebut diatas kode ]]></b:skin>

5. Copy kode Di bawah ini :

<script type='text/javascript'>
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); }
</script>
6. Paste Kode tersebut diatas kode </head>

7. Setelah itu,
  • Simpan template anda.
  • Kemudian pilih tab Elemen Halaman --> Tambah Gadget --> HTML/JavaScript 
8. Copy dan Paste Kode dibawah ini :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan:
- Text yang berwarna Biru  adalah ukuran tinggi dan lebar tabview. (Silahkan anda sesuaikan dengan blog anda)
- Kode yang berwarna Hijau yang muncul di Menu utama (Menu Atas).
- Kode yang berwarna Kuning adalah isi dari Tab View. Kamu bisa mengisinya dengan link, gambar, banner, script dll.


9. Lalu Klik Simpan, dan lihat blog kamu sekarang !!!


" SELAMAT BERKREASI SOBAT "
Share To lintasberita.com | Khamardos Blog

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

25 comments:

Klik Untuk Lihat Komentar

Azik on 20 Juli 2010 20.09 mengatakan...

Nahh.. ini dia yang ku tunggu-tunggu..
thanks buanget ya mufied....
I waiting for your next post.. :X

Azik on 20 Juli 2010 20.56 mengatakan...

Mufied, aku dah coba tutorialmu & hasilnya aku dah selesai membuat tab view di blog-ku, jangan lupa kunjungi ya.. ;)

Mufi_ed on 21 Juli 2010 11.31 mengatakan...

@ Azik
Ok, Semangat terus sobat !!!

Rchymera|Blog™ on 23 Juli 2010 10.52 mengatakan...

Wech...wech...wech...maknyus tabviewnya,btw mohon maaf br sempat mampir coz mlsnya minta ampun nich klo disuruh buka blog dan slm sukses buat loe fied semoga tutornya makin ditambahin yg baru2 hehehe...:D

Laksamana Embun on 23 Juli 2010 11.15 mengatakan...

Thanks infonya sobat, ini mau saya psang diblog saya yang saunya... thanks ya

Muhammad Sidhiq Setyawan on 25 Juli 2010 00.03 mengatakan...

makasih sob,,,bwt informasinya

yopy rinaldi on 30 Juli 2010 19.27 mengatakan...

iya sob..
:)
alhamdullah sehat...
pengen exis lagi ne di blog skian lama gag ngurus blog ini...
hhee..

thanx komentnya sob..

Akmal Fahrurizal on 30 Juli 2010 19.31 mengatakan...

thanks for info.. Bro.. :)

Mufi_ed on 30 Juli 2010 19.40 mengatakan...

@ Muhammad Sidhiq Setyawan Sama2 sobat !! smoga bermanfaat !!!

@ Laksamana Embun
Ok OK !! semoga bermanfaat !!

@ Rchymera|Blog™
Ok OK !!!!
hanya saja lagi bingung nyari info baru !!!
Rencana mau bahas SEO !!
Tpi mo bnding dulu !!! soalnya apakah kedepan pG blog saya mningkat atau tidak, jika tetap maka saya akan berambisi memposting tentang seri SEO !!!

Mufi_ed on 30 Juli 2010 19.41 mengatakan...

@ Akmal Fahrurizal
Sama2 sob !! semoga bermanfaat !!

@ yopy rinaldi
Ok OK !!! Semangat yach sob !!!

mixedfresh on 30 Juli 2010 21.01 mengatakan...

aku belum pasang ni, thanks infonya sob

Andri Reborn on 30 Juli 2010 22.01 mengatakan...

bagus lah... bisa lebih inget lagi car pembuatanku yg dlu

yoyokr on 31 Juli 2010 12.59 mengatakan...

oeklah klw beg beg beg gitu segera trial tab view biar seperti wordpress yah....salam sukses gan...

Zona Indonesia on 31 Juli 2010 13.50 mengatakan...

Tips yang sangat menarik dan berguna sekali... aku dakan mencobanya.. klo pada WP apakah bisa diterapkan..? Trims :)

Mufi_ed on 31 Juli 2010 20.22 mengatakan...

@ yoyokr
OK OK !!! kalau dapat, segera di post !!!

@ Andri Reborn
hmmm... sip sip !!!

@ mixedfresh
OK sob, semoga bermanfaat !!!

@ Zona Indonesia
hmmmm... Ok dech sob !! di cari solusi bagaimana menggunakannya di WP !!!
Insya allah kalau dapat langsung di post !!!

investasi online terbaru dan tercepat on 31 Juli 2010 20.23 mengatakan...

klo ane sich lebih demen ma tab vie yang tanpa edit html ato yang pake jquery. but ini juga nice info kang. salam kenal ya:)]

Mufi_ed on 31 Juli 2010 21.06 mengatakan...

@ investasi online terbaru dan tercepat
Ok dech sob !! msukan yang bagus !! Thnks yach !!!

bunga raya on 1 Agustus 2010 03.04 mengatakan...

kunjungan malam bos apa kabar

JOLA76 on 2 Agustus 2010 20.33 mengatakan...

mantab infonya, bisa menghemat tempat

four dreams on 3 Agustus 2010 12.24 mengatakan...

oke brader, gue save yaaa :D

Mufi_ed on 9 Agustus 2010 21.18 mengatakan...

@ four dreams
Ok OK !!! silahkan !! smoga bermanfaat !!!

@ JOLA76
Yupt bener banget sob !!!

@ bunga raya
Thanks sudah berkunjung sobat !!! kbar saya baik2 saja kok !!!
anda gmana ?

zetiyo on 11 Agustus 2010 12.16 mengatakan...

kebetulan saya mo coba, mksh infonya. n followed ditunggu follow balik.

My Home on 7 September 2010 00.03 mengatakan...

maksih gan infonya sudah di pasang diblog sya.. :D
sukes buat blog nya y gan!! :)

Mufi_ed on 9 September 2010 16.16 mengatakan...

@ zetiyo
Semoga bermanfaat sob !!!

@ My Home
Thanks sobat !!!

obat alami hepatitis on 3 Mei 2011 09.49 mengatakan...

informasinya keren sekali nih , makasih banyak ya gan

:: Komentar Anda ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Black Nero is Designed by Ipietoon | Tweaking by Mufied