16 czerwca 2013

Dla początkujących

(...) czyli jak popieścić blogspota, żeby chciał z nami współpracować.

Kochani. Wielu z was (w tym i ja jakiś czas temu) obawiało lub nadal obawia się magii blogspota. Wbrew pozorom otwiera nowe możliwości, daje ogromne pole do popisu i sprawia, że nasza wyobraźnia tańczy kankana, gdy zabiera się za CSSa. 

W tej instrukcji, którą tworzę na życzenie, chcę wyjaśnić krok po kroku, jak ja zabieram się do roboty. 

Zaczynamy więc od programu graficznego, który jest dosłownie fundamentem powstania szablonu. W zamierzchłych czasach i teraz też czasem, korzystam z programu Photofiltre Studio X. Prosty, przyjemny i przyjazny program. Jeśli ktoś dopiero zaczyna, polecam od razu Photoshopa (ja posiadam CS7). Wadą jest brak podglądu czcionek, przez co muszę skakać między PF, a PS. 

Dla kogoś początkującego trudno jest mi opisać krok po kroku, co i jak ma robić w PS. Z programem trzeba spędzić troszkę czasu, zacisnąć zęby i z uporem maniaka ćwiczyć. Pomogą w tym tutoriale, których jest troszkę na YT, jak również porady wujka google. 

Instrukcja powstała na podstawie szablonu numer 44.

~*~


Po stworzeniu grafiki w programie graficznym Photoshop CS7, załadowuję grafikę na hosting imageshack.us



Przeważnie tworzę tło o wymiarach 1600x1800 pikseli.

1. Przygotowanie miejsca pracy.

Pierwszą rzeczą, jaką powinniśmy zrobić, jest wybranie szablonu 'Rewelacja', a następnie:
Szablon -> Dostosuj
Jesteśmy w projektancie.  
a) Wybieramy: 'tło -> usuń obraz'. 
b) Klikamy 'Brak -> prześlij obraz' i wczytujemy mały obraz .png z naszego komputera. Może to być dowolny obrazek. Ważne, aby był mały.
c) Powrót do bloggera -> Edytuj kod HTML 

 Nie bójcie się nowego wyglądu edytora! Wbrew pozorom wcale nie gryzie. Jak już klikniecie we wskazanym miejscu, postępujemy wg:
 -> klikamy 'CTRL + F' i wpisujemy 'png'
 W wycięte miejsce ja osobiście wpisuję "x". Czyli kod wygląda następująco: url(x.png).

d) W projektancie przechodzimy do opcji Zaawansowane, gdzie ustawiamy przezroczystości teł, obramowań, itd.


Zapisujemy! Nasze miejsce pracy zostało przygotowane.

2. Zabawa w dopieszczanie, czyli jak stworzyć szablon.
  • Zaczynamy od tła. Projektant -> Zaawansowane -> Dodaj arkusz CSS
 body {
font: normal normal 12px Georgia, Tahoma, Helvetica, FreeSans, sans-serif;
color: #63C0DB;
background: #00212F url(http://img577.imageshack.us/img577/2481/tlo1pn.png);
background-position: left bottom;
background-attachment: fixed;
background-repeat: no-repeat;
}

a) background-position  -  pozycja obrazka
  • background-position: left bottom;  - dolny, lewy róg
  • background-position: right top;  - górny, prawy róg
  • background-position: center top;  - górny środek
  • background-position: center bottom;   - dolny środek
Pozostałe pozycje zapisujemy analogicznie!

b) background: #00212F url(http://img577.imageshack.us/img577/2481/tlo1pn.png);
  • #00212F - oznacza kolor tła
  • url(http://img577.imageshack.us/img577/2481/tlo1pn.png); - obrazek w tle
c) background-attachment - tutaj ustawiamy, czy nasze tło ma być ruchome czy też nie
  • background-attachment: fixed;  - nieruchome tło
  • background-attachment: scroll;  - ruchome tło
d) background-repeat  - ustawiamy tutaj, czy obrazek w tle ma się powtarzać i w jakiej formie
  • background-repeat: no-repeat;  - obrazek się nie powtarza
  • background-repeat: repeat;  - powtórzenie w każdą stronę
  • background-repeat: repeat-x;  - powtórzenie w poziomie
  • background-repeat: repeat-y;  - powtórzenie w pionie
e) kolor i rodzaj czcionki
color: #63C0DB;
font: normal normal 12px Georgia, Tahoma, Helvetica, FreeSans, sans-serif;
 ~*~
Kolumna środkowa (z datą i komentarzami)
 
