17 marca 2010

24. Zakładki w opisie chomika

Dla wielu, będzie to wydarzenie na które czekali z niecierpliwością. Dziś opiszę metodę, skrypt, który wykorzystamy do zrobienia specjalnych zakładek w chomikuj.pl na swojej stronie głównej. Przykład takiego zastosowania znajdziesz na profilach: adam-as, aisha80, Dobry.film. Zauważ tak jakby dodatkowe menu na górze opisu strony (przyciski). Pozwala to na zamieszczanie dodatkowych informacji, jakby na specjalnych podstronach, na które wchodzimy bez przeładowania strony. Jest to o wiele lepsze rozwiązanie niż przewijany z boku strony suwak, który pojawia się przy dużej ilości informacji na naszej stronie powitalnej.

Artykuł dedykuję osobom, które przynajmniej w podstawowy sposób, obyte są z podstawami html. Nie oznacza to, że początkujący nie znajdą tu nic dla siebie. Wręcz przeciwnie - spróbować nie zaszkodzi - przecież nic Ci się nie stanie ;-)

Zacznijmy od zrobienia sobie kopii zapasowej swojej strony, na wypadek, jak by coś poszło nie po naszej myśli. W tym celu, wejdź w edycję swojego profilu



kliknij w przycisk HTML



i skopiuj sobie DOKŁADNIE CAŁY kod jaki tam zobaczysz. Następnie wklej go do "Notatnika" i zapisz na swoim twardym dysku. Notatnik posiada każdy użytkownik Windowsa. Aby go uruchomić, wejdź w menu START / Wszystkie programy / Akcesoria / Notatnik. Tak zapisany plik, będzie naszą kopią zapasową. Jeżeli coś nam nie wyjdzie, wystarczy z powrotem wkleić kod zapisany w notatniku do edycji swojego profilu.

Będąc w edycji swojego profilu, wymazujemy cały kod jaki obecnie mieliśmy i wklejamy ten, który jest poniżej:

<script type="text/javascript"><!--
/*SKRYPT YETII - dostosowanie na potrzeby CHOMIKA, przygotował chomik adam-as. OPIS JAK ZAIMPLEMENTOWAĆ YETII NA CHOMIKA znajduje się na BLOGU http://poradnikchomika.blogspot.com - Yetii - Yet (E)Another Tab Interface Implementation,version 1.4,http://www.kminek.pl/lab/yetii/,Copyright (c) 2007-2008 Grzegorz Wojcik,Code licensed under the BSD License: http://www.kminek.pl/bsdlicense.txt*/function Yetii(){this.defaults={id:null,active:1,interval:null,wait:null,persist:null,tabclass:'tab',activeclass:'active',callback:null,leavecallback:null};this.activebackup=null;for(var n in arguments[0]){this.defaults[n]=arguments[0][n]};this.getTabs=function(){var a=[];var b=document.getElementById(this.defaults.id).getElementsByTagName('*');var c=new RegExp("(^|\\s)"+this.defaults.tabclass.replace(/\-/g,"\\-")+"(\\s|$)");for(var i=0;i<b.length;i++){if(c.test(b[i].className))a.push(b[i])}return a};this.links=document.getElementById(this.defaults.id+'-nav').getElementsByTagName('a');this.show=function(a){for(var i=0;i<this.tabs.length;i++){this.tabs[i].style.display=((i+1)==a)?'block':'none';this.links[i].className=((i+1)==a)?this.defaults.activeclass:''}if(this.defaults.leavecallback&&(a!=this.activebackup))this.defaults.leavecallback(this.defaults.active);this.activebackup=a;this.defaults.active=a;if(this.defaults.callback)this.defaults.callback(a)};this.rotate=function(a){this.show(this.defaults.active);this.defaults.active++;if(this.defaults.active>this.tabs.length)this.defaults.active=1;var b=this;if(this.defaults.wait)clearTimeout(this.timer2);this.timer1=setTimeout(function(){b.rotate(a)},a*1000)};this.next=function(){this.defaults.active++;if(this.defaults.active>this.tabs.length)this.defaults.active=1;this.show(this.defaults.active)};this.previous=function(){this.defaults.active ;if(!this.defaults.active)this.defaults.active=this.tabs.length;this.show(this.defaults.active)};this.gup=function(a){a=a.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");var b="[\\?&]"+a+"=([^&#]*)";var c=new RegExp(b);var d=c.exec(window.location.href);if(d==null)return null;else return d[1]};this.parseurl=function(a){var b=this.gup(a);if(b==null)return null;if(parseInt(b))return parseInt(b);if(document.getElementById(b)){for(var i=0;i<this.tabs.length;i++){if(this.tabs[i].id==b)return(i+1)}}return null};this.createCookie=function(a,b,c){if(c){var d=new Date();d.setTime(d.getTime()+(c*24*60*60*1000));var e="; expires="+d.toGMTString()}else var e="";document.cookie=a+"="+b+e+"; path=/"};this.readCookie=function(a){var b=a+"=";var d=document.cookie.split(';');for(var i=0;i<d.length;i++){var c=d[i];while(c.charAt(0)==' ')c=c.substring(1,c.length);if(c.indexOf(b)==0)return c.substring(b.length,c.length)}return null};this.tabs=this.getTabs();this.defaults.active=(this.parseurl(this.defaults.id))?this.parseurl(this.defaults.id):this.defaults.active;if(this.defaults.persist&&this.readCookie(this.defaults.id))this.defaults.active=this.readCookie(this.defaults.id);this.activebackup=this.defaults.active;this.show(this.defaults.active);var f=this;for(var i=0;i<this.links.length;i++){this.links[i].customindex=i+1;this.links[i].onclick=function(){if(f.timer1)clearTimeout(f.timer1);if(f.timer2)clearTimeout(f.timer2);f.show(this.customindex);if(f.defaults.persist)f.createCookie(f.defaults.id,this.customindex,0);if(f.defaults.wait)f.timer2=setTimeout(function(){f.rotate(f.defaults.interval)},f.defaults.wait*1000);return false}}if(this.defaults.interval)this.rotate(this.defaults.interval)};
</script>
</p>
<!-- TUTAJ POCZATEK MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU -->
<div id="tab-container-1">
<ul id="tab-container-1-nav">
<a href="#tab1">Strona glówna</a> <a href="#tab2">Podstrona 2</a> <a href="#tab3">Podstrona 3</a> <a href="#tab4">Podstrona 4</a> <a href="#tab5">Podstrona 5</a>
</ul>
<!-- TUTAJ KONIEC MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU -->
<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<div id="tab1" class="tab">
TRESC DLA STRONY 1
</div>
<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111--> <!--222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222-->
<div id="tab2" class="tab">
TRESC DLA STRONY 2
</div>
<!--222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222--> <!--333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333-->
<div id="tab3" class="tab">
TRESC DLA STRONY 3
</div>
<!--333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333--> <!--444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444-->
<div id="tab4" class="tab">
TRESC DLA STRONY 4
</div>
<!--444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444--> <!--555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555-->
<div id="tab5" class="tab">
TRESC DLA STRONY 5
</div>
<!--555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555-->
</div>
<p>
<script type="text/javascript"><!--
var tabber1 = new Yetii({ id: 'tab-container-1' });
// --></script>
</p>


Po wklejeniu naciskamy "Aktualizuj"



i zapisujemy zmiany



Powinieneś zobaczyć taki oto efekt:



Jeżeli nie widzisz tego, powtórz wszystkie czynności od początku. Pamiętaj, że wklejany kod musi być w całości co do każdego znaku jaki tam jest.
Spójrz teraz jak działa efekt naszej pracy. Klikaj w niebieskie linki Strona główna, Podstrona 2, Podstrona 3, itd.. Po każdym kliknięciu, zmieni się zawartość naszej strony głównej. Dla przykładu, wpisałem tam tekst TREŚĆ DLA STRONY 1, TREŚĆ DLA STRONY 2 itd. Wszystkie linki w menu muszą działać!.

O co chodzi w kodzie?

Teraz zabierzmy się za edycję naszego kodu.
Ponownie wchodzimy do edycji naszego profilu jak opisałem to wyżej. Dla wygody, aby nasz wzrok nie zgłupiał, kod został specjalnie oznaczony tzw. komentarzami html. Komentarz, czyli opis danego miejsca oznaczony jest w następujący sposób:

Dla MENU (górne linki):
<!-- TUTAJ POCZATEK MENU MENU MENU MENU MENU MENU MENU -->
Tutaj znajdują się wszystkie linki do naszych podstron 1,2,3,4,5 czyli nasze MENU.
<!-- TUTAJ KONIEC MENU MENU MENU MENU MENU MENU MENU -->


Dla podstron:
<!--11111111111111111111111111111111111111111111111-->
Całość dotycząca strony głównej, czyli podstrona 1. To tutaj wpisujemy to, co chcemy mieć na swojej stronie głównej. Dokładne miejsce w którym możesz wstawiać swoje rzeczy, oznaczyłem tekstem "TRESC DLA STRONY 1". Na miejsce tego tekstu, możesz sobie wstawić np. cały wcześniejszy kod, który masz zapisany w notatniku!
<!--11111111111111111111111111111111111111111111111-->



<!--22222222222222222222222222222222222222222222222-->
Tutaj dodajesz swoje teksty, obrazki lub cokolwiek chcesz dla podstrony 2 w miejsce tekstu "TRESC DLA STRONY 2"
<!--22222222222222222222222222222222222222222222222-->



<!--33333333333333333333333333333333333333333333333-->
Tutaj dodajesz swoje teksty, obrazki lub cokolwiek chcesz dla podstrony 2 w miejsce tekstu "TRESC DLA STRONY 3"
<!--33333333333333333333333333333333333333333333333-->


... i analogicznie dla podstron 4 i 5.

Menu:
Linki w menu możesz dostosować według własnych potrzeb - pogrubić, pochylić, podkreślić, a nawet zastąpić tekst obrazkiem, który wcześniej sobie przygotujesz. Sposoby formatowania tekstu, oraz wstawiania obrazków, opisałem w lutym 2010r. Zapoznaj się dokładnie z podstawami tam zawartymi, jeżeli masz trudności z językiem html.

Uwaga! Wielkość stron!
Na pewno ciekawi Cię, jak ustalić wielkość (długość) każdej z podstron. Nie musisz tego robić, bowiem wielkość ta jest ustalana na podstawie pierwszej strony (strony głównej). To właśnie wysokość tej strony zdefiniowana wypełnioną przez Ciebie zawartością, będzie wykorzystana do całej reszty podstron. Nie można ustalić odrębnej wysokości dla każdej z nich, ponieważ niemożliwym było by wtedy zastosowanie mechanizmu wczytywania bez przeładowania strony. Staraj się zatem wypełnić swoje strony tak, aby nie zostawiać pustych miejsc na stronach 2,3,4,5.

Chcę zlikwidować resztę podstron...
Jeżeli nie masz na razie pomysłu na to co umieścić na pozostałych podstronach, możesz je w prosty sposób usunąć. Zacznijmy od linków w górnym menu. Znajdują się one pomiędzy komentarzem "MENU" o czym pisałem wyżej. Spróbujmy zatem usunąć linki do podstron 3,4,5

Usuwamy zatem te linijki:

<a href="#tab3">Podstrona 3</a> - dla podstrony numer 3
<a href="#tab4">Podstrona 4</a> - dla podstrony numer 4
<a href="#tab5">Podstrona 5</a> - dla podstrony numer 5

oraz same podstrony które znajdują się pomiędzy komentarzem oznaczony cięgiem 3 (trójek), 4 (czwórek) i 5 (piątek). Nie usuwaj jednak samych znaczników komentarzy, czyli tych ciągów liczb! Usuń tylko to, co jest pomiędzy nimi. Być może kiedyś będziesz chciał(a) dodać sobie kolejne podstrony i mając pozostawione znaczniki komentarzy, będziesz wiedział(a) w którym miejscu zaczyna się dana podstrona.


Dla podstrony nr 3, usuwamy wszystko to, co jest oznaczone kolorem:
<!--33333333333333333333333333333333333333333333333-->
<div id="tab3" class="tab">
TRESC DLA STRONY 3
</div>

<!--33333333333333333333333333333333333333333333333-->


Dla podstrony nr 4, usuwamy wszystko to, co jest oznaczone kolorem:
<!--44444444444444444444444444444444444444444444444-->
<div id="tab4" class="tab">
TRESC DLA STRONY 4
</div>

<!--44444444444444444444444444444444444444444444444-->


Dla podstrony nr 5, usuwamy wszystko to, co jest oznaczone kolorem:
<!--55555555555555555555555555555555555555555555555-->
<div id="tab5" class="tab">
TRESC DLA STRONY 5
</div>

<!--55555555555555555555555555555555555555555555555-->


Po usunięciu linków i odpowiadających im podstron, pozostaną nam tylko Strona 1 i 2. Aby z powrotem przywrócić usunięte podstrony, wystarczy wkleić usunięte kody. Możesz je sobie skopiować z powyższych przykładów.


UWAGA bardzo ważne!

Jeżeli już dostosujesz sobie stronę i uzupełnisz swoimi informacjami pamiętaj, aby skopiować cały kod i wkleić go w edycję podfolderów swojego chomika!



Jest to czynność, którą bezwzględnie musisz wykonać! Inaczej, jeżeli ktoś trafi u Ciebie bezpośrednio do jakiegoś folderu poza stroną główną, zobaczy pustą stronę. Dopiero jak wejdzie do folderu głównego (z Twoją nazwą), zobaczy Twoje podstrony. Aby tego uniknąć pamiętaj, żeby kod w opisie na stronach podfolderów, był zawsze identyczny jak w opisie Twojego profilu!. Jeżeli wprowadzisz jakieś nawet najdrobniejsze zmiany w swoich tekstach na stronie głównej, za każdym, razem kopiuj cały kod i wklejaj go w edycję podfolderów.



Zmieniamy MENU

Teraz, skoro już masz na swoim profilu zakładki, zechcesz pewnie ulepszyć swoje menu. Jestem w trakcie przygotowywania paru szablonów (gotowców). Poniżej będę sukcesywnie dodawał kolejne menu. Aby zmienić wygląd naszego menu, należy usunąć wszystko co mamy pomiędzy komentarzami i zastąpić kodem dla menu, które chcemy wykorzystać.

<!-- TUTAJ POCZATEK MENU MENU MENU MENU MENU MENU MENU -->
Usuwamy bardzo dokładnie WSZYSTKO co jest pomiędzy znacznikami MENU i wklejamy tu wybrany dla naszego menu nowy kod.
<!-- TUTAJ KONIEC MENU MENU MENU MENU MENU MENU MENU -->

Gotowe szablony do wklejenia pomiędzy komentarz MENU:

1.
<div id="tab-container-1" style="text-align: left;">
<ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="6" width="680" background="http://img694.imageshack.us/img694/6401/banqt.jpg">
<tr>
<td width="120" align="center"><span style="font-size:16px;font-weight:bold;color:#ffffff;"> </span></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>


2.
<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img405.imageshack.us/img405/8576/banrk.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>


3.
<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img687.imageshack.us/img687/7289/ban3f.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>


4.
<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img38.imageshack.us/img38/4392/ban4k.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>


5.
<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img211.imageshack.us/img211/8765/ban5i.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>


6.
<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img245.imageshack.us/img245/2006/ban6.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>


7.
<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img709.imageshack.us/img709/3944/ban7.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;"
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>


Następne "menu" już wkrótce...

Oto wybrane przeze mnie osoby, którym udało się wykorzystać omawiany skrypt i style MENU. Jeżeli nie radzisz sobie z poprawnym wstawieniem skryptu, spróbuj poprosić o pomoc:

bogussztyc
renatahal

Link nie działa? Poinformuj mnie o tym!


Pamiętaj!

Jeżeli tylko zmienisz wygląd swojego menu skopiuj CAŁY KOD i wklej go również w edycję podfolderów swojego chomika!



Jest to czynność, którą bezwzględnie musisz wykonać! Inaczej, jeżeli ktoś trafi do Ciebie przez link kierujący do wybranego folderu, a nie strony głównej, nie zobaczy wówczas Twojego MENU, lecz tylko zwykły opis PODFOLDERÓW!.



--
Aby z powodzeniem wykorzystywać ten skrypt, naucz się przynajmniej podstawowych elementów formatowania tekstu za pomocą języka html. Jak już wspomniałem, podstawy opisałem w lutym 2010r. Są to nie zmieniające się, zawsze aktualne informacje. Jeżeli mimo to, z czymś sobie nie radzisz odnośnie wyżej opisanego skryptu, pozostaw swoje uwagi w komentarzach niniejszego wpisu.

Skrypt, którego implementację tu opisałem, daje Ci ogromne możliwości zwiększenia atrakcyjności Twojego profilu. Nie bój się eksperymentować, próbuj, ćwicz, i pamiętaj o robieniu kopii zapasowych Twojego kodu, na wypadek jak by coś poszło nie tak, jak byśmy sobie tego życzyli :-)

20 komentarze:

Sławek pisze...

Mam pytanie odnośnie tego kodu - czy możliwe jest dodanie także kodu tła dla strony głównej chomika, tak aby tło było widoczne na stronie głównej oraz po kliknięciu na kolejne podstrony bez przeładowania?

adam-as pisze...

Tak - tworzysz tabelę w podstronie i kolor nadajesz parametrem background-color:#numer koloru. To tak pokrótce. O tworzeniu tabel będzie osobny artykuł.

Anonimowy pisze...
Ten komentarz został usunięty przez administratora bloga.
Anonimowy pisze...

Mam pytanie odnośnie tego kodu, chcę ją powiększyć co jest możliwe. Chciałem się zapytać który parametr w tym kodzie trzyma ją z lewej strony i nie pozwala jej przesunąć i wyśrodkować.

adam-as pisze...

Za zmianę szerokości odpowiada parametr WIDTH. Należy jednak pamiętać o tym, że jak zostanie zmieniony z domyślnego, nie będą Ci pasowały już moje style graficzne.

Zostały one przygotowane do szerokości (width) 680px.

Aby wyśrodkować menu, musisz dodać w sekcji TABLE parametr align: center

Jeżeli nie wiesz jak to zrobić pytaj dalej.

Anonimowy pisze...

Możecie mi coś poradzić,
ponieważ zrobiłam wszystko jak jest wyżej napisane czyli skopiowałam cały kod HTML wkleiłam zamiast starszego kodu
pokazały mi się linki do menu na głównej stronie chomika jednak jak wejdę w któryś to otwiera się w nowej karcie
co z tym mogę zrobić??

adam-as pisze...

Źle skopiowałaś kod. Nad każdym okienkiem z kodem, jest link "view plain". Naciskasz ten link i wtedy zaznaczasz WSZYSTKO co tam jest i wklejasz na chomika jak opisałem w instrukcji.

Anonimowy pisze...

Jest możliwość powiększenia tabeli do 8 kolumn? Próbowałam podwoić tabele ale się nie udało:D zmieniałam wszystkie 5 na 6 łącznie z tab5 na tab6 i nie wyskakiwała 6 kolumna. Podwójna tabela nie dawała rezultatów (otwierała się druga w nowym oknie) Robię to po raz pierwszy i nie wiem czy takie coś się da zrobić:D

kampik pisze...

Cały długi dzień walczyłam z kodem, w pewnym momencie pojawiły się schody, ale wreszcie się udało :)

Wielkie dzięki za tę lekcję.

No i nieskromnie pochwalić się muszę efektem :) http://chomikuj.pl/?page=279730

Anonimowy pisze...

Witam :)

