(...) 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.
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;
}
.tabs-outer {margin: 0px 200px 0px 200px;}
#PageList1 ul { margin-left: 70px; }
~*~
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
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
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
- background-attachment: fixed; - nieruchome tło
- background-attachment: scroll; - ruchome tło
- 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
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;}
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.
.avatar-image-container {
border-style: solid;
border-width: 2px;
border-color: #63C0DB;
border-radius: 20px 40px 20px 40px;
box-shadow:0px 0px 10px #63C0DB;
}
.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;}
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;}
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;}
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;}
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
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;}
.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;
}
-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ń.
Pod tym postem nie przyjmuję zamówień.
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 :*
OdpowiedzUsuń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 ;*
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ńPoprosiłaś, aby napisała ci inne obrazki, a więc proszę tylko nie wiem czy będą lepsze ;)
OdpowiedzUsuń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
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ńNaprawdę robisz piękne szablony..., a zwłaszcza cudny jest główny :)
OdpowiedzUsuń