Darmowe szablony na bloga

Przed przystąpieniem do pisania bloga, bardzo ważną rzeczą jest, aby dobrać do niego odpowiedni szablon. Musi on być taki, aby uatrakcyjniał wygląd naszej strony, a także był powiązany z jej treścią. Każda osoba wchodząc na twoją stronę musi od razu zdecydować czy blog jej się podoba i czy będzie do niego wracać.
W tym wpisie postaram się podać najlepsze moim zdaniem strony z darmowymi szablonami dla Blogspot(Blogger). Jest to według mnie jeden z lepszych serwisów umożliwiających założenie darmowego bloga.Posiadanie bloga w serwisie Blogger posiada wiele zalet - intuicyjny interfejs i integracja z pozostałymi usługami Google, to tylko kilka z nich. Blogger domyślnie udostępnia kilka szablonów do wyboru , jednak nie wszystkim muszą one przypaść do gustu.

Lista stron z darmowymi szablonami:

www.deluxetemplates.net
www.btemplates.com
www.bloggertemplatesfree.com
www.blogtemplate4u.com
www.allblogtools.com
www.bietemplates.com
www.bloggerstyles.com
www.blogger.com/www.templatelite.com
www.blogger.com/www.blogspottemplate.com


Jeżeli już wybrałeś swój szablon to możemy przejść do instalacji.

1.Aby zainstalować szablon do bloga, musisz go pobrać z jednej z tych stron, a następnie rozpakować.
2. Po rozpakowaniu otrzymasz jeden lub więcej (w zależności od szablonu) pliki z rozszerzeniem *. xml
3. Teraz zaloguj się na blogspot i wybierz z lewej pozycji menu "Szablon". 
4. Kolejnym krokiem jest naciśnięcie przycisku 
 5.Potem wystarczy wybrać plik *. Xml z dysku twardego i cieszymy się nowym wyglądem.

Pamiętaj, aby zrobić kopię zapasową starego szablonu, jeżeli nowy szablon ma błędy lub nie będzie się podobał po prostu zgrywasz stary wygląd.

Ustawianie tekstu i grafiki

Grafika z lewej, tekst z prawej strony

Takie ustawienie elementów jest bardzo często stosowane w "Opisach plików", kiedy razem z tekstem umieszczamy miniaturkę zdjęcia, np. okładkę książki którą chcemy zaprezentować.

<img style="float:left; margin:0 10px 0 0;" src="adres obrazka" alt="krótki opis obrazka" />
<span style="font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</span>