Mam problem tego typu wybrałam szablon 5, skopiowałam cały kod, wkleiłam tam gdzie potrzeba ale nie wiem gdzie wkleić to co chce mieć na każdej podstronie.Gdy wklejam obrazek który chcę mieć na podstronie 1 nachodzi on mi na cały szablon.

Casper__ pisze...

U mnie wszystko zadziałało - ale trochę jeszcze to poprzerabiałem - Efekt możecie zobaczyć na mojej stronce - http://chomikuj.pl/Casper__

adam-as pisze...

Bardzo ładnie! - brawo za inicjatywę i chęć nauki!

Anonimowy pisze...

Co mam zrobic bo jak wklejam kod wyszukiwarki jest wszystko w porzadku a pozniej gdy chce dodac licznik to wyszukiwarka ginie i pojawia sie licznik.Co mam zrobic zeby byla i wyszukiwarka oraz licznik jednoczenie.

adam-as pisze...

Kolego ale to chyba nie ten wątek. Tutaj jest post o zakładkach, a nie wyszukiwarkach. Niewyraźnie widać?

Kruchy :) pisze...

Podane chomiki za przykład nie działają.
Link prowadzi na stronę główną ;)

matpila pisze...

super działa jak należy :D dzięki.

Anonimowy pisze...

