Szablon Print Design - edycja, wskazówki.

O, hejka.

Dzisiaj przychodzę do Was z instrukcją. Mianowicie instrukcją edycji szablonu Print Design. Z "ogarnięciem" większości kodów poradziłam sobie dopiero po 3 miesiącach, więc uważam, że warto ułatwić to innym osobom. Oczywiście - zacznę od A do Z, wszystko od początku. Dodam też, że każdy krok trzeba wykonać powoli i dokładnie. Brak, przykładowo jednej kropki, i cały szablon nie nadaje się do opublikowania. Ciężko, ciężko, eh. Mimo to, uważam, że jeżeli dokładnie przeczytacie to, co mam do "zaoferowania", szablony wyjdą Wam dobrze. Zaczynajmy!

Jak wgrać szablon Print Design?

Musimy najpierw ściągnąć program na nasz komputer. Ja polecam stronę >KLIK<. Pobieramy szablon, rozpakowujemy. Po rozpakowaniu wchodzimy do tzw. "kokpitu", klikamy zakładkę "szablon". Klikamy "utwórz/przywróć kopię zapasową" -> "wybierz plik" -> wybieramy rozpakowany już folder z szablonem, wybieramy szablon, -> przekaż. W ten oto sposób mamy już wgrany szablon. W niezmodyfikowanej jeszcze wersji wygląda tak:

Przepraszam za tak twórczą nazwę, nieważne. :") Oczywiście - chcielibyście z pewnością zmienić pokaz slajdów, poszerzyć nagłówek, a także zmienić wiele innych rzeczy.

Jak przedłużyć nagłówek?

Wchodzimy na blogger.com, klikamy w zaznaczone na czerwono miejsce:

Znajdziemy się tam, gdzie są nasze posty. Klikamy: szablon -> edytuj kod HTML. Zostaniemy przeniesieni o tu:

Większość z Was myśli pewnie teraz: "OMG, co to jest, y". Też tak miałam, jednak z czasem się przyzwyczaicie. Klikamy CTR + f. Zobaczymy wyszukiwarkę. Wpisujemy tam /* Header. Szukamy pod nim tekstu:

#header-wrapper{width:960px;margin:0 auto 0;height:68px;padding:35px 0px 35px 0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLTiAVf3myqfpZ9U3clkXJYucWxskBqI_9vo1kxsYErBHQuGQQs233hyJFh99icMm03cPaGf5JqUfhJpWPcsi-9DWWtMRPrfo2XGMb8nbfbXVUDME2FrYPseYu_HLaU47TvUbumT1kUN0/s1600/header-bg.png) left top repeat-x;

Usuwamy go, co w efekcie daje:

Jeszcze niżej szukamy

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

47 % zamieniamy na 100. Efekt końcowy:

Nagłówek dodajemy w ten sposób: układ -> nagłówek -> edytuj -> z twojego komputera -> wybierz plik -> wybieramy i klikamy "zapisz".

Po dodaniu nagłówka powinno to wyglądać tak:

Oczywiście ja dodałam pierwsze lepsze zdjęcie.

Jak zedytować menu?

Tak jak na początku klikamy: szablon -> edytuj kod HTML. Następnie klikamy: Przejdź do widżetu -> Header 1. Zostaniemy przeniesieni tu:

Na początku, zamiast "Home" wpisujemy "Strona główna", jeżeli chcecie inaczej nazwać str. główną - wpiszcie inną nazwę. Następnie zmieniamy nazwy innych "etykiet". Następnie, w miejscu czerwonych # wpisujemy linki, do postów, do których mamy zostać przeniesieni, po kliknięciu na daną etykietę. Przykład:

Ja wkleiłam link z YT, więc mnie tam nie przeniesie. Możemy dawać linki tylko do postów lub gier.

Jak zmienić kolor menu?

Żeby zmienić kolor menu, znowu wchodzimy w projekt -> edytuj kod HTML. Klikamy CTRL + f, i wpisujemy w wyszukiwarce menu-secondary-container. Robimy w Paint'cie jednokolorowy obrazek. Robimy do niego link, np. przez zapodaj.net, czy imageshack. Szukamy linku: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWu3GEBiBF3xyxhKs9vOAPMjALjJBFjprAlS5sZ29K5eVVwM8YWmQyrDS54ePHpR8chFSLacBrIauxv_mYCa8LL64eXZ-c8gWWoONi6ELVK3AblpCqj6TRJqCGGnywM0lRk7M5Xkao7Bw/s1600/menu-secondary-bg.png) left top repeat-x;margin:15px 0 15px" i zastępujemy go naszym. Proste? Proste. Efekt:

Również niebieski, ale inny odcień. Mianowicie taki:

Na dzisiaj to tyle. Jutro kontynuacja: tło, slajdy, tagi itp.

Pozdrawiam,