poniedziałek, 13 maja 2013

Jak rozszerzyć i dodać nagłówek do szablonu Print Design?

Notka, myślę... Długo oczekiwana, miałam ją zamiar zrobić od jakiś 4 miesięcy, jednak mimo wszystko, każda sytuacja sprawiała, że mi się nie chciało. Aż w końcu dodałam nagłówek na swojego bloga i naszła mnie chęć, aby wytłumaczyć Wam w jaki sposób go dodałam, a wiem, że wiele osób ma z tym ogromny problem, zazwyczaj są to osoby, które są albo nowe, albo jeszcze nie za bardzo rozumieją "magię" kodu HTML i nie tylko.


1. Robimy sobie link do naszego nagłówka, polecam imgur.com (jak dodać zdjęcie/nagłówek na imgur.com? Przeczytaj to: http://msp-plotkarnia.blogspot.com/2013/01/jak-stworzyc-obrazek-w-linku.html )

2. Wchodzimy na listę naszych/naszego blogów/bloga i wybieramy tego, w którym mamy już wgrany szablon Print Design (jeżeli nie wiesz, a chcesz się dowiedzieć, w jaki sposób pobrać i rozpakować szablon Print Design, przeczytaj to: http://msp-plotkarnia.blogspot.com/2013/03/szablony-jak-pobrac-i-dodac-na-bloga.html ).

3. Następnie w Szablon > Edytuj kod HTML.

4. Po czym klikamy CTRL + F i powinno nam się otworzyć takie okienko:

5. Wyszukujemy ten fragment:
/* Header

6. Następnie szukamy tego:
height:68px;padding:35px 0px 35px 0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRrzUNect3p7Pws9I6OdQoh4eOzyuU0InXowuSFojgpSfG906abR8gwPMwBt785gZaVEXrqWs52cZ1HhuZG_sOxVQIvw3NQYmNPV8IR4-BUKpGB60hDMt-TeNCiUsW3JwQ7i8XhByMAl4/s1600/header-bg.png) left top repeat-x;
I W CAŁOŚCI TEN FRAGMENT USUWAMY!

Teraz zajmiemy się rozszerzaniem nagłówka na całą szerokość.

Wyszukujemy ten fragment:
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:47%;overflow:hidden;}

Jak widzicie - Print Design miał % ustawiony na 47, a my zamieniamy go na 100%

Nagłówek powinien być teraz widoczny w całej okazałości. Jednak mimo wszystko, sprawdźcie w podglądzie, czy wszystko jest ok.

Teraz albo podmieniamy background, albo wchodzimy w Układ > Dodaj gadżet > Wyszukujemy swój nagłówek.

Pozdrawiam! I mam nadzieję, że pomogłam.

0 komentarze:

Prześlij komentarz