Zrób ze mną szablon na bloga

niedziela, 31 maja 2015

No dobra to trochę za dużo powiedziane, bo od podstaw nie będziemy robić szablonu a modyfikować za pomocą kodów jeden z szablonów Bloggera, a mianowicie szablon Prosty czyli inaczej szablon Simple. Jest to bardzo wdzięczny szablon i najlepiej się na nim pracuje. Mój blog również jest na podstawie tego szablonu, zresztą jak wszystkie inne szablony, które modyfikuje. Postaram się wam pokazać coś sensownego, przejrzystego, uporządkowanego. Zrobię dwie wersje, więc będziecie mieli wybór.

Szablon pierwszy

1. Szablon - dostosuj.





2. Wybieramy szablon prosty - pozycja 2.


3. Ustawiamy układ i rozmiar bloga tak jak na zdjęciu poniżej:



4. Przechodzimy do zaawansowane i wybieramy tekst strony - Verdana -  wpisujemy 13px - kolor tekstu wpisujemy #614c41


4a. Przechodzimy do "Tło" i wstawiamy tło, które znajdziecie TUTAJ. Po wgraniu klikamy "gotowe"


4b. Wybieramy "wyrównanie" i odznaczamy "przewijaj wraz ze stroną" 


5. Klikamy w zaawansowane - dodaj arkusz CSS

Będziemy brać w obramowanie naszą część bloga z nagłówkiem, wpisami oraz kolumną boczną i stopką tak jak jest to u mnie. W tym celu użyjemy kodu:
.content-inner {border-style: solid; border-width: 4px; color: #614c41;}
Następnie usuniemy ramki i cienie ze zdjęć we wpisach oraz kolumny bocznej w tym celu użyjemy kodu:
.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;
}
.column-right-inner img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}

Wyśrodkowanie daty i tytułu wpisu
h2.date-header {text-align: center;}
h3.post-title {text-align: center;}

Karty/strony bloga. Przechodzimy do tekst kart i ustawiamy na Verdana czcionka na 14px i kolor tekstu ustawiamy na #614c41, a kolor po zaznaczeniu ustawiamy na #ddac86. Wracamy do arkusza CSS i wpisujemy kod na sławne linie, które stanowią obramowanie naszych stron i o które mam najwięcej pytań w skrzynce mailowej. To są te same linie, które widnieją u mnie na blogu.
.tabs-outer {border-bottom: solid #614c41;
border-top: solid #614c41;
border-width: 2px;
padding: 5px;}
oraz wpisujemy kod na wyśrodkowanie kart
#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none; display: inline;}

Następnie zajmiemy się tytułami gadżetów. Już był wpis o tym jak można je zmienić za pomocą CSS i z tego samego kodu będziemy korzystać. Dopasujemy tytuły gadżetów do stylu kart.
.sidebar .widget h2 {
padding:5px;
color: #ddac86;
text-align:center;
font-family: Verdana;
text-transform:uppercase;
letter-spacing: 2px;
font-size:13px;
border-bottom: solid #614c41;
border-top: solid #614c41;
border-width: 1px;
}

Starsze/nowsze posty i strona główna czyli pager bloga. Zaczniemy od usuwania tych kropek, które widnieją w tym szablonie pod starsze/nowsze posty i strona główna oraz ustalimy wielkość i czcionkę.
.blog-pager {background: transparent;
font-family:Verdana;
font-size: 20px;}

Usuwanie Technologia Blogger i Subskrybuj: Posty (Atom)
.Attribution {  display:none; }
.feed-links { display:none !important; }

Zmiana stopki bloga i separatora. Na dole bloga przy jego stopce mamy separator kreskowany ten kod pozwoli na zmianę jego wyglądu oraz koloru i ustali nam czcionkę oraz jej wielkość dla gadżetów w stopce.
.footer-outer {
font: 12px Verdana;
letter-spacing: 2px;
border-top: #614c41 solid;
border-width: 1px;
}

Wyjustowanie tekstu. Wyjustowanie tekstu we wpisie. Justowanie zdecydowanie lepiej się prezentuje niż np. wyśrodkowanie.
.column-center-inner {text-align: justify;}

Styl dla cytatu we wpisie
blockquote {
border:1px solid #614c41;
position:relative;
font-size:90%;
padding:25px;
}
blockquote:before {
top:0;
left:0;
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 70px solid #614c41;
border-bottom: 30px solid transparent;
}
blockquote:after {
position:absolute;
right:0;
bottom:0;
content: "";
width: 0;
height: 0;
border-right: 70px solid #614c41;
border-top: 30px solid transparent;
font-size: 0;
}

Styl dla stopki wpisu
.post-footer {text-align: center;
font: 13px Verdana;
text-transform:uppercase;
background: #eee;}

Styl dla rubryki "O mnie". O tym jak spersonalizować gadżet "O mnie" już pisałam.  Mam ją zrobioną w gadżecie tekst, więc kod będzie taki:
#Text1 {text-align: center;}

Wyśrodkowanie nagłówka
.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

Margines dolny nagłówka
#Header1 {margin: 0px 0 20px 0;} 
Kolory dla linków oraz tekstu w tym  szablonie:

#614c41 #ddac86 

Nagłówek do tego szablonu do pobrania TUTAJ 
Cały szablon prezentuje się tak:

Szablon drugi

Punkt 1,2 i 3 jest taki sam jak przy szablonie pierwszym.

4. Przechodzimy do zaawansowane i wybieramy tekst strony - Verdana -  wpisujemy 13px - kolor tekstu wpisujemy #000000

5. Klikamy w zaawansowane - dodaj arkusz CSS

Usuwanie ramek i cieni ze zdjęć we wpisie i kolumnie bocznej
.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;
}
.column-right-inner img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}

Stopka wpisu
.post-footer {text-align: center;
font: 13px Verdana;
text-transform:uppercase;
background: #eee;}

Starsze/nowsze posty i strona główna czyli pager bloga.
.blog-pager {background: transparent;
font-family:Verdana;
font-size: 20px;}

Usuwanie Technologia Blogger i Subskrybuj: Posty (Atom)
.Attribution {  display:none; }
.feed-links { display:none !important; }

Stopka bloga
.footer-outer {
font: 12px Verdana;
letter-spacing: 2px;
border-top: #eee solid;
border-width: 1px;
}

Wyśrodkowanie daty i tytułu wpisu
h2.date-header {text-align: center;}
h3.post-title {text-align: center;}

Styl dla tytułów gadżetów
.sidebar .widget h2 {
padding:5px;
color: #000;
text-align:center;
font-family: Verdana;
text-transform:uppercase;
letter-spacing: 3px;
font-size:13px;
}

Rubryka "O mnie" zrobiona w gadżecie tekst - jak spersonalizować taką rubrykę dowiecie się TUTAJ
#Text1 {text-align: center;}

Styl dla kolumny bocznej
.column-right-inner {border-style: solid;
border-color: #eee;
border-width: 14px;
}

Wyśrodkowanie kart/stron
#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none; display: inline;}

Strony na górze bloga
.tabs-outer{
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:10;
border-bottom:1px solid #eee;
background: #fff;
}
.tabs-inner, .tabs-inner > .section{
padding: 0 !important;
margin: 0 !important;
}
.tabs-inner .widget ul {
text-align:center;
padding-bottom: 13px;
padding-top:11px;
margin: 0 auto;
}
.tabs-inner .widget li  {
float:none;
display:inline-block;
zoom:1;
}
.tabs-inner .widget li:after{
content: "|";
color: #eee;
}
.tabs-inner .widget li:last-child:after{
content: "";
}
.tabs-inner .widget li a {
display: inline-block;
padding: .2em 4em;
font: 11px Verdana;
color: #999;
text-transform: uppercase;
letter-spacing: 3px;
}
.rmm.minimal .rmm-toggled-title{
text-transform: uppercase;
letter-spacing: 3px;
font: 11px Verdana;
color: #999;
font-weight:bolder;
}
.tabs-inner .widget li:first-child a {
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #444;
background-color: transparent;
text-decoration: none;
}

Wyśrodkowanie nagłówka
.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

Styl dla cytatów
.post blockquote {
 border-left:10px solid #444;padding-left:20px; background: #eee; padding: 10px;}
Wyjustowanie tekstu
.column-center-inner {text-align: justify;}
Kolory dla linków w tym szablonie
#444444 #666666 #999999

Nagłówek do pobrania TUTAJ
Cały szablon prezentuje się tak:



Udostępnij ten wpis:
Czytaj dalej »

Tworzenie animacji/gifów PhotoScape

środa, 20 maja 2015


Ostatnio bardzo zaniedbałam PhotoScape, a przecież nic mi takiego nie zrobił, nie obraziliśmy się na siebie. Długo się zastanawiałam nad tym jaką instrukcje zrobić dotyczącą tego programu i postanowiłam, że będzie to tworzenie animacji/gifów. Tak, w PhotoScapie można takie cuda stworzyć za pomocą paru kliknięć i ja Wam to dzisiaj zaprezentuje. Zaczynamy!

1. Pierwsze co musimy zrobić to przygotować sobie zdjęcia, które posłużą nam do stworzenia animacji. Ja sobie stworzyłam folder "Animacje" i wrzuciłam tam dwa zdjęcia z zawodów.


2. Otwieramy PhotoScape i wybieramy opcje AniGif



3. Wybieramy nasz folder z animacjami i w odpowiedniej kolejności klikamy na zdjęcie i przenosimy na biały pasek u góry.



4. Kiedy już nasze zdjęcia będą przeniesiona na podglądzie zobaczymy zmieniające się zdjęcia i możemy na tym poprzestać, jednak to by było zbyt proste i pokażę wam jak zmienić przejścia po między jednym a drugim zdjęciem. W prawej kolumnie mamy "zmień efekt" klikamy na to i pojawi nam się lista efektów. Wybieramy sobie odpowiedni efekt.


5. Następnie zmienimy rozmiar naszej animacji/gifu. W tym celu klikamy na "Ustal rozmiar" lub będzie napisane "Rozmiar pierwszego zdjęcia".  Otworzy nam się lista, z której będziemy mogli wybrać odpowiednią opcje.



6. Ja wybrałam opcje "Ustaw rozmiar" pojawiło się okienko w które wpisujemy jaki rozmiar ma mieć nasza animacja/gif. U mnie jest to 400x283 px.



7. Pod ustawieniami rozmiaru mamy ustalenie rozdzielczości zdjęcia. Wybieramy "Rozdzielczość papieru" dzięki czemu pozbędziemy się białych ramek.


8. Kiedy wykonamy wszystkie punkty powyżej, przejdźmy do zmiany czas animacji/gifu. Zmiana czasu znajduje się nad zmianą efektu. Im wyższy czas tym wolniej zmieniają się obrazki w naszej animacji/gifie.



Poszczególne efekty przejścia

Brak efektu przejścia:


Wyjeżdżanie od dołu:


Wyjeżdżanie od góry:


Wyjeżdżanie z prawej:


Wyjeżdżanie z lewej:


Zmiana bieżącej klatki do koloru tła:



Zmiana bieżącej klatki na czarną: 


Zmiana bieżącej klatki na białą:



Udostępnij ten wpis:
Czytaj dalej »

Wyróżnienie podtytułu we wpisie

czwartek, 14 maja 2015


Czasem zdarza się tak, że nasz wpis musimy podzielić na parę części. Składa się on wtedy z podtytułów, które zazwyczaj wyróżniamy za pomocą wyśrodkowania, pogrubienia i nadania koloru w edytorze tekstu. Jednak można to zrobić w całkiem inny sposób, który nada naszym podtytułom atrakcyjnego wyglądu. Do tego będzie nam potrzebny CSS i kod HTML, który będziemy wstawiać we wpisie, ale na początek zobrazuje wam o co mi chodzi, bo obawiam się, że nie każdy może zrozumieć. Jest jedna wada - trzeba za każdym razem nasz podtytuł wstawiać ręcznie.





1. Pierwsze co musimy zrobić to przejść do posty - edytuj - HTML, a tam zaczyna się już nasza zabawa.



2. Jeśli mamy już napisany tekst. to teraz wybieramy sobie miejsce na nasz podtytuł i wklejamy następujący kod:

<div class="podtytul">
<div style="text-align: center;">
<span class="podtytul2">TUTAJ WPISZ SWÓJ PODTYTUŁ</span>
</div>
</div>
<br/>

podtytul - to jest nasz selektor tzw, ogólny, możecie sobie go zmienić. Jak ktoś woli mieć tu napisane rozowekwiatki to proszę bardzo, macie okazje na tworzenie swojego selektoru :)
podtytuł2 - dotyczy tylko tekstu jaki umieścimy w podtytule

Teraz to będzie się prezentować mniej więcej tak:


Zapisujemy i na tym kończymy zabawę w edytorze tekstu.
Jakby ktoś się zastanawiał co to jest <br/> to jest nic innego jak enter. Tak się ją oznacza w HTML. Natomiast </div> no to są zamknięcia naszej klasy i stylu.

3. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS



4. Tworzymy styl dla naszego podtytułu. Pamiętajmy co wpisaliśmy w <div class="...">  oraz <span class="..."> ponieważ to będą nasze selektory. U mnie to wygląda tak .podtytul oraz .podtytul2 Kiedy już mamy nasz selektor to dopisujemy style, ja wybrałam sobie różowe tło, marginesy wewnętrzne, biały tekst i wielkość czcionki. Cały kod prezentuje się tak:

.podtytul {background: #ffb4a3; padding: 10px; color: #fff; font-size: 14px;}
.podtytul2 {bakground: #ffb4a3;}

Efekt:


Na koniec przygotowałam dla was 4 gotowce oto one:

.tutaj wasz selektor {padding: 10px; text-align:center;border-left:13px solid #da3f7d;border-right:13px solid #da3f7d;background:#eee; text-transform:uppercase;}
.tutaj wasz selektor 2{background: #eee;}

Efekt:


.tutaj wasz selektor  {padding: 10px; text-align:center;border-style: double; border-color: #ffd966 ; background:#fff; text-transform:uppercase;}
.tutaj wasz selektor 2{background: #fff;}

Efekt:


.tutaj wasz selektor {background: #e06666; padding: 10px; border-radius: 15px;}
.tutaj wasz selektor 2 {background: #e06666; color: #fff; font-size: 14px;}

Efekt


.tutaj wasz selektor {background: #ccc; padding: 10px; border-radius: 15%; box-shadow: 0px 2px 7px #444}
.tutaj wasz selektor 2 {background: #ccc; color: #666; font-size: 14px;}

Efekt:



Wszystko co jest w kodach pogrubione jest wartościami zmiennymi.

Na koniec chciałabym podziękować wszystkim co głosowali na mnie w konkursie. Wygrałam, a moja siostra już nie może się doczekać swojego zestawu książek. Oprócz tego moja praca będzie wystawiona na Targach Książki w Warszawie - radość jest wielka! :)
Udostępnij ten wpis:
Czytaj dalej »

Bloggerowe triki część 2

sobota, 9 maja 2015


Za nim przejdziemy do tematu wpisu mam do Was ogromną prośbę. Mój "Zniszcz ten dziennik" bierze udział w konkursie, a dokładnie jedno zadania pod tytułem "pokryj tę stronę taśmą (stwórz jakiś wzór)". Przeszedł 1 eliminacje i jest wśród 19 innych prac. Do wygrania jest: Zniszcz ten dziennik, To nie książka oraz Zniszcz ten dziennik wszędzie. Jak wiadomo posiadam te egzemplarze, jednak walczę obecnie o wygraną dla mojej 9 letniej siostry, która również chciałaby mieć swoją małą kolekcje książek Keri Smith. Również jest to korzyść dla mnie ponieważ jeśli moja praca znajdzie się w pierwszej 10, będzie pokazana na Targach Książki w Warszawie, więc jeśli chcecie pomóc mojej siostrze w zdobyciu tych książek oraz chcecie aby to moja praca była prezentowana na Targach Książki to proszę o głosy. Link, pod którym oddajecie swoje lajki znajdziecie poniżej.
Wystarczy kliknąć "Kliknij i zagłosuj" przejść na 2 stronę i 3 praca zatytułowana "ZTD Małgosi" to moje ;)


Z góry, wszystkim co oddali głosy na moją pracę baaardzo dziękuję.

Po ogłoszeniach parafialnych możemy przejść do tematu wpisu. Nie wiem czy pamiętacie, ale jakiś czas temu była pierwsza część bloggerowych trików. Po pierwszej części zobaczyłam, że nie wszystko zostało omówione i postanowiłam zrobić część 2. Nie będzie tego tak dużo jak ostatnim razem, ale mam nadzieje, że mimo wszystko komuś się te informacje przydadzą. Zaczynamy.


Jak zaobserwować bloga, który nie ma gadżetu obserwatorzy

Jak wiadomo, nie raz trafiamy na jakiś na prawdę fajny blog, chcemy go zaobserwować, a tu ani subskrybcji e-mailowej, ani gadżetu obserwatorzy, bo się okazuje, że blog jest na całkiem innej platformie niż blogger, albo jeśli nawet jest na bloggerowej platformie to autor nie umieścił tego gadżetu - miał do tego prawo. Jednak jest sposób na to aby taki blog trafił na naszą listę czytelniczą.
Przechodzimy na stronę główną bloggera, zjeżdżamy w dół, tam gdzie mamy listę czytelniczą. Po lewej stronie mamy przycisk "dodaj" klikamy na niego. Otworzy nam się okienko gdzie wpisujemy adres bloga, którego chcemy obserwować, oraz wybieramy formę obserwacji. W moim przypadku jest to blog Design Your Life i klikamy obserwuj. Blog powinien się znaleźć na liście czytelniczej.



Śledzenie swojego komentarza

Są takie sytuacje, że piszesz u kogoś komentarz, czekasz na odpowiedź, a tu nic. Cisza. Zaczynasz szukać tego bloga, ale bez skutecznie. Raz. Tylko raz odwiedziłaś/eś dany blog, ale spod twojej klawiatury wyszedł komentarz, który zasługiwał na jakiś odzew. Pytanie, opinia, nie ważne co, chcesz znać odpowiedź, reakcje autora. Wiele osób zostawiając komentarz z jakimś pytaniem myśli, że autor danego tekstu będzie wchodził na bloga osoby, która komentarz pozostawiła i szukała jakiejkolwiek informacji o tym, że można się z tą osobą skontaktować. Nie wiele osób wie, że jest coś takiego jak subskrypcja komentarzy, która znacznie ułatwia życie. Jedno kliknięcie, a wszyscy dzięki temu będą zadowoleni. Autor tekstu, że nie musi latać po blogach i szukać jakiejś wzmianki o tym, że można się z kimś skontaktować przez e-mial oraz autor komentarza, że otrzyma odpowiedź.
Po napisanym komentarzu, ale przed opublikowaniem go, wystarczy kliknąć "powiadamiaj mnie" tym samym na naszą skrzynkę mailową będą trafiać powiadomienia dotyczące komentarzy pod danym wpisem.



Powiadomienia z Bloggera o komentarzach na innym mailu

Zazwyczaj mamy ustawiony mail, który jest od początku połączony z bloggerem tzn. zakładając maila, albo bloga musieliśmy wpisać jakiś tam mail np. kasiazosiaasia@gmail.com i na ten mail przychodzą nam powiadomienia o komentarzach, ale nie korzystamy z tego maila tak często jak np. z maila tylkokasia@wp.pl i nie widzimy powiadomień o komentarzach, które np. były dodane do wpisu, który dodaliśmy 2 tygodnie temu. Oczywiście tyczy się to osób, które nie mają włączonej moderacji. Chcemy to zmienić, ale jak? Nic trudnego, wystarczy przejść do ustawienia - komórka i poczta e-mail. Mamy tam ramkę z naszym mailem i obok napis "e-mail z powiadomieniami o komentarzu" wpisujemy mail, na który mają przychodzić nam powiadomienia i klikamy "zapisz ustawienia".




Reakcje. Opinie o wpisie

Pewnie niektórzy z Was widzieli, że na niektórych blogach można ocenić wpis za pomocą kliknięcia  np. w "fajne, może być" itd. Zrobienie tego jest bardzo proste. Wystarczy wejść w układ.





Wiem, że dzisiaj nie ma tak dużo przedstawionych tych trików, ale wydaje mi się (na chwilę obecną) że to wszystko. Jak mi się przypomni, albo Wy chcecie się czegoś dowiedzieć jak coś wykonać to piszcie śmiało. Wtedy zapewne powstanie 3 część.

PS. Posty od dzisiaj będą pojawiać się w soboty, a nie w piątki.
Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life