W miejsce "adres obrazka" należy wpisać pełny adres internetowy obrazka (w tym przykładzie będzie to:http://get.zlotemysli.pl/products/image/000/006/485/152x200.jpg?201306 .

Natomiast w miejsce "krótki opis obrazka" należy wpisać kilka słów opisujących obrazek, które pojawią się u użytkowników z wyłączonym wyświetlaniem grafiki (w tym przykładzie będzie to: Okładka książki). 

Okładka książki W tym miejscu wyświetli nam się cały napisany przez nas tekst. W tym konkretnym przykładzie ustawiliśmy grafikę po lewej stronie. Natomiast poniżej podam kilka kodów dzięki którym będziecie mogli ustawić obrazek w dowolnym miejscu.









Grafika z prawej, tekst z lewej strony

<img style="float:right; margin:0 0 0 10px;" src="adres obrazka" alt="krótki opis obrazka" />
<span style="font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</span> 


Grafika nad tekstem, całość z lewej strony (domyślnie)

<img src="adres obrazka" alt="krótki opis obrazka" />
<p style="font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</p> 


Grafika i tekst wyśrodkowane

<p style="text-align:center;"><img src="adres obrazka" alt="krótki opis obrazka" /></p>
<p style="text-align:center; font-family:Tahoma; font-size:13px;">Tutaj wpisz swój tekst</p> 

Proste zabiegi z tekstem a pozycjonowanie

Odejdźmy może na chwilkę, od sposobów dzięki którym, możemy w łatwy sposób upiększać naszego bloga, a skupmy się w tym poście na tym , w jakim celu to robimy lub w czym to tak naprawdę nam może pomóc.

Niewiele osób zdaje sobie z tego sprawę, ale proste zabiegi z tekstem , mogą w znaczący sposób pomóc nam w pozycjonowaniu naszej strony.

Dla Google pewne słowa są ważniejsze od innych – decyduje o tym znacznik przy danym słowie (frazie). Tak więc, jeśli wyróżnisz w jakiś sposób pewne słowo, lub frazę – będzie ono miało większą „moc”. Jak pewnie już się domyślasz – najważniejsze będą słowa zawarte w tytule artykułu. Unikaj jednak pokusy, by zawrzeć w nim tylko słowo (frazę) kluczową – zdecydowanie bardziej opłaca się mieć nieco dłuższy tytuł. 

Kolejnym zabiegiem, który możesz zastosować to podkreślanie słów kluczowych, możesz je także napisać pogrubioną czcionką, albo kursywą. Opłacalne będą wszelkie zabiegi, które wyróżniają frazę, na której Ci zależy. Możesz także napisać je innym kolorem, albo wypunktować. Dla robota Google będzie to oznaczało, że to słowo (fraza) ma w artykule kluczowe znaczenie.

Te zabiegi z pewnością pozwolą Ci poprawić wyniki Twojej strony w wyszukiwarce Google. Pamiętaj jednak o tym, że zamieszczony przez Ciebie tekst ma służyć przede wszystkim czytelnikom. Nie wstawiaj zatem słów kluczowych tylko po to, by je gdzieś wstawić – muszą one być spójną całością tekstu.

Formatowanie tekstu - gotowe szablony dla początkujących

Szablony dla początkujących:

Chciałbym dziś zaprezentować kilka gotowych szablonów, dzięki którym możesz w łatwy sposób formatować swój tekst.
Wystarczy skopiować któryś z poniższych kodów i we wskazanym miejscu wpisać swój tekst. Jeżeli chcesz, możesz modyfikować kod, zmieniając np. wielkość lub kolor czcionki.
1.
HTML:
<span style="font-family:Tahoma, sans-serif; font-size:15px; color:#524f42;">Tutaj wpisz swój tekst</span>
Efekt:
Tutaj wpisz swój tekst
2.
HTML:
<span style="font-family:Arial, sans-serif; font-size:18px; color:#D20000;"><strong><i>Tutaj wpisz swój tekst</i></strong></span>
Efekt:
Tutaj wpisz swój tekst
3.
HTML:
<span style="font-family:Georgia, serif; font-size:22px; color:#006DAE;">Tutaj wpisz <u>swój tekst</u></span>
Efekt:
Tutaj wpisz swój tekst
4.
HTML:
<span style="font-family:'Monotype Corsiva', cursive; font-size:32px; color:#FF6C00;">Tutaj wpisz swój tekst</span>
Efekt:
Tutaj wpisz swój tekst
5.
HTML:
<span style="font-family:'Comic Sans MS', cursive; font-size:22px; color:#00C126;">Tutaj wpisz swój tekst</span>
Efekt:
Tutaj wpisz swój tekst
6.
HTML:
<span style="font-family:Verdana, sans-serif; font-size:18px; color:#A40052;"><i>Tutaj <strong>wpisz</strong> <u>swój</u> tekst</i></span>
Efekt:
Tutaj wpisz swój tekst
7.
HTML:
<span style="font-family:'Times New Roman', serif; font-size:28px; color:#E2BF47;"><i>Tutaj wpisz swój tekst</i></span>
Efekt:
Tutaj wpisz swój tekst
8.
HTML:
<span style="font-family:'Courier New', monospace; font-size:20px; color:#0097FB;">Tutaj <strong>wpisz</strong> swój tekst</span>
Efekt:
Tutaj wpisz swój tekst

Łączenie styli formatujących tekst.

Jeżeli chcemy, aby nasz tekst miał kilka cech wyglądu naraz, należy połączyć ze sobą wybrane style CSS i/lub znaczniki HTML.

Rodzaj czcionki + Wielkość czcionki + Kolor czcionki + Pogrubienie

<p style="font-family:rodzaj czcionki; font-size:wielkość czcionki; color:kolor czcionki;"><strong>Tutaj wpisz swój tekst</strong></p>

W miejsce "rodzaj czcionki" należy wpisać nazwę czcionki (w naszym przykładzie będzie to: 'Times New Roman').

W miejsce "wielkość czcionki" należy wpisać wielkość czcionki wyrażoną w pikselach [px] (w naszym przykładzie wielkość czcionki będzie wynosiła: 26px).

W miejsce "kolor czcionki" należy wpisać kod koloru. Więcej o kolorach znajdziesz w poprzednich postach . W naszym przykładzie tekst będzie koloru różowego: #FF0080.

Przykład:
<p style="font-family:'Times New Roman'; font-size:26px; color:#FF0080;"><strong>Ten tekst ma cztery cechy wyglądu</strong></p>

Efekt:

Ten tekst ma cztery cechy wyglądu

Tekst pogrubiony, Tekst pochylony, Tekst podkreślony


Tekst pogrubiony:


Aby pogrubić jakiś fragment tekstu, należy objąć go następującymi znacznikami HTML:


<strong>Tutaj wpisz swój tekst</strong>

Przykład:

<strong>Ten tekst został pogrubiony</strong>, a ten tekst nie został pogrubiony
Efekt:

Ten tekst został pogrubiony, a ten tekst nie został pogrubiony

Tekst pochylony:


Aby napisać coś pismem pochyłym, należy dany fragment tekstu umieścić pomiędzy znacznikami:



<i>Tutaj wpisz swój tekst</i>
 Przykład: 


<i>Ten tekst jest napisany pismem pochyłym</i>, a ten tekst – pismem zwykłym

Efekt: 


Ten tekst jest napisany pismem pochyłym, a ten tekst – pismem zwykłym

Tekst podkreślony:


Aby podkreślić jakiś fragment tekstu, należy objąć go takimi oto znacznikami HTML:


<u>Tutaj wpisz swój tekst</u>

Przykład: 


<u>Ten tekst został podkreślony</u>, a ten tekst nie został podkreślony

Efekt: 


Ten tekst został podkreślony, a ten tekst nie został podkreślony.