tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - 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: Propozycje Pomoc - 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

niedziela, 20 marca 2016

Gadżety nad postem cz. 1

Element: HTML/JavaScript
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%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
table - tworzy tabelę
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
#easy

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'>
<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>
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.


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:40px;
margin-left:-0px;
margin-right:40px;}
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.

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

11 komentarzy:

  1. Moge poprosić o wysłanie szablonu TOMORROW (z sugą) na e-maila: suzana@vp.pl? Wersję bez zdjęcia w stopce. Z góry bardzo dziękuję ;)

    OdpowiedzUsuń
  2. Hej, mogłabym prosić o wysłanie szablonu STARDUST ( ten z poglądu 2) na e-maila: white.december.97@gmail.com? Byłabym naprawdę bardzo wdzięczna. Z góry dziękuję!

    OdpowiedzUsuń
  3. Witam, pobrałam szablon the lifetime of adventure na bloga http://samiferr.blogspot.com/
    dziękuję <3

    OdpowiedzUsuń
  4. Tyler, zostajesz moim guru <3

    OdpowiedzUsuń
  5. No i wreszcie jakiś artykuł na moim poziomie zaawansowania ;) Ilekroć czytam fachowe blogi, niewiele jestem w stanie z nich wyciągnąć, a Ty piszesz w ciekawy, przystępny sposób, ekstra. Póki co, web design to dla mnie czarna magia, ale obiecałam sobie, że w tym roku nadrobię zaległości :)

    OdpowiedzUsuń