sobota, 19 grudnia 2009

Analizy odwiedzin bloggera (Google Analytics)

Tworząc bloga warto pokusić się o zapewnienie sobie możliwości śledzenia ilości odwiedzin i charakterystyk użytkowników. Od jakiegoś czasu jednym z najciekawszych, a na dostatek w pełni darmowych, rozwiązań jest Google Analytics. System ten jest dostepny dla każdego i w łatwy sposób można korzystać z niego aby analizować użycie swojego bloga.

Na początek musimy zarejestrować się na Google Analytics. Jeśli mamy już bloggera, to praktycznie nie nastręcza to problemów - w końcu to też Google.

Podajemy swoje dane kontaktowe.


Następnie tworzymy nowy profil analityczny dla naszej strony.




Podajemy adres http do naszego bloga i wciskamy zakończ.

W kolejnym oknie otrzymujemy fragment kodu, który musimy wkleić w szblonie HTML naszego bloga.

Dla bezpieczeństwa wykonujemy kopię zapasową naszego kodu HTML: "Układ" -> "Edytuj kod HTML", zaznaczamy "ptaszek" przy "Rozszerz szablony widżetów" i wybieramy "pobierz pełny szablon". Zapisujemy plik na dysku komputera.

W oknie kodu HTML schodzimy na sam dół i tuż przed znacznikiem
</body>
wklejamy kod wygenereowany przez Google Analytics.

Teraz musimy odczekac kilka minut.

Wracamy do witryny google analytics i wyświetlamy nasz profil. Adres naszego bloga powinien już być zarejestrowany. aby zweryfikować, że kod "się przyjął" klikamy "Edytuj" z prawej strony.

Na następnej stronie mamy raport dla danej subskrybcji analizy.

Klikamy "Sprawdź status" i powinniśmy otrzymać informację "Oczekiwanie na dane" lub "Odbieranie danych". (W razie potrzeby mamy tu tez dostęp do poprawnego kodu jaki wklejaliśmy do naszego szablonu).

W przypadku błędu trzeba sprawdzić czy nie pomyliliśmy się w adresie naszej strony i czy poprawnie wkleiliśmy kod do naszego szablonu.

Raporty będą dla nas dostępne już następnego dnia z poziomu profilu Google Analytics. Wystarczy kliknąć "Wyświetl raport".


sobota, 12 grudnia 2009

Poziome menu w nagłówku bloggera

Często chcemy dodać pasek menu na górze strony, czyli w nagłówku (pod lub nad bannerem).
W standardowych szablonach bloggera nie ma takiej możliwości, ale można osiągnąć taki efekt bawiąc się trochę kodem szablonu bloga dostępnym w ustawieniach, w opcji "Edytuj kod HTML".

W tym przykładzie będę pracował na szablonie "Minima Black", ale dla innych szablonów rodzaj wprowadzanych modyfikacji i sam sposób jest analogiczny. Naszym celem jest umożliwienie dodania kolejnych widżetów do nagłówka (tam gdzie znajduje się tytuł bloga i/lub banner).

Na początek wykonujemy kopię zapasową naszego kodu HTML: "Układ" -> "Edytuj kod HTML", zaznaczamy "ptaszek" przy "Rozszerz szablony widżetów" i wybieramy "pobierz pełny szablon". Zapisujemy plik na dysku komputera.

Musimy odnaleźć następujący fragment kodu:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
W tym kodzie istotne są dwa parametry:
maxwidgets - który określa maksymalną ilość widżetów w danym oknie,
showaddelement - który okresla, czy jest widoczny skrót umozliwiający dodanie nowego widżeta.

Modyfikujemy tę sekcje w następujący sposób:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
Dzięki temu będziemy mogli dodać jeszcze jeden widżet.

Kolejną modyfikacja powinno być swtorzenie odpowiedniego stylu prezentacji danych (linków) wyliczeniowych w elemencie nagłówka (header). w tym celu musimy dodać definicję odpowiedniego stylu. Na przykład takiego:
#header ul li {
display: inline;
padding: 0 5px;
}
Styl ten należy wkleić w sekcji zawierajacej definicje styli CSS w kodzie HTML tuż przed nastepującym wpisem:
]]></b:skin>
</head>
Teraz otwieramy "Układ" -> "Elementy strony" i widzimy, że w nagłówku możemy dodać widżet.
Możemy dodać na przykład widżet "Lista linków", za pomocą, którego podłączamy nasze statyczne strony bloggera.

(opis tworzenia statycznych stron na bloggerze znajduje się w serii wpisów: "Statyczne strony w bloggerze (cz.1, cz.2, cz. 3)"

niedziela, 6 grudnia 2009

Strony statyczne w bloggerze (cz. 3)

Mamy za sobą następujące kwestie:
  • pozbyliśmy się nagłówka z datą we wpisie pełniącym rolę strony statycznej (cz. 1),
  • strony statyczne nie są wyświetlane w widżecie "Archiwum" (cz. 2).
To oczywiście działa w przypadku odpowiedniego publikowania postów w zadanej dacie, najlepiej w roku poprzedzającym rozpoczęcie działalności blogowej.

Teraz zajmiemy się kwestią nawigacji na naszych pseudo-statycznych stronach.

Jak pewnie zauwazyliście, na dole tych stron nadal dostępna jest nawigacja "Nowszy post" - "strona główna" - "Starszy post" - a w przypadku stron statycznych nie jest to potrzebne, a wręcz niewskazane.

Do dzieła!

Standardowo zaczynamy od wykonania kopii zapasowej naszego kodu HTML: "Układ" -> "Edytuj kod HTML", zaznaczamy "ptaszek" przy "Rozszerz szablony widżetów" i wybieramy "pobierz pełny szablon". Zapisujemy plik na dysku komputera.

W kodzie musimy odnaleźć następujący fragment odpowiadający za wyświetlanie nagłówka daty posta.:
<b:include name='nextprev'/>
Zamieniamy ten cały fragment na następujący:
<b:if cond='data:post.dateHeader != "wtorek, 1 stycznia 2008"'>
<b:include name='nextprev'/>
</b:if>
Jak widać dodatliśmy warunek, który przez interpreter bloggera zostaje odczytany w następujący sposób: "Jeśli data posta jest różna od "wtorek, 1 stycznia 2008" to wyświetl nawigację dla posta".

W przeciwnym razie nawigacja nie zostanie wyświetlona.

Zapisujemy szablon i tesujemy.

Jeśli mamy już kilka stron testowych, które robiliśmy na podstawie poprzednich porad (cz.1 i cz. 2) to w ramach testów wystarczy podejrzeć wynik działań na tych opublikowanych wpisach.

czwartek, 3 grudnia 2009

Strony statyczne w bloggerze (cz. 2)

Postępując zgodnie z instrukcjami z poprzedniego posta otrzymaliśmy jako efekt stronę opublikowaną z datą wsteczną (poza kalendarzem działania naszego bloga), w której nagłówku nie jest wyświetlana data. Teraz trzeba się zająć widżetem "Archiwum", który wyświetla tę stronę - a my przecież chcemy, żeby tam były tylko posty.

Na początek wykonujemy kopię zapasową naszego kodu HTML: "Układ" -> "Edytuj kod HTML", zaznaczamy "ptaszek" przy "Rozszerz szablony widżetów" i wybieramy "pobierz pełny szablon". Zapisujemy plik na dysku komputera.

Zapamiętujemy to i przechodzimy do "Układ" -> "Edytuj kod HTML". Zaznaczamy "ptaszek" przy "Rozszerz szablony widżetów".

Teraz w zależności od tego czy wykorzystujemy "Hierarchię", "Płaską listę" czy "Menu rozwijane" należy wykonać następujące instrukcje:

W przypadku wybrania opcji "Hierarchii" w kodzie musimy odnaleźć następujący fragment odpowiadający za wyświetlanie zawartości archiwum:


<b:includable id='interval' var='intervalData'>
Całą sekcję rozpoczynaną przez ten znacznik (includabe) należy zamienić na następujący fragment:

<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.name != "2008"'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:if>
</b:loop>
</b:includable>
Jak widać dodatliśmy warunek w pętli, który przez interpreter bloggera zostaje odczytany w następujący sposób: "Jeśli rok publikacji posta jest różny od "2008" to wyświetl w archiwum i uzględnij posta w liczniku".
W takim zapisie, w widżecie "archiwum" nie będzie wyświetlany cały rok 2008.

 W przypadku wybrania opcji "Płaskiej listy" w kodzie musimy odnaleźć następujący fragment odpowiadający za wyświetlanie zawartości archiwum:
<b:includable id='flat' var='data'>
Całą sekcję rozpoczynaną przez ten znacznik (includabe) należy zamienić na następujący fragment:
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<b:if cond='data:i.name != "styczeń 2008"'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:if>
</b:loop>
</ul>
</b:includable>

Jak widać dodatliśmy warunek w pętli, który przez interpreter bloggera zostaje odczytany w następujący sposób: "Jeśli miesiąc i rok publikacji posta jest różny od "styczeń 2008" to wyświetl w archiwum i uzględnij posta w liczniku".
W takim zapisie, w widżecie "archiwum" nie będzie wyświetlany cały miesiąc styczeń 2008.

W przypadku wybrania opcji "Menu rozwijanego" w kodzie musimy odnaleźć następujący fragment odpowiadający za wyświetlanie zawartości archiwum:
<b:includable id='menu' var='data'>
Całą sekcję rozpoczynaną przez ten znacznik (includabe) należy zamienić na następujący fragment:
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<b:if cond='data:i.name != "styczeń 2008"'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:if>
</b:loop>
</select>
</b:includable>
Jak widać dodatliśmy warunek w pętli, który przez interpreter bloggera zostaje odczytany w następujący sposób: "Jeśli miesiąc i rok publikacji posta jest różny od "styczeń 2008" to wyświetl w archiwum i uzględnij posta w liczniku".
W takim zapisie, w menu rozwijanym widżeta "archiwum" nie będzie wyświetlany cały miesiąc styczeń 2008.

Zapisujemy szablon i tesujemy.

W "Zamieszczanie postów" -> "Nowy post" wpisujemy tytuł i treść posta. Klikamy "Opcje posta". Następnie w opcji "Data i godzina posta" zaznaczamy "Zaplanowano na" i wpisujemy wybraną przez nas datę (w odpowiednim formacie) - u mnie "08-01-01".

Publikujemy posta i sprawdzamy na blogu. W widżecie "Archiwum" nie powinien być wyświetlany ten post.
Nadal możemy się do niego dostać za pomocą nawigacji "starszy post" - "nowszy post".

Pozostaje nam wyświetlić ten konkretny wpis bloga, który będzie nam słuzył za stronę statyczną, skopiować jego adres i w menu za pomocą widżeta "Lista linków" lub "HTML/Java script" dodać jako odnośnik w menu bocznym.