Jak "zakręcić" stronami?

Element: Strony ( PageList1 )
Stopień trudności: xxxx
Czas wykonywania: 20 minut

   Ach, naprawdę dziękuję za tyle miłych słów pod ostatnim postem. Miło się to czyta, a uwagi niektóre wzięłam do serca i być może zacznę wcielać je w życie. To jednak zależy od Was przede wszystkim. Propozycje jakie dostałam:
Propozycja 1: Szablony wolne wspomniane prze Inssy. Są to po prostu szablonami w stylu tym co na blogu, bez magicznego wyglądu; proste, minimalistyczne, pamiętnikowe;
Propozycja 2: Zamówienia, popularne w całej blogsferze. Wszyscy wiemy o co chodzi, tak myślę.
Jeśli któraś z propozycji rusza kogoś serduszko piszcie w komentarzach, w tagboardzie ( proponowana przeze mnie opcja ), jak chcecie to nawet mi na maila wysyłajcie: bizarre1309@gmail.com

Wracamy do tematu: Jak zakręcić stronami?
      Naprawdę w bardzo, bardzo łatwy sposób.
Sądziłam, że to nie przejdzie - nie wiadomo z jakiego powodu - jednakże pokazało mi, że działać może i faktycznie działa i robi przy tym całkiem niezłe wrażenie. Kwestia jest chyba tylko jedna, potrzeba ciut więcej miejsca ( albo i nie ); podlega to jeszcze dyskusji. Na 51% karty muszą być jako karty na górze, z linkami po boku to raczej nie pójdzie.

Cały ten post ( i wykon ) jest na temat tego  ( i dzięki temu ) krótkiego cholerstwa:

transform: rotate(0deg) ;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
-ms-transform: rotate(0deg) ; 

Jeśli chcemy faktycznie "zakręcić" stronami tworzymy nowy gadżet HTML/JavaScript (UWAGA! Nie jest to konieczne. Kod można dodać także dla Stron - PageList - jednak w tej instrukcji stworzymy nowy gadżet ), w którym umieszczamy nasze linki ( moje linki to klasa "jak", jednak można ją modyfikować. Więcej o tworzeniu tego typu menu tu):

<a class="jak" href="http://graphical-thoughts.blogspot.com/search/label/szablon">Szablony</a>
<a class="jak" href="http://graphical-thoughts.blogspot.com/search/label/tutorial">Tutoriale</a>
<a class="jak" href="http://graphical-thoughts.blogspot.com/search/label/artyku%C5%82y">Artykuły</a>
<a class="jak" href="http://graphical-thoughts.blogspot.com/search/label/informacja">Ogłoszenia</a>

klikamy szablon > dostosuj > zaawansowane > dodaj arkusz css

a.jak:link, a.jak:visited, a.jak:active{text-align:center;padding:1px;font: normal 7pt arial; color: #bada8e;  text-transform:uppercase; background:#fbfbfb;width:100px; height:55px;padding-top:45px;border-radius:50%; margin-bottom: 2px; display:inline-block; border:1px solid #eee;transform: rotate(0deg);
-webkit-transform: rotate(0deg);}

Oczywiście nie jest powiedziane, aby się tego trzymać, możemy dorzucić wszystko co nam przyjdzie do głowy - text-transform; border; display; transition! ; a także odrzucić niektóre propozycje. Najważniejsza jest formułka podkreślona i pogrubiona.

Aby, jednak nasze skręcenie się dopełniło, potrzeba jeszcze chwilki. Należy dodać do odpowiedniego selektora tj. do tego, który odpowiedzialny jest za to wszystko, czyli a.jak:hover

a.jak:hover { color:#fff; background:#7edbd3;transform:rotate(360deg);
-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);}

W nawias możemy wpisać każdą wartość od 0deg ( brak obrotu ) do 360deg (pełny obrót ).
Spróbujcie dorzucić każdą propozycje do swoich linków i zobaczcie co z tego wyjdzie, jak nie - kombinujcie, zmieniajcie aż w końcu wyjdzie, a wyjdzie. :)

Szablony Tutoriale Artykuły Ogłoszenia

Dalej, skoro to czytacie to już zdobyliście moje serduszko i wiedzcie, że Was po prostu kocham i chciałabym tu i teraz, pisząc te słowa mieć do Was prośbę. 

To jest blog dla Was i tylko dla Was, ja tu tylko sprzątam, od czasu do czasu też post napiszę i chciałabym wiedzieć co męczy Waszą osobę na tym cholernym bloggerze. Czego chcielibyście się dowiedzieć. Chodzi tu m.in o to, aby Wam pomóc, rozwiać Wasze wątpliwości, inaczej napiszę: jeśli nie chce Wam się szukać w internecie tego i tego - piszcie, będę szczęśliwa! :>