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

poniedziałek, 12 sierpnia 2013

West Coast Adventure



West Coast Adventure
dodany:12.08.2013
autor: Tyler
Baza:Szablon Simple
Przed pobraniem należy zapoznać się z regulaminem podanym poniżej;
podgląd ( słaba jakoś ze względu na plik gif )


Pobierz ( pastebin.com )



Informacje techniczne:

Układ ramek w szablonie
Konfiguracja postów


W końcu pierwszy szablon po przemianie Graphical Thoughts. Jak widać dosyć prosty, jednak ujawniający pewną moją słabość, a mianowicie surfing, który był motywem przewodnim ( tak wiem, nigdzie tego cholerstwa tu nie ma ). Pan, a raczej chłopak z nagłówka to surfer, który brał udział w Europejskim finale King of The Groms 2012 ( nazwiska niestety nie znam ), zdjęcie oczywiście znaleznione na flickrze w galeriach Quicksilver. Szablon o tej tematyce pewnie dlatego, że już niedługo i Pro France, i King of The Groms 2013, na co z niecierpliwością czekam. Ot tak jeszcze napiszę od serca, że ten kto lubi blond włoski u piegowatych panów z fajną klatą to niech się bierze za surferów. Wybór cholernie duży! :D A KOTG to skarbnica młodych talentów ( zawodnicy do 17 lat ), dlatego wszystkim polecam! ;)

Dobra koniec paplaniny. Kwestie techniczne, bardzo ważne kwestie techniczne, o których nie można zapomnieć.  Na sam początek przepraszam też za gifa, którego jakość powala na kolana, jednak ukazuje on jako taki hover elementów na blogu, czego na obrazku png nie zobaczycie. Zresztą na gifie nie ma pokazanego płynnego przejścia...

ŁAPKI PRECZ OD KODÓW dla niepobierających szablonu! 


Nagłówek, obrazkowa część szablonu
Kwestia ważna jak nie najważniejsza. W nagłówku znajduje się zdjęcie, tytuł bloga i jego opis. Oczywiście wszystko bez ustawienia automatycznego coby Wam w życiu za dobrze nie było. Wchodzimy w szablon > edytuj kod HTML i szukamy jakiejkolwiek części poniższego kodu. Wtedy jak już "przeniesiemy się na miejsce" modyfikujemy kod tak jak poniżej:
 <center>
     <div class='panel'>
       <div class='text'>
         <div style='font-family:roboto condensed; text-transform:uppercase; letter-spacing:2px;font-size:20pt;'> West Coast Adventure</div><br/>
         Maecenas sed felis erat. Mauris rutrum, tortor sed auctor mollis, turpis sem ultrices ligula, in lobortis turpis justo ac lacus. Aliquam auctor nibh sit amet lorem rutrum quis consequat eros commodo. Donec fermentum ante quis lorem lobortis mattis. Ut lobortis tortor ut urna suscipit id iaculis felis mollis. Sed vel luctus diam. Praesent quis massa sed urna fringilla eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eget erat eros, a commodo purus. Nulla posuere ullamcorper euismod. Vestibulum vel lectus arcu.</div>
</div></center>

Czcionką czerwoną mamy pojawiający się tytuł na obrazku. Jeśli mogę prosić to nie za długi, bo możecie zepsuć koncepcję.  Natomiast tekst niebieski to opis, który możecie umieścić. Dla poprawnego wyświetlania jest to wymagane, ale nie do końca konieczne, także Wasz wybór.

