Element: HTML/JavaScript
Stopień trudności: xxxx
Czas wykonywania: ~20 minut
Stopień trudności: xxxx
Czas wykonywania: ~20 minut
Robiłam ostatnio szablon bazując trochę na drugim szablonie głównym, jaki pojawił się dawno temu na Graphical Thoughts. Szablon ten miał 4 gadżety nad postem 2x2. Dokładnie pamiętam jak męczyłam się, aby je stosownie ustawić i po paru godzinach męk w końcu się udało ( Całość jednak była słodko gorzka, bo gadżety rozjeżdzały się przy innych rozdzielczościach ). Od tamtej pory minęło jakieś 4 lata i w ciągu tego czasu udało mi się znaleźć dwa proste rozwiązania tego problemu! Dzisiaj o opcji numer 1, która jest użyta na blogu w tej chwili.
Opcja numer jeden ma jednak pewną wadę. Nie ma możliwości dodawania gadżetów proponowanych/stworzonych przez bloggera. Jedyne co możemy zrobić to stworzyć nasz własny content.
Krok 0 - towrzenie tabeli
Do stworzenia, w tym przypadku, trzech kolumn, będziemy używać table. Być może część z Was się z tym spotkała, część nie. Do rzeczy. Przykład tabeli, źródło
<table style="width:100%">table - tworzy tabelę
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
tr - tworzy nam rzędy
td - tworzy kolumny
Czyli powyższa tabela ma dwa rzędy i po 3 kolumny w każdym z nich. Co wygląda mniej więcej tak.
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Krok 1 - tabela w gadżecie / podgląd
Na początku tworzymy gadżet HTML/JavaScript i dodajemy kod ( jako przykład użyję części kodu użytego na GT ).<table cellspacing='10'>Przy pomocy table tworzymy tabelę, tr - daje nam możliwość stworzenia jednego rzędu kolumn i na końcu 3 kolumny dzięki td. Tekst szary to tekst przykładowy, to co znajdzie się w tekście kolumn.
<tr>
<td valign='top'><span class='dat'>Pytania</span> - Jeśli macie jakieś pytania lub uwagi, to zapraszam na <a href='http://ask.fm/sleepingtyler'>nasz profil ask.fm.</a> Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować.</td>
<td valign='top'><span class='dat'><a href='http://graphical-thoughts.blogspot.dk/p/propozycje_30.html'>Propozycje</a></span> - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: <b><a href='http://graphical-thoughts.blogspot.com/p/propozycje_30.html'>Propozycje</a></b>
</td>
<td valign='top'><span class='dat'>Pomoc</span> - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge</td>
</tr>
</table>
Krok 2 - pozycjonowanie gadżetu / podgląd
Na podglądzie, tło białe pod blogiem stworzone jest za pomocą content-inner i nie było dokonywanych tam większych zmian. Jednak widzimy, że gadżet nieco przechyla się na prawą stronę. Duża jest prawdopodobność, że tak będzie w większości przypadków, jeśli ktoś będzie probówał korzystać z instrukcji. Rozwiązaniem na to jest:#HTML2 {margin-top gwarantuje nam przestrzeń 'od góry', margin-left:0px - jest nieruszony, bo chciałam stworzyć wrażenie 'paddingu' dla całego gadżetu i zrównoważyć trochę masę tekstu w tabeli przez dużo miejsca naokoło. Margin-right:40px sprawia, że prawa granica gadżety jest dalej od prawej strony.
margin-top:40px;
margin-left:-0px;
margin-right:40px;}
Krok 3 - style / podgląd
Content został stworzony, teraz czas na stylowanie całej tabeli. Chcemy stworzyć efekt gadżetu, więc nasz kod będzie opierać się na td, czyli każdej z kolumn ( w tym przypadku również gadżetów ).#HTML2 td {border:1px solid #ccc; margin-right:10px; padding:10px 10px 10px 10px; font:8px 'roboto'; text-transform:uppercase; font-weight:normal; text-align:center; letter-spacing:2px; color:#777;background:#f5f5f5;}
Krok 4 - Ostatnie poprawki
Jeśli w tabeli umieścicie linki, tytuły każdego z gadżetów, je również elegancko wystylizujcie, używając td a, td i czy td b!
Mój końcowy efekt znajdziecie tutaj.
Komentarz
Cześć Miśki! Instrukcja ta weszła mi w plan przygotowany wcześniej, ale robiąc tutorialowe szablony zauważyłam, że dość często korzystam z tego sposobu, więc może komuś się przyda! Opcja numer dwa już niedługo, niestety tam troszkę grzebania w kodzie.
I szablony przy okazji instrukcji wychodzą tak szybko i płynnie, że zaraz nazbiera mi się tego pokaźna suma i cóż tym potem zrobić....#thuglife
