Zrób ze mną szablon na bloga część 2

niedziela, 30 października 2016


Zobacz pierwszą część

Pierwsza część tego wpisu przyjęła się bardzo dobrze, więc postanowiłam zrobić część drugą. Ta część od pierwsze będzie różniła się tym, że zrobimy sobie jeden szablon, a nie dwa. Na czym polega ta seria wpisów? Podaje Wam kody na zrobienie danego szablonu. Tak, podaje Wam najzwyczajniej w świecie gotowce. Dlaczego nie udostępniam tych szablonów do pobrania za darmo? Bo mimo wszystko jest to forma nauki, poznaje się kody, które dla niektórych mogły być nieznane i jednocześnie można je od razu zmodyfikować pod siebie, bez szukania CSSa w kodzie szablonu, tak jak to jest w przypadku szablonów do pobrania. Zaczynamy!

1. Na początek jako naszą bazę wybieramy sobie szablon Simple (prosty) biały. Od razu mówię, że od góry zakładam, że zdjęcia do wpisów będziemy wstawiać w oryginalnym rozmiarze. Na początek, mniej więcej nasz szablon będzie prezentował się tak:

1. Przechodzimy do układu - pasek nawigacyjny - edytuj - wyłączone - zapisz


2. Wracamy do szablon - układ - wybieramy sobie układ prawo lub lewo kolumnowy i rodzaj stopki. U mnie to wygląda tak: 


3. Teraz musimy ustawić sobie szerokość naszego bloga. Przechodzimy więc do "Dostosuj ustawienia szerokości". Ja ustawiłam najbardziej optymalną czyli cały blog 1240px a kolumna boczna 330px 

4. Wracamy do zaawansowane - dodaj arkusz CSS i wklejamy kody.
Pierwszy kod, jest na dopasowanie zdjęć do szpalty, bez ruszenia mniejszych zdjęć. Małe zdjęcia pozostaną małe.


.post-body img {
  max-width:100%;
  height: auto;}
.post-body .tr-caption-container {
   padding: 0;}
.post-body .tr-caption-container img {
   max-width: 100%;
   height: auto;
   margin-left: 0;
   padding: 0;
   display: block;
}

Teraz, dodajemy kod na usunięcie ramek i cienia zdjęć we wpisie, które w szablonie Simple są narzucane odgórnie.

.post-body img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}

Teraz zajmiemy się naszymi stronami. Przechodzimy do "tło kart" i zaznaczamy wszystko na przezroczyste. Następnie przechodzimy do "akcenty" i tam również wszystko zaznaczamy na przezroczyste. Przechodzimy do arkusza CSS i wklejamy tam taki kod: 

#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none; display: inline;}
#PageList1  {border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 10px;
letter-spacing: 2px;
text-transform: uppercase;}

Oczywiście kolor i rodzaj fontu (czcionki) ustawiamy w zakładce "tekst kart". U mnie w menu, font to Times New Roman. 

Przechodzimy dalej. Teraz zajmiemy się wpisami. Tutaj pracujemy głównie w CSSie. Dodajemy kod:

.column-center-inner {text-align: justify;}
.post {font-family: Open Sans;
color: #444;
font-size: 12px;}
h3.post-title {text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Times New Roman;
font-size: 18px;}
h3.post-title a {
color: #000;}
h3.post-title a:hover {
color: #76a5af;}

Przechodzimy do "nagłówek z datą". Tam zmieniamy kolor tła na przezroczyste, a kolor tekstu na czarny, ciemno szary czy jaki tam chcecie. Odznaczamy pogrubienie. Wracamy do CSSa i dodajemy kod:

h2.date-header {text-align: center;
font-family: Times New Roman;
font-size: 10px;}

Przechodzimy do "stopka posta" i kolor tekstu zmieniamy na dowolny kolor, a kolor tła i cienia na przezroczyste. Przechodzimy do CSSa i dodajemy kod:
.post-footer { text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Open Sans;
font-size: 8px;
border-bottom: 1px solid #ddd;
padding: 10px;} 

Przy okazji dodajemy efekt dla cytatów: 

.post blockquote {
margin: 1em 20px;
}
.post-body blockquote {
line-height:21px;
background: #fff;
border: 1px solid #dadada;
padding:10px;
}

Oraz pozbywamy się tego co nam przeszkadza. Czyli kropek w pagerze bloga, "Subskrybuj: Posty (Atom)", "Technologia Blogger" i przerywanej linii w stopce bloga. 

#blog-pager {background: transparent;}
.Attribution, .feed-links {display: none;}
.footer-outer {border: 1px solid transparent;}

Skoro już jesteśmy na dole naszego bloga, to dostosujemy sobie nasz Pager, wklejając kod: 

#blog-pager a{display: inline-block;  
color: #888;  
letter-spacing: 2px;  
text-transform: uppercase;  
font-size: 10px;  
border: 1px solid #e5e5e5;  
padding: 13px 15px;  
font-weight: 700;
background-color:#ffffff;}

Skoro już mamy wszystko ogarnięte, to została nam kolumna boczna, a właściwie tytuły gadżetów. Tutaj również robimy wszystko za pomocą CSSa. Dodajemy kod: 

.sidebar .widget h2, #Followers1 h2 {font-family: Times New Roman;
font-size: 15px;
letter-spacing: 2px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid #000;
padding: 2px;}

Pewnie zastanawiacie się, czemu zostało dopisane #Followers1 h2 - ten selektor odpowiada za nagłówek obserwatorów. Do niektórych gadżetów, trzeba dopisać selektor po przecinku, tak jak w kodzie powyżej np. #Text1 h2 - selektor dla tytułu gadżetu "Tekst". 

Następnie dodajemy kod, na wyśrodkowanie nagłówka:

.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

Zapisujemy szablon. Przedstawiłam Wam ogólny zarys szablonu jaki możecie zrobić. Poniżej są linki do wpisów z których możecie skorzystać przy dalszej modyfikacji. Nie wstawiłam ich tutaj, ponieważ nie chce powielać tego co już jest na blogu :)



Udostępnij ten wpis:
Czytaj dalej »

Jak zrobić chowane-rozwijane archiwum na Bloggerze

czwartek, 27 października 2016


W dzisiejszym wpisie mam dla Was kolejną instrukcję, która nie wymaga grzebania w kodzie HTML. Jest to kolejna krótka instrukcja, która pozwoli nam zmodyfikować wygląd naszego archiwum.

1. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy kod:
#ArchiveList ul > li > a.post-count-link {
    font-size: 15px;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    line-height: 34px;
    background-color: #eee;
    box-sizing: border-box;
    letter-spacing: 1px;
}

#ArchiveList ul ul li  a.post-count-link{
    font-size: 15px;
letter-spacing: 2px;
    width: auto;
    margin: 0 5px 0;
    padding: 10px 2px;
    line-height: 1;
background: transparent;
    text-transform: uppercase;
color: #444;
}

#ArchiveList .zippy{
    visibility: hidden;
}

#ArchiveList ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 38px;
    z-index: 5;
}

#ArchiveList ul ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 24px;
    display: block;
    z-index: 0;
}

#ArchiveList .toggle {
    position: relative;
}

#ArchiveList ul ul .zippy{
    color: white;
    visibility: visible;
    text-shadow: none;
}

#ArchiveList ul li{
    padding: 0 !important;
    text-indent: 0 !important;
    margin: 0 !important;
    position: relative;
}

#ArchiveList ul .post-count-link {
    padding: 10px 0;
    display: inline-block;
    margin: 0 5px 0;
}

#ArchiveList ul ul .posts li {
    margin: 0px 10px 10px 10px !important;
    text-transform: none;
}

#ArchiveList ul {
    margin: 0 0 2px !important;
}

span.post-count {
display: none;
}

1A. Analiza kodu:

#ArchiveList ul > li > a.post-count-link {
    font-size: 15px;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    line-height: 34px;
    background-color: #eee;
    box-sizing: border-box;
    letter-spacing: 1px;
}

#ArchiveList ul ul li  a.post-count-link{
    font-size: 15px;
letter-spacing: 2px;
    width: auto;
    margin: 0 5px 0;
    padding: 10px 2px;
    line-height: 1;
background: transparent;
    text-transform: uppercase;
color: #444;
}

#ArchiveList .zippy{
    visibility: hidden;
}

#ArchiveList ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 38px;
    z-index: 5;
}

#ArchiveList ul ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 24px;
    display: block;
    z-index: 0;
}

#ArchiveList .toggle {
    position: relative;
}

#ArchiveList ul ul .zippy{
    color: white;
    visibility: visible;
    text-shadow: none;
}

#ArchiveList ul li{
    padding: 0 !important;
    text-indent: 0 !important;
    margin: 0 !important;
    position: relative;
}

#ArchiveList ul .post-count-link {
    padding: 10px 0;
    display: inline-block;
    margin: 0 5px 0;
}

#ArchiveList ul ul .posts li {
    margin: 0px 10px 10px 10px !important;
    text-transform: none;
}

#ArchiveList ul {
    margin: 0 0 2px !important;
}

span.post-count {
display: none;
}

Nagłówek z datą 

  • Wielkość fontu 
  • Tło nagłówka 
  • Odstęp między literami/cyframi
Nagłówki - miesiące
  • Wielkość fontu 
  • Kolor 
Efekt: 



Udostępnij ten wpis:
Czytaj dalej »

Nietypowy avatar w Photoshopie na dwa sposoby (wypełnianie grafiki nietypowym tłem)

niedziela, 9 października 2016


Już kiedyś na blogu był podobny wpis, ale robiliśmy to w GIMPie. Postanowiłam odtworzyć to samo w Photoshopie. Da się to zrobić na dwa sposoby, tak samo łatwo i szybko jak w GIMPie, także nie ma co się obawiać. Ten trik możemy wykorzystać na różne sposoby, nie tylko do tworzenia avatarów, ale również możemy to wykorzystać do tworzenia ciekawych nagłówków czy banerów.

Pamiętaj! Będziemy posługiwali się skrótami klawiszowymi - CTRL - dla PC, CMD - dla MAC

CTRL/CMD+N - nowy plik
CTRL/CMD+O - otwórz
CTRL/CMD+C - kopiuj
CTRL/CMD+V - wklej
CTRL/CMD+A - zaznacz wszystko
CTRL/CMD+T - kontrolki przekształceń

Przejdź do wpisu z instrukcją w GIMPie

1. Otwieramy Photoshopa i wybieramy ctrl+n (nowy plik) (PC) lub cmd+n (MAC), ustalamy sobie własną wielkość.


2. Otwieramy okno z warstwami


Sposób pierwszy 


3. Wybieramy tworzenie kształtów lub wrzucamy nową grafikę (ctrl+o - otworzy nam się folder aby wybrać grafikę). Następnie wybieramy znowu ctrl+o i wybieramy nasze zdjęcie, później, zaznaczmy nasze zdjęcie (ctrl+a)  i wybieramy ctrl+c, przechodzimy do zakładki z naszym pustym plikiem lub z wrzuconą grafiką i wybieramy ctrl+v.






4. Klikamy w warstwach na nasze zdjęcie i wybieramy ctrl+t - włączą nam się kontrolki przekształceń, dzięki którym będziemy mogli dopasować nasze zdjęcie do danego elementu.


5. Z listy wybieramy "utwórz maskę przycinającą"


Efekt:

Sposób drugi 


6. Powtarzamy wszystko z punktu 3. Ustawiamy warstwę ze zdjęciem nad kształtem lub daną grafiką i z listy trybów wybieramy "jaśniej". Zdjęcie dopasowujemy tak samo jak robiliśmy to w punkcie 4.



Trzeba brać pod uwagę to, że w tym wypadku, dany kształt doda nam coś w rodzaju filtru na zdjęciu.
Efekt:




Udostępnij ten wpis:
Czytaj dalej »

Listy zadań do pobrania za darmo część 2

piątek, 7 października 2016


W dzisiejszym wpisie mam dla Was 4 listy zadań do pobrania za darmo. Ostatnie listy zadań cieszyły się dużym zainteresowaniem, tak samo jak plany lekcji. Niektórzy z Was pewnie pamiętają, starszą wersje list zadań. Dla tych co nie mieli okazji się z nimi zapoznać, będą mogli zaraz to zrobić. Listy zadań są w 4 wersjach do wyboru, oparte na grafikach watercolor.

Listy zadań do pobrania edycja 2015


Pobierz wersje 1 Pobierz wersje 2


Pobierz wersje 3 Pobierz wersje 4
Udostępnij ten wpis:
Czytaj dalej »

Szablon Pastel do pobrania za darmo na Bloggera

niedziela, 2 października 2016


Szablon Pastel, jest to darmowy szablon na Bloggera w subtelnych pastelowych kolorach. Szablon można dostosować bez problemu do swoich potrzeb. Posiada łatwo edytowalny slider i układ wpisów kafelkowy.


Info o szablonie


  • Szablon zawiera automatyczne skracanie wpisów - układ kafelkowy
  • W szablonie jest funkcja automatycznego dopasowania zdjęć we wpisie, kolumnie bocznej w gadżecie "o mnie" oraz w sliderze
  • Menu zawiera ikonki społecznościowe, jedna karta jest rozwijana oraz jest pasek wyszukiwania 
  • Można zmieniać kolory, fonty, dodawać i usuwać nowe karty oraz ikonki w menu 
  • Dodana instrukcja 

Uwagi

  • Szablon oraz grafiki dodawane do szablonu są tylko i wyłącznie na użytek własny. 
  • Udostępnianie szablonu osobom trzecim w postaci oryginalnej lub zmienionej jest zabronione.
  • Szablon posiada nieusuwalną stopkę z podpisem autora. Po usunięciu jej, szablon nie będzie poprawnie działał 
  • Nie wolno modyfikować wyglądu stopki tzn. zmieniać jej koloru tak, aby nie była widoczna i podpisywać się pod szablonem jako autor 
  • W razie jakichkolwiek problemów/pytań napisz na maila blonparia@gmail.com
  • Nie proś osób trzecich o pomoc przy szablonie w razie powstania problemu - istnieje ryzyko, że dana osoba źle podejdzie do Waszego problemu, a wtedy szablon może zostać uszkodzony lub całkowicie zniknąć z bloga. Pamiętaj! Zawsze zwracaj się z prośbą o pomoc do autora szablonu 

To może Ci się przydać





Chcesz indywidualny szablon?


Zawsze możesz zamówić szablon, jeśli te, które udostępniam do pobrania Ci nie odpowiadają. Wystarczy, że zajrzysz na stronę.

Możesz również wziąć udział w losowaniu, w którym do wygrania jest metamorfoza szablonu - zajrzyj tutaj.

Pobierz Podgląd
Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life