Zmiana obrazka to kwestia zmiany w kodzie CSS. Selektor, który odpowiada za tło to .panel:
.panel { background:#fff; width:800px; background-image:url(http://farm8.staticflickr.com/7264/7858256198_a1424976d5_c.jpg);height:250px;margin-top:35px;margin-bottom:-75px;margin-left:-48px;background-position:CENTER center;border:10px solid #f9f9f9;}
Fioletowy element do adres/link do obrazka. Wymagane jest 800px, jak widać i wysokość 250px .

Nawigacja - główne linki
Omawiane setki tysięcy razy. Zaklinam Was jednak, nie dodawajcie standardowych kart, bo tego w szablonie nie przewiduję. Zamiast tego, jak to w zwyczaju już mam, tworzymy gadżet HTML/JavaScript i do gadżetu wpisujemy:
<a class='menu' href='http://graphical-thoughts.blogspot.com/'>Strona Główna</a>
<a class='menu' href='http://graphical-thoughts.blogspot.com/'>Autorka</a>
<a class='menu' href='http://graphical-thoughts.blogspot.com/'>Polecani</a>
<a class='menu' href='http://graphical-thoughts.blogspot.com/'>Bohaterowie</a>
<a class='menu' href='http://graphical-thoughts.blogspot.com/'>Obserwuj!</a>
Ta cudna śliweczka to adres url do strony, którą chcemy dodać, a czerwony to nazwa linku.  Oczywiście możecie dodawać dużo więcej linków, jeśli tylko zechcecie, wszystko na tej samej zasadzie co powyżej.

Spis Treści ( lub dodatkowe linki )
Sytuacja taka sama jak powyżej ( w przypadku nawigacji ), zmienia nam się tylko klasa linku. Jak w tytule, w podglądzie mamy spis treści, jednak nic nie stoi na przeszkodzie, aby wykorzystać klasę w inny sposób np. jako linki do znajomych, do ulubionych stron w sieci, czy to innego twittera czy ask.fm:
<a class='box' href='http://graphical-thoughts.blogspot.com/'>Prolog</a>
<a class='box' href='http://graphical-thoughts.blogspot.com/'>Rozdział 1</a>
<a class='box' href='http://graphical-thoughts.blogspot.com/'>Rozdział 2</a>
<a class='box' href='http://graphical-thoughts.blogspot.com/'>Rozdział 3</a>
<a class='box' href='http://graphical-thoughts.blogspot.com/'>Rozdział 4</a>
I znowu zamieniamy - tym razem - tekst niebieski na adres url danego linku/strony/czego tam chcecie, a ta zgniła zieleń to nazwa tejże strony/linku/itd. Oczywiście można powielać linki w zależności od ich zapotrzebowania. Jednakże robić to trzeba właśnie tak jak powyżej. :)


Regulamin
1.Pobierając szablon zostaw krótką informacje ( komentarz, mail, wiadomość w tagboardzie )
2. Pobrany szablon jest tylko do użytku własnego.
3. Zmiany w szablonie są dopuszczalne, jednak przy tychże zmianach, niech Ci ręka nie lata i przypadkiem nie usunie creditu autorki.
4. Jeśli masz problem z pobranym szablonem, opisz problem w komentarzach ( polecana opcja, dzięki temu rozwiązanie problemu będzie dostępne dla wszystkich pobierających ), w mailu lub w tagboardzie.
5.Ciekawi Cię efekt w szablonie? W takim wypadku nie ściągaj go i nie grzeb w kodzie, a po prostu napisz, a z uśmiechem na ustach wyjaśnie cóż to takiego.


52 komentarze:

  1. Tyler, oczywiście szablon mi się podoba. Zarówno ten jak i główny. Czyżbyś korzystała z warunkowania? Pomysł świetny.
    Chyba umiałbym zrobić coś w tym stylu.(mówię o szablonie z surferem) No może prócz nagłówka, bo to wyższa szkoła jazdy. O, a może znasz jakąś ciekawą, polska stronę na temat HTML, czas się trochę podszkolić.
    A mnie najbardziej ciekawi jak się robi to "Layout by Tyler" A jak mi to byś droga szamanko wyjaśniła, byłbym dozgonnie wdzięczny. Oczywiście potem spróbuję to wsadzić w HTML żeby mi ktoś podpisu nie usunął.
    Pozdrawiam, Raion

    OdpowiedzUsuń
    Odpowiedzi
    1. No, facet dobrze gada :D Szczególnie z rameczką "layout by..." - próbowałam sama robić, wprowadzając jakieś swoje pokręcone pomysły, ale raczej były nie trwałe :D
      A tak ogólnie to jesteś genialna i będę Ci to powtarzać w każdym poście :D
      Gorąco pozdraaaawiam! (bo inaczej w takim tropiku się nie da)
      ; )

      Usuń
    2. tfuu! Miałam na myśli "pod każdym Twoim postem" xD

      Usuń
    3. Wpierw do Raiona , bo się jeszcze pogubię.
      Chłopie, oczywiście, że byś zrobił, jak każdy inny mój szablon, bo to raczej jest dużo mniej trudne niż wszystko inne ( odnoszę takie wrażenie ) ;D Wydaje mi się, że jest to kwestia wartości danego elementu, czyli daj czcionkę normal 8pt arial i wszystko będzie wyglądać tak samo ;) A tak na serio to miałam ochotę na coś iście, bardzo, bardzo pospolitego. Ot, stare czasy się przypomniały. :) Także, rób szablon i się nim pochwal, koniecznie czcionka normal 8pt arial! :D Co do obrazka czy tam nagłówka: Po ramkach z divem, z table, będzie parę postów o efektach na obrazkach, także już teraz zapraszam, nic trudnego :)
      Rameczka, ta urocza rameczka. Więc tak, miała być z nią instrukcja, ale no - strzelajcie do mnie jak chcecie - ale każdy by mi potem mógł ten credit usunąć, dlatego pomysł okazał by się zły, niefajny i w ogóle feeee. Jednak parę osób napisało do mnie na maila w tej sprawie i wszystko zostało wyjaśnione ( promocja: niekiedy moje kazanie gratis! :D ). Dlatego teraz już informacja do obojga, do Ronnie też: piszcie na maila, a na pewno odpowiem - jak zwykle ;D . I tak ludzie już się połapali, o co chodzi, jak się to zmienia, usuwa, wstawia swoje, ale nadal działa. ;) A no i przy okazji odpowiedzi na Waszego maila opiszę jeszcze inny sposób, który jest też niegłupi i też może zadziałać. :)
      Ach i obiecuje, że następny szablon strzelę bardziej finezyjny xD
      Trzymajcie się! ;)

      Usuń
  2. Pobrałam ten szablonik na bloga http://recenzja-zbiorowa.blogspot.com/ - na razie jest on otwarty tylko dla wybranych czytelników. Jeżeli chcesz - podaj mejla, to wtedy dodam Cię jako czytelnika i zobaczysz czy z szablonem jest ok.

    Z innej beczki: mam problem z tym nagłówkiem. Chciałam zmienić WEST COAST ADVENTURE na RECENZJA ZBIOROWA, ale kod, który podałaś w poście nie działa ;/ to samo z opisem... Próbowałam wiele razy. Jest może jakiś zastępczy?

    OdpowiedzUsuń
    Odpowiedzi
    1. Dzięki Tyler za pomoc!
      Już zrobione. Teraz czas na mękę z obrazeczkiem.
      Trzymaj za mnie kciuki :)

      Pozdrawiam ,
      ~Esther ;*

      Usuń
    2. P.S Zabrałam ten szablonik również na katalog-grafikow.blogspot.com, gdyż bardzo mi się spodobał :)

      Usuń
  3. Kurczę, nieudolna ja znowu ma problem z tym obrazkiem. Wiem, czarna magia jak dla mnie :) Ostatnie pytanie i... nie będę zawracać głowy:
    Jak mam znaleźć ten kod na obrazek z HTMLu? Szukam, szukam i nie ma. A może go wkleić?

    OdpowiedzUsuń
  4. Już zaczynałam tęsknić! Szablon jak zawsze najs. Ja wciąż nie umiem takiej wysuwanej informacji, jak Ty zrobiłaś w nagłówku (Patt i jej uzdolnienia ) i nigdy mi to nie wychodzi, tak samo jak zmiana "starsze/nowsze posty" na np ">>" whateva!
    happy u r back here <3

    OdpowiedzUsuń
    Odpowiedzi
    1. Ja też tęsknię!!!!! A tak w ogóle to na pewno instrukcja na efekty na obrazkach będzie, bo to właśnie efekt na obrazku, tylko w najbliższej przyszłości. Póki co tarzam moje nieszczęsne zwłoki po mieście i pracuje ( czyt. roznoszę/rozdaje ulotki ), robię zamówienia, próbuję nie przyjmować kolejnych, macham szablonik wolny, pisze instrukcje i oglądam ( a raczej śledzę ) pewnych ludzi, których szczerze kocham, a oni są gdzieś daleko ode mnie. :D Także najogólniej, dużo rzeczy robię ;D

      Trzymaj się tam ;))))

      Usuń
    2. ŚLEDZISZ MNIE?! to takie słodkie! <3333 XD
      Hm, jakich ja gadżetów używam... Zwykle stawiam serio na największy minimalizm, na jaki mnie stać; jeśli chodzi o opowiadania, to ograniczam się do Text, Archive, LinkList, PageList i w sumie tyle, rly. Ostatnio robiłam zamówienie, gdzie juz było tego więcej, bo były PopularPosts, BlogList, Labels... Właściwie to anatomia każdego z nich opiera się w sumie na tych samych zasadach niemal, co ostatnia anatomia tutaj opublikowana :P right?
      A co do szablonu na GA - w niedzielę wyjeżdżam na 3 tygodnie i nie wiem jak z Internetem i w ogóle :o

      Usuń
  5. Zakochałam się w tym szablonie, ajć! <3
    Generalnie uwielbiam Twoje szablony za ten wspaniały minimalizm, który prezentują, naprawdę!
    Dodatkowo mam również pytanie, czy też sugestię raczej (w sumie to maleńką prośbę, ale okej) - czy kiedy będę miała szansę zobaczyć u Ciebie szablon z mega wąską kolumną na tekst? :D Wszędzie takie szerokie i szerokie, a mnie takie szerokie, jakby to ująć, wnerwiają. Mam przez nie wrażenie, że tekstu jest za mało i... No. :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Wąska kolumna miała być, ale jakoś jej nadal nie ma. Nie na serio, miałam pomysł na małą kolumnę z ramką nad ( jak zwykle, chyba się ode tego cholerstwa nie uwolnię ), tylko coś mi się zapomniało. Muszę chyba założyć ogromny zeszyt i rozrysowywać to wszystko, a nie wszystko na jakiś małych karteczkach, które tarzają się po moim pokoju. ;) Na pewno przemyślę i na pewno kiedyś będzie. :)

      Usuń
    2. A, niezorganizowanie, coś o tym wiem. :D Mam nadzieję, że następny szablon wolny będzie z wąską kolumną. :) A mogę spytać, kiedy przewidujesz kolejny wolny pokazać? :)

      Usuń
  6. Pobrałam na http://czyta-sie.blogspot.com/

    OdpowiedzUsuń
  7. Szablon cudowny i aż mam ochotę wrzucić na bloga (zwłaszcza że właśnie dzisiaj wróciłam z kursu windsurfingowego), ale po prostu boję się, że nie ogarnę kodów i wszystko się popsuje, a ja potem tego nie będę umiała poprawić o.o

    OdpowiedzUsuń
  8. Szablon został pobrany na bloga: http://our-kingdom-of-books.blogspot.com/
    Dziękuję bardzo!

    OdpowiedzUsuń
  9. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  10. Genialny! Pobrałam na bloga : presentcreaks.blogspot.com

    OdpowiedzUsuń
  11. biorę na sowjego bloga C;

    OdpowiedzUsuń
  12. Pobieram na mojego bloga (link? Na razie nie wiem, mam 3 XD). Długo szukałam odpowiedniego szablonu i na szczęście znalazłam go na twoim blogu! Dzięki :)

    OdpowiedzUsuń
  13. Pobieram na http://desiccated-blood.blogspot.com/ :* śliczne szablony !!!

    OdpowiedzUsuń
  14. Pobieram na http://second-live-books.blogspot.com/

    OdpowiedzUsuń
  15. Pobrałam na http://emocje-w-pigulce.blogspot.com/

    OdpowiedzUsuń
  16. Pobrałem na legendakorrypl.blogspot.com

    OdpowiedzUsuń
  17. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  18. pobrałam na http://aninfinitenumberof.blogspot.com/

    OdpowiedzUsuń
  19. Pobrałam :) http://idzposweter.blogspot.com/

    OdpowiedzUsuń
  20. Pobrałam na swojego bloga ;3 ♡

    OdpowiedzUsuń
  21. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  22. Pobrałam szablon na bloga http://our-little-secret-fanfiction.blogspot.com/

    OdpowiedzUsuń
  23. pożyczam na wieczne nieoddanie, bo szablon cudowny.
    celebrytistic.blogspot.com/

    OdpowiedzUsuń
  24. Hej, hej. Ja przybyłam z pytaniem - czy jest możliwość zmienienia koloru kart i linków? Kompletnie mi nie pasują do obrazka, który mam zamiar walnąć w nagłówku, no i kombinuję.
    Pozdrawiam.

    OdpowiedzUsuń
  25. Cudowny szablon!
    Pobrałam go na: http://skarbnicaksiazek.blogspot.com/

    OdpowiedzUsuń
  26. Szablon po prostu magiczny!
    Pobieram na http://fryne-the-magi-world.blogspot.com/ i idę szaleć.

    OdpowiedzUsuń
  27. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  28. Pobieram http://six-peeps-and-one-van.blogspot.com
    I przy okazji zgłaszam się z prośbą (jeśli istnieje tak możliwość), czy ktoś mógłby by mi zmniejszyć ten obrazek ( http://www.surfgirlmag.com/wp-content/uploads/2011/10/surfers-camper-van.jpg ) do wymiarów 800x250 pxl i dać prostą instrukcję obsługi CSS?

    OdpowiedzUsuń
    Odpowiedzi
    1. Lub jakieś linki gdzie można obrazek edytować, a instrukcję zobaczyć :D

      Usuń
  29. Pobrałam na http://story-without-regrets.blogspot.com. I mam pytanie - czemu nie wyświetla mi sie zdjęcie w nagłowku skoro poprawnie je zalinkowałam?

    OdpowiedzUsuń
  30. Pobieram na Świat według Dakara :-) zmienię obrazek

    Pozdrawiam

    OdpowiedzUsuń
  31. Pobieram szablon na http://fryne-wilde-about-one-piece.blogspot.com/

    Pozdrawiam!

    OdpowiedzUsuń
  32. To ja to wezmę na nie-bojac-sie-ryzyka.blogspot.com
    Sorrki za zamieszanie :<

    OdpowiedzUsuń
  33. pobieram na http://life-written-by-me.blogspot.com

    OdpowiedzUsuń
  34. pobieram ten szablon na: http://my-cup-of-dream.blogspot.com/
    mam nadzieję, że się nie obrazisz jak zmienię kolor stron po najechaniu? XD oczywiście jeśli mi się uda...

    OdpowiedzUsuń
  35. Pobrałam na: http://selena-gomezstyle.blogspot.com/ <3

    OdpowiedzUsuń
  36. Pobieram West Coast Adventure na marchejournal.blogspot.com

    OdpowiedzUsuń
  37. Pobrałam.
    http://cherry-ao-chan.blogspot.com/

    OdpowiedzUsuń
  38. Pobrałam
    http://fancyaoi-kpop.blogspot.com

    OdpowiedzUsuń
  39. Pobrałam ten cudowny szablon na https://losing--humanity.blogspot.com/
    Dziękuję bardzo!

    OdpowiedzUsuń