OK : berawal dari temen daku :swt: yang penasaran bagaimana membuat daftar list seperti di blog daku ini : http://new-animecomsite.blogspot.com/2011/01/animanga-anime.html
ini adalah Tutuorial Blogger untuk membuat daftar list konten blog dengan sederhana namun sangat menakjubkan

kenapa menakjubkan ?
kalo dilihat, memang biasa biasa saja :swt: :hmm:tapi yag membuat menakjubkan adalah
sederhana namun tetap powefull
membuat konten tertata rapih
Hanya mengunakan 1 halaman

Sbenarnya daku pertama kepikiran buat ginian itu gara gara inet yang ssuper lemot
dan menghemat halaman

Samplehasil akhirnya : http://new-animecomsite.blogspot.com/2011/01/animanga-anime.html
Source dari blog New Animeomsite(punya daku :hihi)

Tanpa basa basi lagi dah :swt: capek juga banyak bicara :swt:
OK : Lets started

Pertama :
biasalah login logger
Klik dsign > Edit HTML
terus copas aje nih kode di bawah ane, sebelum </head>

Code:

<script type='text/javascript'>
//<![CDATA[
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>

OK udah kan ?

nah sekarang , copas lagi kode di bawah ini ,sebelum kode ]]></b:skin>

Code:

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */

text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* 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;
}

udah belum ? kalo belum ? terusin ...
kenape ? bingung ? nah kalo bingung meningan BAB dulu uat cari inspirasinya nyahahahaha . ok dah kalo gitu SIMPAN aje

OK nah sekarang tingal ke postingan
bisa gadjet /halaman /postingan,terserah ente lah
nah di postingan / hal /gandjet ..... masukin kode ini :

Code:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
</div>
<div class="Pages" style="width: 500px; width: 500px;">


<div class="Page">
<div class="Pad">
New Animecomsite A

Indie Game Maker ID A

Prodig A

</div>
</div>

<div class="Page">
<div class="Pad">
New Animecomsite B

Indie Game Maker ID B

Prodig B

</div>
</div>

<div class="Page">
<div class="Pad">
New Animecomsite C

Indie Game Maker ID C

Prodig C

</div>
</div>

<div class="Page">
<div class="Pad">
New Animecomsite D

Indie Game Maker ID D

Prodig D

</div>
</div>

<div class="Page">
<div class="Pad">
New Animecomsite E

Indie Game Maker ID E

Prodig E

</div>
</div>

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

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

OK dah , gitu lah samplenya silahkan coba ma

Enjoy

jangan lupa Cendolnya bang kalo bersedia :swt:

Enjoy

bikin listnya di kode yang buat postingan ato gadjet itu gan?
hmm,,, biar ane pelajarin dulu, ntar kalo bingung ane tanya langsung dah

btw, promosi yah, di kodenya kok ada 3 site familiar

iya gan ,
daftar listnya nanti di tulis di postinganya

emang promosi coz bingung mau ngisi apaan
yahahahahaahhaahah

Enjoy

hmm,, ane agak bingung dengan hasil tes ane gan
ngikutin itu semua tutorial (Tanpa ada editan sama sekali)
setelah ane klik "Pratinjau" di postingan yang keluar malah begini:

Spoiler:

Kalo insting ane sih bilang karena disana ada kode "a href" kalo engga salah, itu semua tab terbentuk dari banyak post ya?
jadi kita bikin banyak pos dulu gitu baru jadi satu

tapi kayaknya ane salah, entahlah

mohon pencerahannya

:hmm: gitu ya :hmm:
daku juga peprnanh ngalamin ginian :hmm:
kalo gak salah sih ini maslah di "Spasi" nya
di kode :

Spoiler:

pada kode di atas, banyak spasi kebawah yang harusnya ak gitu :swt: kenapa bisa gitu ?
kode dari daku sih gak gitu :swt: , tapi pas di Paste disini dan di kasih tag code :swt: jadi gitu :swt:
ok daku fix bntar
Ibi kode yang suda di perbaiki

Code:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>A</a><a>B</a><a>C</a><a>D</a><a>E</a>
</div>
<div class="Pages" style="width: 500px; width: 500px;">
<div class="Page">
<div class="Pad">
New Animecomsite A
Indie Game Maker ID A
Prodig A
</div>
</div>
<div class="Page">
<div class="Pad">
New Animecomsite B
Indie Game Maker ID B
Prodig B
</div>
</div>
<div class="Page">
<div class="Pad">
New Animecomsite C
Indie Game Maker ID C
Prodig C
</div>
</div>
<div class="Page">
<div class="Pad">
New Animecomsite D
Indie Game Maker ID D
Prodig D
</div>
</div>
<div class="Page">
<div class="Pad">
New Animecomsite E
Indie Game Maker ID E
Prodig E
</div>
</div>
</div>
</div>
</form>

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

