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 »

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