RajaKadal Forum
Would you like to react to this message? Create an account in a few clicks or log in to continue.


RAJAKADAL FORUM - Tempat Berbagi Info, Ilmu dan Diskusi
 
IndeksIndeks  PortalPortal  Latest imagesLatest images  PencarianPencarian  PendaftaranPendaftaran  Login  

Share | 
 

 Cara Membuat Menu Tab View di Blog

Topik sebelumnya Topik selanjutnya Go down 
PengirimMessage
RajaKadal
Admin Jancok
Admin Jancok
RajaKadal

Jumlah posting : 532
Join date : 14.08.10
Age : 39
Lokasi : Depan Si Kokom

Cara Membuat Menu Tab View di Blog Empty
PostSubyek: Cara Membuat Menu Tab View di Blog   Cara Membuat Menu Tab View di Blog EmptyWed 27 Jul - 12:22

Menu Tab View biasa digunakan oleh para blogger yang ingin mempercantik dan menghemat space pada halaman webnya. Berikut ini merupakan salah satu tutorial sederhana yang juga banyak di share oleh para blogger di blog mereka.

Contoh Gambar Menu Tab View pada sebuah Blog


Cara Membuat Menu Tab View di Blog Tabview

Tutorial Membuat Menu Tab View :

1. Login ke blogger kemudian pilih menu "Layout --> Edit HTML"

2. Cari kode berikut ( Tekan CTRL+F untuk mempermudah pencarian) ]]></b:skin>

3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau ke dalam tag CSS.

Spoiler:

***Text berwarna merah merupakan keterangan untuk melakukan editing menu tab view sesuai keinginan Anda.

5. Step selanjutnya yaitu memasang kode berikut ini sebelum kode </head>

Code:
<script type='text/javascript'>

function tabview_auxundefinedTabViewId, id)
{
  var TabView = document.getElementByIdundefinedTabViewId);

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

  var Tabs = TabView.firstChild;
  while undefinedTabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i  = 0;

  do
  {
    if undefinedTab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switchundefined'"+TabViewId+"', "+i+");";
      Tab.className = undefinedi == id) ? "Active" : "";
      Tab.blurundefined);
    }
  }
  while undefinedTab = Tab.nextSibling);

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

  var Pages = TabView.firstChild;
  while undefinedPages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if undefinedPage.className == 'Page')
    {
      i++;
      if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = undefinedi == id) ? 'block' : 'none';
    }
  }
  while undefinedPage = Page.nextSibling);
}

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

function tabview_switchundefinedTabViewId, id) { tabview_auxundefinedTabViewId, id); }

function tabview_initializeundefinedTabViewId) { tabview_auxundefinedTabViewId,  1); }

</script>

<script type='text/javascript'>tabview_initializeundefined'TabView');
</script>

6. Save

=========================
Next Step ==>
=========================

1. Cari menu Element yang terdapat pada blog
2. Pilih menu "Add a Gadget" --> "HTML/Javascript" (tata letak bisa disesuaikan)
3. Masukan script berikut :
Code:
<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

Tab 1.2

Tab 1.3

</div>
</div>

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

Tab 2.2

Tab 2.3

</div>
</div>

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

Tab 3.2

Tab 3.3

</div>
</div>

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

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

Keterangan tambahan :
Code:
<div class="Pages" style="width: 350px; height: 250px;">
untuk mengatur lebar dan panjang kolom

Code:
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
Merupakan Menu Utama

Code:
<div class="Page">
<div class="Pad">
Tab 3.1

Tab 3.2

Tab 3.3

</div>
</div>
Merupakan isi dari tav view yang bisa ditambahkan dengan link, gambar, dsb.


Selesai.


Terakhir diubah oleh RajaKadal tanggal Sun 9 Oct - 16:07, total 1 kali diubah
Kembali Ke Atas Go down
http://red-creatives.com
pale
Kopral Kadal
Kopral Kadal
pale

Jumlah posting : 21
Join date : 20.06.11
Age : 50
Lokasi : Ende

Cara Membuat Menu Tab View di Blog Empty
PostSubyek: Re: Cara Membuat Menu Tab View di Blog   Cara Membuat Menu Tab View di Blog EmptySun 9 Oct - 11:22

wah contoh gambar tab viewnya udah expired tuh den di photobucket