Sory :soalnya langsung past gak liatdulu :swt:
ok sip

Note :
Pada penulisan ta nya , misal :A, ,C ... dst <<< jangan pake spasi kebawah (enter), langsung saja tulis di sampingnya
nah pada penulisan listnya, cukup spasi kebawah sekali (Enter sekali )

Uda mulai bener dikit gan
tapi masih ada yang eror

tab yang keluar cuma 3, padahal di contoh dikasi 5, terus semua list A - E masih jadi satu list gan, belum kepisah, gimana ini gan?

tab yang keluar cuma 3 ?
itu karena kurang lebar gan

ganti kode isini :

Spoiler:

pada bagian :

Code:

width: 98px; /* Lebar Menu Utama Atas */

ganti tuh, misal aja 500px :hmm:
ya terserah ikau aja

semua list masih nyatu ?
coba kasih ss nya

Enjoy

nice juga
btw, ini cuma buat blogger ?

Aegis wrote:

nice juga
btw, ini cuma buat blogger ?

Enggak juga
selain blogger juga bisa di gunain

Enjoy

Ane tahu kenapa cuma muncul 3 gan, sisanya muncul kebawah
setelah ane coba ganri 500 px, hasilnya malah satu tab misalnya tab A ukurannya jadi lebarrr banget
dan tab yg muncul, jadinya tinggal 1 tab A itu tadi

nih SSnya, sekalian ama list yg jadi satu

Spoiler:

gimana donk gan

Oh ya osryy salah code
yang di perbesar itu buka script yang di sono.... tapi di postinganya

code yang ini biarin aja gini :

Spoiler:

nah yang di ganti itu yang ii :

Spoiler:

pada bagian :

Quote :

<div class="Tabs" style="width: 300px;">

ganti angka 300 , jadi lebih gede, misal ya 500px

dan biar gampang daku udah buatin nih kode fix nya

Code:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 500px;">
<a>A</a><a>B</a><a>C</a><a>D</a><a>E</a></div>

<div class="Pages" style="width: 490px; height: 500px;">

<div class="Page">
<div class="Pad">
<span style="font-size: x-large;"><b>A</b></span>
New Animecomsite
Indie Game Maker ID
Prodig
</div>
</div>
<div class="Page">
<div class="Pad">
<span style="font-size: x-large;"><b>B</b></span>
New Animecomsite
Indie Game Maker ID
Prodig
</div>
</div>
<div class="Page">
<div class="Pad">
<span style="font-size: x-large;"><b>C</b></span>
New Animecomsite
Indie Game Maker ID
Prodig
</div>
</div>
<div class="Page">
<div class="Pad">
<span style="font-size: x-large;"><b>D</b></span>
New Animecomsite
Indie Game Maker ID
Prodig
</div>
</div>
<div class="Page">
<div class="Pad">
<span style="font-size: x-large;"><b>Z</b></span>
New Animecomsite
Indie Game Maker ID
Prodig
</div>
</div>
</div>
</div>
</form>

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

nah, kode yang baru ini baru work 100% gan

beneran ada code yang agan lupa tulis di

Spoiler:

yang mestinya

Spoiler:

apa yang beda dan baru?
bagian ini gan

Code:

<span style="font-size: x-large;"><b>A</b></span>

Satu pertanyaan terakhir gan
selama ini, itu tab engga bisa di-klik untuk ganti page
list uda pada kepisah-pisah

OH sip kalo uah work
yang baru hanya memerbaiki peltakan dan valueable nya aja bang
kalo yang

Quote :

<span style="font-size: x-large;"><b>A</b></span>

itu cuma tambahan doank, buat bedain, kalo lagi di tab menu tersebut gan

di hapus juga tak ape kok gan

Enjoy

satu hal yang masih belum work gan.
tab gabisa di klik untuk ganti page

dan satu hal yang lupa daku cantumin gan :swt:

dalam satu halaman
kita cuma bisa nampilin satu form tab iew gan
kalo lebih dari itu, tab nya gak bkala bisa di klik gan :hmm:

Enjoy

jadi gimana ini gan?
apa yang mesti ane ganti gan?

harusnya berhasil da itu udah fix :hmm:
kemunginan besar bentrok sama template nya :mm:
daku pernah lihat templae yang di pake dirimu :hmm: dan terlalu ribet utuk di pelajari :swt:

yaahhh...
sudah berjuang sejauh ini...

gimana ini ya,,,