2009-05-28

Własny szablon bloga na blogspot.com

Pewnie wielu z was, a przynajmniej część, miała/ma/chciałaby mieć swojego bloga. Najlepiej, aby taki blog był nieszablonowy, nietypowy, oryginalny. Co zrobić, aby zmienić grafikę na naszym blogu? Co sprawi, że nasz wirtualny pamiętnik nabierze większego wyrazu?
Dziś zajmę się przedstawieniem najprostszej możliwej metody, za pomocą której odświeżymy wygląd naszego blogspota. Nasz nowy szablon będzie bazował na jednym pliku graficznym oraz na odpowiednio spreparowanym szablonie HTML, do którego link znajdziecie w dalszej części posta.

Zanim zaczniemy chciałbym ci polecić parę serwisów z darmowymi szablonami dla blogspota. Jeśli nie dasz sobie rady z moim tutorialem to na pewno znajdziesz dość dobry, darmowy szablon na jednym z tych serwisów. http://elpatrone.blogspot.com/2010/07/skad-pobrac-darmowe-szablony-na.html

Zacznijmy od podstaw. Do pracy będzie nam potrzebny program do obróbki grafiki rastrowej (ja polecam GIMP, jest darmowy i ma dość duże możliwości) oraz podstawowe umiejętności poruszania się po HTML/XML. Wierzcie mi, że to nie jest takie trudne, a już na pewno nie będzie po przeczytaniu tego posta.
Zacznijmy od przygotowania grafiki. Najpierw ściągnijmy ten plik. Będzie nam potrzebny, aby ustawić odpowiednie wymiary w naszym własnym projekcie graficznym. Plik zawiera jedynie prowadnice, które wytyczają granice treści strony.
Następnym krokiem będzie zaimportowanie szablonu HTML do naszego blogspot'a. Pobierzemy go stąd.
Teraz musimy wrzucić nasz projekt graficzny na jakikolwiek serwer, który nie zmniejszy naszej grafiki, ze swojej strony polecam iv.pl. Nasz layout powinien być zapisany w formacie jpg, gif lub png. Link, który otrzymamy posłuży nam do zmodyfikowania szablonu, który przed chwilą zaimportowaliśmy do blogspota. W tym celu przechodzimy na zakładkę "Układ/Edytuj kod HTML". W polu "Edytuj szablon" wyszukujemy kawałek kodu:

body { background: #1e1e1e url(twoja grafika) top center no-repeat;
margin:0;

color:$textcolor;

font:x-small Georgia Serif;
font-size/* */:/**/small;

font-size: /**/small;

text-align: center;
}

W miejsce słów "twoja grafika" wpisujemy dokładny adres do grafiki zuploadowanej np. na iv.pl.
Ostatnią czynnością jest wciśnięcie guzika "Zapisz szablon".
Od tej chwili możemy cieszyć się naszym nowym schematem graficznym na blogspocie.

12 komentarzy:

  1. A jak, znając już jako tako kod html, móc wprowadzić "coś" do kodu, abym mógł edytować posty, zmienić info o mnie z poziomu blogspot?

    OdpowiedzUsuń
  2. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  3. u mnie nie ma tego kodu :( jest tylko coś podobnego a dokładnie:
    /* Content
    ----------------------------------------------- */
    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }

    html body .region-inner {
    min-width: 0;
    max-width: 100%;
    width: auto;

    OdpowiedzUsuń
    Odpowiedzi
    1. Ale ty nie paczysz na kod html twojego bloga tylko tego co ściągnęliśmy. Tam jest to.

      Usuń
  4. http://www.trishka-blog.com/ ja mam pytanie jak stworzyć szablon wyglądający jak u blogerki z linka?

    OdpowiedzUsuń
  5. Nic z tego nie rozumiem i tyle.

    OdpowiedzUsuń
    Odpowiedzi
    1. Bo jesteś idiotką i tyle

      Usuń
    2. Kary, pojechanie po dziewczynie +10 do zajebistości.

      Usuń

  6. wiki: El remolque, también conocido como acoplado o tráiler es un vehículo de carga no motorizado que consta como mínimo de chasis, ruedas, superficie de carga y, dependiendo de su peso y dimensiones, frenos propios. No se puede mover por sus propios medios sino que es arrastrado y dirigido por otro vehículo: desde camiones-remolque específicos hasta motos y bicis, pasando por turismos o tractores.
    Mi pregunta: ?cual es diferencia entre:
    Remolques Remolques para autos
    remolques de coches
    remolques para coches

    OdpowiedzUsuń
  7. Bardzo dziękuję za porady , ja właśnie zaczynam swoją przygodę z blogowaniem:) na pewno mi to pomoże.

    OdpowiedzUsuń