Witam, mam problem z tymi zakładkami. U ciebie w podglądzie jest pokazane że po kliknięciu w "Strona Główna" wyświetla ci się tylko "Treść Dla strony 1"

U mnie jest takie coś:
"Treść dla strony 1"
"Treść dla strony 2"
"Treść dla strony 3"
"Treść dla strony 4"

Gdy klikam w stronę główną wyświetlają się wszystkie te cztery teksty.
Gdy klikam w stronę 2 wyswietla się treść dla strony 2, a gdy klikam w stronę 3, wyświetla się treść dla strony 3 itd. Co mam zrobić ? BARDZO proszę o odpowiedź ; (

Anonimowy pisze...

Czy jest możliwość, aby każda podstrona miała inny kolor tła? Jak to zrobić? Z góry ślicznie dziękuję za odpowiedź. ;)

Anonimowy pisze...

Witam. Ja w sprawie wzśrodkowania tego kodu. Na html sie znam bo sam robie menu ale nie takie :) Wiem że jest podany parametr tylko gdzie go dokladnie wkleić?

Pozdrawiam :)

Anonimowy pisze...

Witam. Kod dziala. Wszystko ladnie pieknie, zmodyfikowalem go sobie lecz mam pytanie. Gdzie wstawic to "algin:center". Dokladnie w ktorym miejscu :)

Prześlij komentarz