.column-center-inner {
background-image: url(http://img818.imageshack.us/img818/4613/tloposty.png);
border-color: #63C0DB;
border-style: solid;
border-width: 2px;
padding: 5px;
border-radius: 0px 0px 0px 0px;
box-shadow:0px 0px 10px white;}
Żeby tło było przezroczyste, ale aby litery pozostawały normalne, możemy użyć:
- albo obrazka przezroczystego, jak w tym wypadku
- albo zastosować kod, który polecam zapisać oddzielnie (jakby nie działał)

.column-center-inner {background-color: rgba(44,52,48,0.8) }

Kod można stosować w innych selektorach (.column-left-inner; .column-right-inner; .tabs-outer, itd)

.column-center-inner {
margin-right: -250px;
margin-left: 250px;
margin-top: 200px;}


Dzięki kodowi powyżej, możemy ustalić pozycję kolumny środkowej. Analogicznie stosujemy to do innych selektorów.

~*~
Kolumna prawa

.main-inner .column-right-inner {
background-image: url(http://img818.imageshack.us/img818/4613/tloposty.png);
border-color: #63C0DB;
border-style: solid;
border-width: 2px;
padding: 0px;
border-radius: 0px 0px 0px 0px;
box-shadow:0px 0px 10px white;}

.column-right-inner {
margin-right: -70px;
margin-left: 190px;
margin-top: 0px;}

~*~
Komentarze i avatary

.comment p {border-color: #63C0DB;
border-style: solid;
border-color: #63C0DB;
border-width: 2px;
padding: 10px;
border-radius: 0px 0px 0px 0px;
box-shadow:0px 0px 10px #63C0DB;}

.avatar-image-container {
border-style: solid;
border-width: 2px;
border-color: #63C0DB;
border-radius: 20px 40px 20px 40px;
box-shadow:0px 0px 10px #63C0DB;
}

~*~
Karty u góry

.tabs-outer {
background-image: url(http://img818.imageshack.us/img818/4613/tloposty.png);
border-color: #63C0DB;
text-shadow: 0px 0px 10px white;
border-style: solid;
border-width: 2px;
padding: 0px;
border-radius: 0px 0px 0px 0px;
box-shadow:0px 0px 10px white;}

.tabs-outer  {margin: 0px 200px 0px 200px;}

#PageList1 ul { margin-left: 70px; }

~*~
Pozostałe kody użyte w szablonie

.post {text-align: justify; }
.main-inner .column-center-inner {text-align: center; }
.column-right-inner .widget {text-align: justify; }
.widget h2 {text-align: center; }
.column-right-inner {text-shadow: 0px 0px 10px #63C0DB}
.comments h4 {text-shadow: 0px 0px 10px #63C0DB}
.widget h2, h3.post-title {text-shadow: 0px 0px 10px #63C0DB}
h3.post-title, .comments h4 {text-align: center;}
a:hover {font-variant: small-caps; letter-spacing: 0.5px;}

Przedstawiony jest tu wygląd linku po najechaniu, cienie w poszczególnych elementach oraz formatowanie tekstu.
~*~
Dla ciekawskich! Jak upiększyć datę!
Nie będę rozpisywać na temat instrukcji, którą możecie znaleźć na stronie Hafija-Background
Poniżej wkleję wam kod, którego ja użyłam. Uprzedzam, iż nie jest to pełny wygląd kodu! Aby data wyglądała poprawnie, należy zrobić wszystko, z instrukcji!
#Date {
-moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  -goog-ms-border-radius:0px;
border-radius: 0px;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px 0 390px;
padding: 5px;
 background: #002332 ;
border-color: #63C0DB;
border-style: solid;
border-width: 2px;
box-shadow:0px 0px 5px white;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff;
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#ffffff;
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#ffffff;
W razie pytań służę pomocą.  Jeśli widzisz jakieś błędy, lub też chcesz zaprezentować inne możliwości, pisz śmiało. Ja się dopiero uczę, a język HTML jest u mnie w fazie raczkowania. 
Strony, dzięki którym wciąż się uczę:
 Zabraniam kopiować instrukcję, która powstała tylko i wyłącznie na potrzeby bloga DAnayi. Jest ona stworzona z myślą o osobach uczących się magii blogspota. 
Jeśli w szablonie pojawiło się coś, czego nie opisałam, napisz, a postaram się uzupełnić instrukcję.
 Pod tym postem nie przyjmuję zamówień.

5 komentarzy:

  1. Ja znam inną instrukcję na tło z zaczarowane-instrukcje, ale ta też jest wspaniała. Szczerze mówiąc dziękuję ci jeszcze raz. Dzięki tobie zrozumiałam te kody :*
    Niestety nie mogę teraz poeksperymentować z tymi kodami, bo piszę z iPoda, ale kiedy znajdę czas zrobię coś i się pochwalę na chacie ^^

    Ja prubuję tworzyć na Photofiltre Studio X, ale czasami również na Photoshop Elementa 8, który nw po co tata kupił. Ale tego Photoshop'a kupiłaś czy ściągnęłaś?

    Pozdrawiam i czekam na mój szablon ;*

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że moje instrukcje się przydają. Pamiętam swoje blogspotowe początki, kiedy to ów portal przerażał mnie. Pamiętam też, jak wchodząc w ustawienia mówiłam do siebie "gdzie ja kurna mam to tworzyć, jak?!". Głupie onetowskie przyzwyczajenia, gdzie wystarczyło w programie graficznym pociąć szablon na kawałki. Ale przyznaję, że blogspot bardziej mi się podoba ;p

      Usuń
  2. Poprosiłaś, aby napisała ci inne obrazki, a więc proszę tylko nie wiem czy będą lepsze ;)
    http://pbs.twimg.com/media/BDpsl5DCIAA5wVK.png:large
    http://pbs.twimg.com/media/BGPHX9vCQAAvkdO.png:large
    http://02.wir.skyrock.net/wir/v1/resize/?c=isi&im=%2F9977%2F87579977%2Fpics%2F3162595368_1_4_1r7sONTT.png&w=597

    OdpowiedzUsuń
  3. Bardzo dobry pomysł z tymi instrukcjami^^ Jak znajdę chwilę to zapoznam się dokładniej :p Czy zaczęłaś już moje zamówienie (jeszcze pod nickiem Buntowniczka bez nazwiska) ? Chciałabym zmienić cytat jeśli nie zaczęłaś :)

    OdpowiedzUsuń
  4. Naprawdę robisz piękne szablony..., a zwłaszcza cudny jest główny :)

    OdpowiedzUsuń