update gambarnya dunk den....
:roll:
Kembali Ke Atas Go down
http://palesport.wordpress.com
RajaKadal
Admin Jancok
Admin Jancok
RajaKadal

Jumlah posting : 532
Join date : 14.08.10
Age : 39
Lokasi : Depan Si Kokom

Cara Membuat Menu Tab View di Blog Empty
PostSubyek: Re: Cara Membuat Menu Tab View di Blog   Cara Membuat Menu Tab View di Blog EmptyTue 11 Oct - 15:40

udah pak guru.. kira'' tampilannya seperti itu 8)
Kembali Ke Atas Go down
http://red-creatives.com
pale
Kopral Kadal
Kopral Kadal
pale

Jumlah posting : 21
Join date : 20.06.11
Age : 50
Lokasi : Ende

Cara Membuat Menu Tab View di Blog Empty
PostSubyek: Re: Cara Membuat Menu Tab View di Blog   Cara Membuat Menu Tab View di Blog EmptyFri 14 Oct - 0:11

den, aku sekarang lagi coba buatin blog untuk sekolah nih
I have a problem now...

Pingin buat Horizontal Menu di blog ku, udah aku coba dari beberapa tutorial yang ada bahkan udah pernah pakai CSS Generator v4.1 juga tetap ga bisa pas, selalu ada masalah bila update HTML-nya...

bisa bantu ga den,
eh iya sebagai informasi, blogku pada blogspot.com dengan menggunakan template minima baru...
Kembali Ke Atas Go down
http://palesport.wordpress.com
RajaKadal
Admin Jancok
Admin Jancok
RajaKadal

Jumlah posting : 532
Join date : 14.08.10
Age : 39
Lokasi : Depan Si Kokom

Cara Membuat Menu Tab View di Blog Empty
PostSubyek: Re: Cara Membuat Menu Tab View di Blog   Cara Membuat Menu Tab View di Blog EmptySat 15 Oct - 10:09

Buat proses editing, ada baeknya dibackup dulu template-nya (di download) setelah itu, centang tulisan Expand Template Widget.

cari kode" berikut :
Code:
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

## ketik ctrl+f aja (biar lebih mudah) setelah itu masukin keyword yang tepat.. misalnya <b:includable id='description'>

setelah ketemu, copy paste kode di bawah ini :

Quote :
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>About Me</a></li>
<li><a href='URL 3'>Tutorial </a></li>
</ul>

Keterangan URL 1, URL 2,URL 3 bisa diganti dengan link tujuan, sementara home, about me, tutorial, bisa diganti dengan judul menu".

simpan template.. lalu lihat hasilnya.. 8)

kalo hasilnya malah berbentuk menu vertikal, pak guru bisa kembali ke menu edit HTML..

lalu cari kode berikut : ]]></b:skin>

setelah itu copy-paste kode css untuk menu horizontal di atas kode CSS tsb.

Code:
/*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}

keterangan : 8)

Quote :
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.

lalu ubah struktur yang pertama kali dibuat di menu edit HTML, menjadi seperti ini :

Code:
<div class="menuhor">
<ul>
<li><a href='URL 1'>home</a></li>
<li><a href='URL 2'>about me</a></li>
<li><a href='URL 3'>tutorial</a></li>
</ul>
</div>

dah itu save template kembali dan lihat hasilnya..

:drunken:
Kembali Ke Atas Go down
http://red-creatives.com
Sponsored content




Cara Membuat Menu Tab View di Blog Empty
PostSubyek: Re: Cara Membuat Menu Tab View di Blog   Cara Membuat Menu Tab View di Blog Empty

Kembali Ke Atas Go down
 

Cara Membuat Menu Tab View di Blog

Topik sebelumnya Topik selanjutnya Kembali Ke Atas 

 Similar topics

-
» Cara Membuat Spoiler di Blog
» Panduan Membuat Blog
» Cara Membuat Template Joomla 1.5
» Cara Menghilangkan Navigasi Bar Pada Blog
» Cara Membuat Spoiler di RajaKadal Forum
Halaman 1 dari 1

Permissions in this forum:Anda tidak dapat menjawab topik
RajaKadal Forum :: Kadal In Web & Design :: Kadalin Your Blog-
Navigasi: