sobota, 20 grudnia 2014

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(http://4.bp.blogspot.com/-3nbdcSMXHN0/TqlVX-lEvaI/AAAAAAAAEyQ/h3Lm9MWRldo/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: "http://2.bp.blogspot.com/-j_X0wjIzX6I/TqlVbZNZDWI/AAAAAAAAEyo/QMeFLkDfTP4/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,

25 komentarzy:

  1. Super post! Kiedy weszłam dzisiaj na twego bloga to se myślę "Też bym chciała taki nagłówek" a tu proszę - poradnik od Hani. Napewno skorzystam <3
    Dziękuję za ten post, mrmr, uwielbiam Cię.
    Pozdrawiam :3
    ~Niezalogowana Zły Las
    Ps 1?

    OdpowiedzUsuń
  2. Super post!
    Przyda się.

    ~monia(000)
    /PatQa

    OdpowiedzUsuń
  3. Dziękuję za miłe słowa. ♥
    Hanka :3

    OdpowiedzUsuń
  4. ZAPRASZAM NA MÓJ NEW FILM NA MSP "Saymon- jeden z bogów" na podstawie mej książki "Saymon & Egipt" ZAPRASZAM. JESTEM 1szymon102

    OdpowiedzUsuń
    Odpowiedzi
    1. Za przeproszeniem, żal dupe ściska! Nie masz się gdzie reklamować? Post świetny! :)

      Usuń
  5. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
    Odpowiedzi
    1. Piszesz świetne posty, pozdrawiam! ☺

      Usuń
    2. Przy okazji zapraszam na mojego bloga:http://diana616msp.blogspot.com/ ☺

      Usuń
  6. Wogóle nie pomocny. nic nie rozumiem co to ten kokpit?!!!

    OdpowiedzUsuń
    Odpowiedzi
    1. No, ten kokpit to strona blogger.com :)
      I uwierz, jest bardzo pomocny.

      Usuń
    2. Dzięki za objaśnienie Anonimowi, Zue. :) Również dziękuję za miłe słowo. ;)
      Anonimie - spokojnie, wpisz w wyszukiwarkę Google, co to kokpit, postaraj się postępować za wskazówkami. :)
      Hanka ;3

      Usuń
    3. O, dzięki :) Sory za moje początkowe zachowanie :)

      Usuń
  7. Świetny post! Jak zwykle;)
    Jaki jest link do Twojego bloga? Chętnie poczytam!

    OdpowiedzUsuń
    Odpowiedzi
    1. Blog Hani:
      mspandlane.blogspot.com
      Myśle, że pomogłam ;)

      ~Milka

      Usuń
  8. OMG, dziękuję! :*
    Tak, mój blog to mspandlane.blogspot.com. ;)
    Hanka :3

    OdpowiedzUsuń
  9. KOCHAM CIĘ :** Nigdzie nie mogłam znaleźć edycji tego szablonu w nowej wersji Bloggera.

    OdpowiedzUsuń
  10. Nie ma żadnego Header...

    OdpowiedzUsuń
  11. I jestem w kropce. Nie moge znaleźć w tej wyszukiwarce tego Header :( Pomocy!

    OdpowiedzUsuń
  12. Nie ma za co, sama dziękuję za miłe słowa! :*
    Header... Hmm... Skopiuj to, co wpisałam i wyszukaj. Powinno być - jeśli nie - napisz na MSP.
    Hanka ;3

    OdpowiedzUsuń
  13. amm-amanda.blogspot.com zapraszam hihi blog o pieskach

    OdpowiedzUsuń

Czekamy na Twoją opinię!