Jak pobrać i wstawić na bloga szablon z Internetu?

Hej! Chcąc mieć na blogu, założonym na stronie blogger.com wyjątkowy i oryginalny design możemy edytować szablon wg własnych potrzeb za pomocą funkcji "Dostosuj" lub "Edytuj kod HTML". My jednak dziś zabierzemy się za pobieranie darmowych szablonów z Internetu.

1. Skąd pobrać szablon na blogger.com?

• http://btemplates.com/
• http://www.deluxetemplates.net/
• http://www.blogspottemplate.com/
• inne

2. Jak pobrać szablon na komputer?
1. Wchodzimy na jedną z poddanych wyżej stron (ja będę opierać się na http://btemplates.com/)

2. Wybieramy dowolny szablon, który nas interesuje, np. AbstractVector

• po naciśnięciu "Download" - pobieramy
• po naciśnięciu "Preview", bądź "Demo" (w zależności od rodzaju strony jaką wybraliśmy) - wyświetla nam się podgląd szablonu 

3. Jak rozpakować szablon w komputerze?
1. Rozpakowujemy szablon w komputerze za pomocą programu WinRAR - możemy go za darmo pobrać z następującej strony: http://www.dobreprogramy.pl/WinRAR,Program,Windows,12398.html

2. Na komputerze otwieramy folder "Pobrane". Naciskamy na pobrany szablon lewym przyciskiem myszki, a potem wybieramy "Extract files" (jeżeli posiadasz angielską wersję językową programu) lub "Wypakuj pliki" (w przypadku polskiej wersji językowej).

3. Potwierdzamy przyciskiem "OK" i mamy już rozpakowany szablon do wgrania na bloga.

4. Jak wstawić pobrany szablon na bloga?

1. Szablon ==> Utwórz/przywróć kopię zapasową (na pasku, koło nazwy bloga)

2. Wchodzimy w odpowiedni plik, czyli rozpakowany szablon. Następnie szukamy i wybieramy dokument zapisany jako "Dokument XML". 

 3. Przekazujemy i gotowe!

Jak zmienić tło w pobranym szablonie?

Witam serdecznie. Tą instrukcję wykonam na przykładzie jednego z najbardziej znanych szablonów wśród użytkowników gry MovieStarPlanet, czyli PrintDesign.

ZOBACZ SZABLON

Linki do stron, z których możesz pobrać ten szablon:

• http://btemplates.com/2011/blogger-template-printdesign/
• http://www.premiumbloggertemplates.com/downloads/printdesign/

Jak zmienić tło ? (jesteśmy zalogowani na bloggerze i mamy już wgrany szablon)

1. Wchodzimy w "projekt"
2. Następnie klikamy "Edytuj kod HTML"

3. Na klawiaturze komputera naciskamy CTRL + F, jeżeli zrobiliśmy to prawidłowo, powinno nam pojawić się takie okno:

4.Wpisujemy tam:

<style type='text/css'>

5.Poniżej, wyszukanego fragmentu, znajduje się następujący kod:

body{background:#F4F4F4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bqO_JaDCWAMUFCsOebm5txwsZYWEUj_6Vc1gPNfnamvqp7zeMZdLH4vXVCKDZxDVqV7TvFi6qdLlQm-KSa90m78wWoYuuhuiNOtZf0jrqoZXmyfy8kkrwUlIcutojkWaFO7g93uwouk/s1600/background.jpg) center top no-repeat;color:#535353;font-family: Arial, Verdana;font-size: 12px;margin:0px;padding:0px;}

6.  Podmieniamy kolor tła oraz link do tła

7. Zapisujemy i gotowe :)

Uwagi! 

• utworzyć link możemy na stronach takich jak: imageshack.us lub iv.pl (ja uzywam imageshack`a)
• kolor tła ustawiamy wtedy, gdy tło ma się nie przewijać (lista kolorów)

Jak zrobić powtarzające się tło:

Usuwamy z szablonu:

no-repeat

Jak zrobić, aby tło było nieruchome, a przesuwała się ramka bloga?
Do znacznika body dopisujemy:

background-attachment: fixed;

Jak usunąć "read more" z szablonu PrintDesign?

1.Wchodzimy w blogger.com następnie logujemy się (chyba że już jesteśmy zalogowani)

2.Wybieramy bloga i klikamy w projekt 

3.Po kliknięciu przenosi nas w projekt bloga na samej górze piszę Edytuj kod HTML wchodzimy tam

4.Po przeniesieniu do kodu HTML bloga,klikamy tam w ten kwadrat gdzie piszę Rozszerz szablony widżetów

 5.Po kliknięciu w kwadrat wciskamy na klawiaturze klawisze CTRL+F jednocześnie wyjdzie nam wyszukiwarka w nią wklejamy kawałek takiego tekstu:

Po znalezieniu kawałka tego tekstu tam gdzie piszę createSummaryAndThumb("summary"); zamiast tego musi być wklejone takie coś
Będzię to wygladać tak: 

6.Jak teraz zapiszecie i wejdziecie na bloga będzie już widać cały post tylko ze nadal gdzieś tam na dole w postach będzie napis Read more,żeby to usunąć szukamy takiego kawałku tekstu w kodzie html:

< b:if cond='data:blog.pageType != "item"'>
< div class='readmore-wrap'>
< a class='readmore' expr:href='data:post.url'>Read More
< /div>
< /b:if>
< /b:if>

I usuwamy całkowicie kawałek tego kodu,następnie zapisujemy szablon i wyświetla nam się cały post bez "read more"

Edycja szablonu PrintDesing - instrukcja

Witam za prośbą jednej z użytkowniczek msp postanowiłam wam przybliżyć wam edycję szablonu: PrintDesing.(KLIKNIJ ABY GO ZOBACZYĆ) Możecie go pobrać z tych stron:

• http://btemplates.com/2011/blogger-template-printdesign/
• http://www.premiumbloggertemplates.com/downloads/printdesign/

Jak zmienić tło ? (jesteśmy już zalogowani na bloggerze, mamy wgrany szablon)
1. Wchodzimy w "projekt"
2. Następnie klikamy "Edytuj kod HTML"

3. Na klawiaturze komputera/laptopu klikamy CTRL + F, po prawidłowym naciśnięciu powinno nam pojawić się takie okno:

4. Wpisujemy tam: /* Header, a dalej podążamy z pomocą pokazanych niżej obrazków:

Uwagi! 

• utworzyć link możemy na stronach takich jak: imageshack.us lub iv.pl (ja uzywam imageshack`a)
• kolor tła ustawiamy wtedy, gdy tło ma się nie przewijać (lista kolorów)

5. Zapisujemy i gotowe ; )

Jak dostosować własny tekst w rozwijanym menu ? (jesteśmy już zalogowani na bloggerze, mamy wgrany szablon)
1. Początek jest taki sam jak przy tle, projekt ==> edytuj kod HTML ==> CTRL + F
jednak tym razem w wyszkukiwarkę wpisujemy - <ul class='menus menu-secondary'> - wygląd menu przed edycją:

W miejscu gdzie pisze "Home" wstawiacie "Strona główna"

2. Teraz trzeba zmienić tekst, przykładowo:

Zamiast # wklajacie link do strony na którą ma was przenieść.
Słowo Business zastępujecie np napisem Instrukcje

<li><a href='#'>Polecane moviestars</a>  - przykład uzupełnionego testu !
<ul class='children'> (ten kod rozwija nasze menu)
<li><a href='#'>Kocicaaa2</a></li>
<li><a href='#'>Zejla</a></li>
<li><a href='#'>ArbuzeQ11</a>
<ul class='children'> (ten kod rozwija także menu już rozwinięte)
<li><a href='#'>Ona jest fajna xD</a>
</li>
</ul>
</li>
</ul>
</li>



Jak zmienić kolor menu ?(jesteśmy już zalogowani na bloggerze, mamy wgrany szablon)
1. Ponownie wchodzimy w projekt ==> edytuj kod HTML ==> CTRL + F, a wyszukiwarce wpisujemy - menu-secondary-container 

W jakim kolwiek programie graficznym np. Paint robicie obrazek cały na powiedzmy, zielono, żółto, czerwono lub jak tam chcecie. 

  < przykład jednolitego obrazka> 

Następnie tworzycie do niego link na stronce takiej jak imageshack.us lub iv.pl i postawiacie zamiast tego fragmentu podkreślonego na niebiesko.

W ten sposób powstanie wam zamiast niebieskiego, zielone menu i oczywiście zapisujemy!

2. Jednak to nie wszystko, teraz nadszedł czas na edycję menu po rozwinięciu:

Aby zmienić kolor zaznaczonego fragmentu zaznaczamy "rozszerz szablony widżetów"

A w wyszukiwarkę wpisujemy (CTRL + F) - .menu-secondary li li a

W tym fragmencie tekstu w miejscu podkreślonym na niebiesko podmieniacie kod koloru na inny. (LISTA KOLORÓW)


Pokaz slajdów (jesteśmy już zalogowani na bloggerze, mamy wgrany szablon)
1. Wchodzimy w projekt ==> edytuj kod HTML ==> CTRL + F i wyszukujemy - <!-- Featured Content Slider Started --> następnie podmieniamy to tak jak jest napisane na poniższym obrazku:

2. Tak samo postępujemy z innymi slajami; D