Prodig - Komunitas Proyek Digital
Selamat datang di ProDig!
Di sini adalah tempat untuk berbagi proyek (game, seni, program, dan situs).
Di sini Anda juga bisa mendapatkan hal lainnya seperti permainan, berbagi karya, ilmu pengetahuan, kesenangan, dan sebagainya. :)

Ayo daftar lalu langsung login tanpa perlu konfirmasi email sama sekali :D!
Prodig - Komunitas Proyek Digital

Tempat untuk berbagi proyek digital : Situs, Game, Seni, Program
 
CalendarPortalHomeRulesSearchFAQMemberlistUsergroupsRegisterLog in
Welcome to the ProDig, Guest!

 
 

 [Tutorial Blogger] Amazing List Content with Tab View

View previous topic View next topic Go down 
AuthorMessage
KID_VX
Pencuri Hati
Pencuri Hati


Posts : 349
Chips : 3426
Power : 3
Join date : 2010-09-24
Quote : Now. My job is "Visual Effect Desainer
Badge :

PostSubject: [Tutorial Blogger] Amazing List Content with Tab View   
Sat Apr 23, 2011 3:31 pm


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 8)
membuat konten tertata rapih 8)
Hanya mengunakan 1 halaman 8)

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

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

Enjoy 8)

jangan lupa Cendolnya bang 8) kalo bersedia 8) :swt:

Enjoy 8)





Guest visit n' join on IGMID



Hai Guest :wave:
Jangan ragu-ragu untuk memberiku Cendol, dengan cara mengklik logo dibawah ini :D
daku akan sangat berterimakasih
Back to top Go down
View user profile
Als Strife
Decem


Posts : 21
Chips : 2280
Power : 0
Join date : 2010-11-10

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Sat Apr 23, 2011 5:29 pm


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



Back to top Go down
View user profile
KID_VX
Pencuri Hati
Pencuri Hati


Posts : 349
Chips : 3426
Power : 3
Join date : 2010-09-24
Quote : Now. My job is &quot;Visual Effect Desainer
Badge :

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Sat Apr 23, 2011 5:48 pm


iya gan :) ,
daftar listnya nanti di tulis di postinganya :)

emang promosi =)) coz bingung mau ngisi apaan =))
yahahahahaahhaahah

Enjoy 8)





Guest visit n' join on IGMID



Hai Guest :wave:
Jangan ragu-ragu untuk memberiku Cendol, dengan cara mengklik logo dibawah ini :D
daku akan sangat berterimakasih
Back to top Go down
View user profile
Als Strife
Decem


Posts : 21
Chips : 2280
Power : 0
Join date : 2010-11-10

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Sat Apr 23, 2011 6:27 pm


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 palu()

mohon pencerahannya



Back to top Go down
View user profile
KID_VX
Pencuri Hati
Pencuri Hati


Posts : 349
Chips : 3426
Power : 3
Join date : 2010-09-24
Quote : Now. My job is &quot;Visual Effect Desainer
Badge :

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Sun Apr 24, 2011 5:38 pm


:hmm: gitu ya :hmm:
daku juga peprnanh ngalamin ginian :hmm:
kalo gak salah sih ini maslah di "Spasi" nya :hm:
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 :) )





Guest visit n' join on IGMID



Hai Guest :wave:
Jangan ragu-ragu untuk memberiku Cendol, dengan cara mengklik logo dibawah ini :D
daku akan sangat berterimakasih
Back to top Go down
View user profile
Als Strife
Decem


Posts : 21
Chips : 2280
Power : 0
Join date : 2010-11-10

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Sun Apr 24, 2011 10:24 pm


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?



Back to top Go down
View user profile
KID_VX
Pencuri Hati
Pencuri Hati


Posts : 349
Chips : 3426
Power : 3
Join date : 2010-09-24
Quote : Now. My job is &quot;Visual Effect Desainer
Badge :

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Sun Apr 24, 2011 11:10 pm


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





Guest visit n' join on IGMID



Hai Guest :wave:
Jangan ragu-ragu untuk memberiku Cendol, dengan cara mengklik logo dibawah ini :D
daku akan sangat berterimakasih
Back to top Go down
View user profile
Aegis
Ngacay Idiotically
Ngacay Idiotically


Posts : 80
Chips : 2896
Power : 12
Join date : 2010-09-23
Age : 22
Badge :

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Mon Apr 25, 2011 5:57 pm


nice juga :D
btw, ini cuma buat blogger ? :D





Back to top Go down
View user profile
KID_VX
Pencuri Hati
Pencuri Hati


Posts : 349
Chips : 3426
Power : 3
Join date : 2010-09-24
Quote : Now. My job is &quot;Visual Effect Desainer
Badge :

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Mon Apr 25, 2011 7:22 pm


Aegis wrote:
nice juga :D
btw, ini cuma buat blogger ? :D

Enggak juga :)
selain blogger juga bisa di gunain :)

Enjoy 8)





Guest visit n' join on IGMID



Hai Guest :wave:
Jangan ragu-ragu untuk memberiku Cendol, dengan cara mengklik logo dibawah ini :D
daku akan sangat berterimakasih
Back to top Go down
View user profile
Als Strife
Decem


Posts : 21
Chips : 2280
Power : 0
Join date : 2010-11-10

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Mon Apr 25, 2011 8:16 pm


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

nih SSnya, sekalian ama list yg jadi satu
Spoiler:
 

gimana donk gan hmm()
nonton()



Back to top Go down
View user profile
KID_VX
Pencuri Hati
Pencuri Hati


Posts : 349
Chips : 3426
Power : 3
Join date : 2010-09-24
Quote : Now. My job is &quot;Visual Effect Desainer
Badge :

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Tue Apr 26, 2011 2:11 pm


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>





Guest visit n' join on IGMID



Hai Guest :wave:
Jangan ragu-ragu untuk memberiku Cendol, dengan cara mengklik logo dibawah ini :D
daku akan sangat berterimakasih
Back to top Go down
View user profile
Als Strife
Decem


Posts : 21
Chips : 2280
Power : 0
Join date : 2010-11-10

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Tue Apr 26, 2011 5:13 pm


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



Back to top Go down
View user profile
KID_VX
Pencuri Hati
Pencuri Hati


Posts : 349
Chips : 3426
Power : 3
Join date : 2010-09-24
Quote : Now. My job is &quot;Visual Effect Desainer
Badge :

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Tue Apr 26, 2011 5:33 pm


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





Guest visit n' join on IGMID



Hai Guest :wave:
Jangan ragu-ragu untuk memberiku Cendol, dengan cara mengklik logo dibawah ini :D
daku akan sangat berterimakasih
Back to top Go down
View user profile
Als Strife
Decem


Posts : 21
Chips : 2280
Power : 0
Join date : 2010-11-10

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Tue Apr 26, 2011 5:36 pm


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



Back to top Go down
View user profile
KID_VX
Pencuri Hati
Pencuri Hati


Posts : 349
Chips : 3426
Power : 3
Join date : 2010-09-24
Quote : Now. My job is &quot;Visual Effect Desainer
Badge :

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Tue Apr 26, 2011 5:43 pm


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





Guest visit n' join on IGMID



Hai Guest :wave:
Jangan ragu-ragu untuk memberiku Cendol, dengan cara mengklik logo dibawah ini :D
daku akan sangat berterimakasih
Back to top Go down
View user profile
Als Strife
Decem


Posts : 21
Chips : 2280
Power : 0
Join date : 2010-11-10

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Tue Apr 26, 2011 6:41 pm


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



Back to top Go down
View user profile
KID_VX
Pencuri Hati
Pencuri Hati


Posts : 349
Chips : 3426
Power : 3
Join date : 2010-09-24
Quote : Now. My job is &quot;Visual Effect Desainer
Badge :

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Thu Apr 28, 2011 8:42 pm


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:





Guest visit n' join on IGMID



Hai Guest :wave:
Jangan ragu-ragu untuk memberiku Cendol, dengan cara mengklik logo dibawah ini :D
daku akan sangat berterimakasih
Back to top Go down
View user profile
Als Strife
Decem


Posts : 21
Chips : 2280
Power : 0
Join date : 2010-11-10

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Fri Apr 29, 2011 6:55 pm


yaahhh...
sudah berjuang sejauh ini...

gimana ini ya,,,



Back to top Go down
View user profile
Vsio
Centum


Posts : 205
Chips : 2856
Power : 1
Join date : 2011-03-04
Location : Between Existence and Anti-Existence
Quote : As long I exist, I shall influence the flow of existence.

PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Sun May 08, 2011 6:29 am


Btw, itu templatenya bikin sendiri? :hmm:



Back to top Go down
View user profile http://www.stitched.netai.net
Sponsored content




PostSubject: Re: [Tutorial Blogger] Amazing List Content with Tab View   
Today at 5:18 am





Back to top Go down
 

[Tutorial Blogger] Amazing List Content with Tab View

View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
Prodig - Komunitas Proyek Digital  :: Project Chamber :: Site Creation :: Site Education-
Jump to: