O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Zmiana w kodzie html starych szablonów

Zmiany na bloksie zachodzą co jakiś czas. Nowe rzeczy są dodawane, pewne funkcjonalności czy elementy zmieniają się co nieco. Nie wszystko zawsze mi się podoba, do pewnych zmian muszę przywyknąć by je docenić. Czasami zmiany są na lepsze a ja mimo to uważam, że można je było zrobić lepiej. Ta którą opisuje dzisiaj uznaję za niewielką acz niezwykle znaczącą.

edycja blogu -> Wygląd -> Pozostałe -> Optymalizuj szablon pod wyszukiwarki

WYGLĄD - POZOSTAŁE - Optymalizuj szablon pod wyszukiwarki

Wszystkie moje szablony dostosowane są do tych zmian. Proszę więc sprawdzić w edycji własnego bloga czy pole Optymalizuj szablon pod wyszukiwarki jest zaznaczone. Nie jest to coś niezbędnego ale zapewniam, że chcesz aby Twój szablon był zoptymalizowany pod wyszukiwarki nawet jeżeli na wejściach z wyszukiwarek Ci nie zależy albo Twój blog zamknięty jest dla szerokiej publiczności. Zmiany poza tym że są pod wyszukiwarki są też dla użytkowników: tytułowi notki na stronie głównej dodają link.

W rozwinięciu notki znajdują się informacje na temat zmian jakie wprowadza optymalizacja, jak ją włączyć i jak się to będzie miało do wyglądu szablonu.

Zmiany jakie przynosi włączenie optymalizacji

Co zyskujesz dzięki przełączeniu na zoptymalizowany kod?

  • Przede wszystkim tytuły notek staną się linkami. zobacz zmiany w kodzie
  • Jeżeli boks z linkami do dziesięciu najnowszych notek jest włączony to będzie się także wyświetlał na stronie z pojedynczą notką i stronach statycznych.
  • Po wybraniu kategorii nad tytułem pierwszej notki pojawi się nazwa wybranej kategorii.
  • Dodano tagi hierarchicznych nagłówków w kodzie html. Jest on teraz bardziej zrozumiały dla wyszukiwarek i podkreślone zostały kluczowe elementy na blogu.

Włączanie optymalizacji

Zaczynając od zera tradycyjnie proponuję przejść na stronę główną blox.pl, zalogować się do swojego bloksowego konta, wybrać blog w którym będzie się włączać optymalizację i przejść do jego edycji.

Następnie należy przejść do edycji wyglądu i wybrać część zatytułowaną POZOSTAŁE.

WYGLĄD - POZOSTAŁE - Optymalizuj szablon pod wyszukiwarki

Otworzy się niewielkie menu z duperelami. Ostatni na liście (trzeci) jest wybór włączenia (bądź nie) optymalizacji. Należy zaznaczyć opcję tak i kliknąć zapisz. ZROBIONE.

Optymalizuj szablon pod wyszukiwarki: TAK

Optymalizacja a szablon bloga

Wszystkie moje szablony są dostosowane do zmian SEO. Stare są poprawione, nowe robione już z pełnym kodem. Powinny się równie dobrze wyświetlać z włączoną optymalizacją jak i bez niej.

Jeżeli jednak korzystasz z szablonu zrobionego przez kogoś innego albo zdecydowałaś się pobrać szablon, który okazał się mocno stary ale poza brakiem opisu niektórych elementów jak najbardziej ci odpowiada to po dokonaniu optymalizacji zwróć uwagę na te rzeczy i ich opis w szablonie.

Tytuł bloga

  • Tytuł bloga opisany jest przy selektorze #BlogTytulText
  • Dodanie w HTML h1 sprawia, że słowom tytułowym przeglądarka dodatkowo przypisuje margines (margin) pogrubienie (font-weight:bold;) i relatywne powiększenie stopnia pisma (font-size:2em;)
    • Aby zneutralizować powyższe opisy należy użyć kombinatora
      #BlogTytulText h1 {
      margin:0;
      font-weight:normal;
      font-size:1em;
      }
  • Tytuł bloga jest linkiem więc ewentualny kolor tekstu należy określać przy kombinatorze uwzględniająym odwołanie do znacznika linku, np. takim: #BlogTytulText a

Tytuł wpisu

  • Tytuł wpisu opisany jest klasami .BlogWpisItemTytul (na stronie głównej) i .TytulKomentowanegoWpisu (na stronie z pojedynczą notką).
  • Dodanie w HTML znacznika linku a na stronie głównej i znacznika nagłówka h2 na stronie z pojedynczym wpisem powoduje pewne zmiany. Linki mają zazwyczaj inne kolory niż zwykły tekst więc i tytułowi zostanie on przypisany (color). Tytuł drugiego rzędu natomiast ma dodany dodatkowy margines (margin) pogrubienie (font-weight:bold;) i relatywne powiększenie stopnia pisma (font-size:1.5em;)
    • Aby zneutralizować opisy nagłowna na stronie z pojedynczym wpisem należy użyć kombinatora
      .TytulKomentowanegoWpisu h2 {
      margin:0;
      font-weight:normal;
      font-size:1em;
      }
      
    • Kolor linku tytułu notki na stronie głównej można zmienić przy kombinatorze
      .BlogWpisItemTytul a {
      color:crimson;
      }
      

Etykieta kategorii

  • Pojawia się dopiero wraz ze zmianami więc jej wygląd będzie niemal czysto przeglądarkowy: dodatkowy margines (margin) pogrubienie (font-weight:bold;) i relatywne powiększenie stopnia pisma (font-size:1.75em;).
    • Proponuję najpierw opisać wg uznania wygląd elementu, przykładowo tak:
      #BlogKategorieWybranaTytul {
      font-size:1.2em;
      text-align:right;
      padding:1em;
      }
    • A następnie zneutralizować niepotrzebne dodatki przeglądarki:
      #BlogKategorieWybranaTytul h3 {
      margin:0;
      font-weight:normal;
      font-size:1em;
      }
      

Boks z ostatnimi notkami na stronie z pojedynczą notką

Najwięcej problemów sprawić mogą ostatnie notki. Nie ma jednej prostej recepty na zapobieżenie ewentualnej katastrofie. Przede wszystkim problemu może w ogóle nie być. Najbardziej ogólne rozwiązanie to maksymalnie możliwa zgodność #SkomentujWazkaSzpalta z #BlogWazkaSzpalta.

  • #SkomentujWazkaSzpalta będzie znajdowało się zapewne mniej więcej w połowie kodu szablonu. Możesz odszukać ten fragment korzystając z wewnętrznej wyszukiwarki przeglądarki (Ctrl+F). Jeżeli jego opis jest taki sam jak #BlogWazkaSzpalta to zapewne nie będzie problemu. Zawsze możesz skasować cały opis #SkomentujWazkaSzpalta a selektor dopisać po przecinku obok #BlogWazkaSzpalta. Przy takim rozwiązaniu opis wąskiej szablony będzie dotyczył zarówno tej na stronie głównej jak i na stronie z pojedynczą notka.
  • Może być też tak, że wąska szpalta na stronie z pojedynczą notkę będzie potrzebowała własnego opisu, innego niż na stronie głównej. W taki przypadku opis dodaj tylko przy
    #SkomentujWazkaSzpalta {
    }
    

Jeżeli potrzebujesz bardziej skrótowego opisu albo wystarczy ci sam kod bez większych wyjaśnień to polecam notkę: Zmiany na Blox. Jest ona sumą porad eskey'a i s.z.y.m.o.na i moich własnych zmagań i doświadczeń z kodem. Oczywiście na bloksowej wiki również jest fragment na ten temat: Zmiany szablonów pod SEO.


Notki na podobne bądź powiązane tematy:

środa, 05 grudnia 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
FAQ - tytuł notki linkiem do niej z szablony katemac
Dzisiejsze pytanie się zdarza. Nie jest ono bardzo częste ale wystarczająco bym mogła powiedzieć, że się powtarza. Odpowiedz nie ma nic wspólnego z szablonem, a w każdym bądź razie z jakimkolwiek szablonem użytkowników. Jeżeli coś nie jest linkiem ... »
Wysłany 2012/10/27 13:15:29
Komentarze
2007/12/05 23:47:57
Kate, amnezja mnie dopadła, jak wstawić w zakładki obrazek, aby był linkiem do strony? obrazek jest w zasobach bloga.
Zapomniałam jak wygląda zapis:(
-
kate_mac
2007/12/06 08:48:13
tworząc nową zakładkę wpisujemy jako tytuł
[img src="http ://adres_obrazka"]
Zamiast kwadratowych nawiasów ostre a po http nie ma być spacji (jak oczywiście wiesz).
Adres obrazka podaję pełny, nie wiem czy zadziałam z samym resource.
Aby obrazek prowadził we właściwe miejsce należy jeszcze podać adres strony.

hmm zaglądam do bloxwiki i widzę, że adres może być skrócony...
mediawiki.gazeta.pl/blox/Zak%C5%82adki
-
2007/12/06 14:10:36
Dziękuję:)) Nie wiedziałam jak zapisać, gdy obrazek mamy w zasobach bloga, ale teraz już wiem:)
-
2007/12/06 15:17:25
generalnie zasada jest ta sama; owszem jak widać możesz podać skrócony adres ale jeżeli masz wątpliwości to zawsze możesz wpisać pełny;
odpowiedni plik otwórz sobie w nowej karcie i skopiuj jego adres z paska adresu w przeglądarce; w przypadku bloxa adres będzie wyglądał mniej więcej tak:
http ://nazwa_bloga.blox.pl/resource/nazwa_pliku.jpg
-
2007/12/07 12:32:05
Hej.

Wyjdzie że się czepiam. Ale w czerwonym 8 przez szeroką szpalte przechodzi taka jakby pionowa linia zmiany koloru. Prawa część (jakieś 40%) szpalty ma tło odrobinę zimniejsze a lewa bardziej kremowe. Aż się przestraszyłem że to mój monitor albo Opera, ale przy resize i w FFoksie też tak jest.

Chyba że tak specjalnie ma być.

Pozdr!

PS. Dzięki za dostosowanie czerwonych.
-
kate_mac
2007/12/07 15:17:24
Witaj,
nie czepiasz się wcale, jestem zawsze bardzo wdzięczna za tego typu uwagi.
W odpowiedzi na twoje przypuszczenie, nie, tak nie ma być. Tło zarówno wąskiej jak i szerokiej szpalty powinno być jednakowego koloru. To o czym piszesz jest możliwe ponieważ zrobiłam wszystkie grafiki na nowo przy okazji zmieniając kolor tła.
Niestety nie widzę tego o czym piszesz ani w Operze, ani w FF, ani nawet w IE.
Sprawdziłam zapis CSS i wszystkie kolory tła są odpowiednie. Tło w zasadzie jest powtarzającą się grafiką więc może to jakiś błąd grafiki. Dokładnie to samo tło użyłam przy 12 zielonym więc chciałabym Cię prosić abyś tam zerknął i powiedział mi czy tam też jest taki błąd.
-
2007/12/07 18:29:12
Ok, sprawdziłem. Uzyłaś tego samego tła, ale zielony ma odwrotny układ (wąska po prawej), dlatego tam wszystko gra. Różnica kolorów jest minimalna, RGB tej odróżniającej się cześci to 247/247/247 (a reszta jest 255/255/255); może na większości monitorów tego nie widać. W każdym razie, mam nadzieję że to rzuci troche światła ;) na sprawę:
www.retsat1.net/drno/szpalty.gif
Dolną częśc dodatkowo przejechałem kilka razy filtrem "enhance edges".

Pozdr.
-
kate_mac
2007/12/07 18:47:03
»lenahtan
dzięki Ci wielkie,
jutro zrobię nową grafikę aby nie było problemu
mój monitor jak widać słaby jest na takie sztuczki ;)
jeszcze raz dzięki
-
2007/12/08 18:34:33
:)
Miło było pomóc.
Pozdr.
-
matisitnik
2007/12/17 11:30:37
euro2008.blox.pl
Witam, skorzystałem z Pańskiego szablonu, który naprawdę mi się spodobał. A co najważniejsze pasuję do tematyki mojego bloga. Pozdrawiam.
-
kate_mac
2007/12/17 15:43:36
Miłego korzystania i cieszę się, że się Pani podoba mój szablon.
-
piotrwojcicki
2007/12/21 00:44:06
Wykorzystuję jeden z szablonów zielonych. Bardzo dziękuję za dzieło i możliwość zastosowania go w moim blogu. Pozdrawiam serdecznie.
-
2008/01/12 10:09:08
Dziękuję za szablon:)
crystalia.blox.pl/html
-
Gość: , *.neoplus.adsl.tpnet.pl
2008/03/06 16:38:39
Spróbowałam Twojego projektu i naprawdę mi smakuje, dodałam tylko trochę swoich specjałów-zapraszam fotoart.blox.pl - Kurka.
-
2008/04/12 11:05:33
Dziekuje za szablon nr 10:) dogblog.blox.pl/html pozdr K.
-
Gość: benek 4000, *.eimperium.pl
2012/03/01 15:12:10
W jaik sposób moge odzyskać skasowane zasoby bloga?
-
kate_mac
2012/03/01 17:35:03
@benek 4000
Nie mam pojęcia, to pytanie raczej do administratorów. Jaki ma ono związek z tematyką tego bloga???
Nie jestem pewna czy da się odzyskać skasowane zasoby bloga. Jeszcze notki można by próbować odzyskać dzięki pamięci wyszukiwarki google ale zasoby... nie wiem.
To pytanie powinieneś zadać na forum o blox albo w postaci maila do gazetowej pomocy.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...