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 ( hostuje.net )

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.

Pobierz ( hostuje.net )

Pobierz ( pastebin.com )