Dodaj widget „posty rekomendowane” do bloga na Bloggerze

Jeden z najważniejszych elementów blogów. By zwiększyć ilość odsłon, musimy postarać się aby po skończeniu danego wpisu zatrzymać czytelnika jeszcze na trochę. Zrobić to możemy prezentując mu tematy podobne do aktualnie przeczytanego. Na blogach WordPress taki element istnieje lecz czemu Google zapomniało dodać tak istotnego elementu do bloggera? Nie mam pojęcia, ale dziś zainstalujemy taki widget w niecałą minutę.

Przed jakąkolwiek zmianą, powinniśmy zrobić kopię szablonu. By to zrobić wchodzimy w:

Panel nawigacyjny > Układ > Edytuj Kod HTML

i klikamy Pobierz pełny szablon. Zapisujemy plik XML na dysku.

Posty rekomendowane

Posty są dobierane poprzez czytanie etykiet. Jeśli jeden post, który czyta czytelnik ma etykietę np. samochody, skrypt poszuka postów z tą samą etykietą i zaprezentuje ja na ładnej liście.

1. Wchodzimy w Panel nawigacyjny > Układ > Edytuj Kod HTML

2. Klikamy Rozszerz szablony widżetów.

3. Szukamy taga </head>, PRZED nim wklejamy poniższy kod:

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://torrentmoon.com/javascripts/Related_posts_hack.js' type='text/javascript'/>

4. Teraz szukamy taga <data:post.body/> i dodajemy poniższy kod PO tagu:

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Posty rekomendowane : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

5. Klikamy Zapisz Szablon. Jeśli wszytko poszło dobrze, nie otrzymamy żadnych błędów przy przetwarzaniu szablonu.

Modyfikacje

Po pierwsze, zalecam pobranie http://torrentmoon.com/javascripts/Related_posts_hack.js i wrzucenie go na własny hosting. Po drugie zalecam także małą edycję. Jeśli nie chcemy aby na dole rekomendowanych postów wyświetlał się link do http://widgetsforfree.blogspot.com/2009/01/related-posts-widget-for-blogger.html trzeba usunąć:

document.write('</ul>');
document.write('<a rel="dofollow" href="http://widgetsforfree.blogspot.com/2009/01/related-posts-widget-for-blogger.html">Related Posts Widget [?]</a></font>');
}

z pliku Related_posts_hack.js.

Następną rzeczą jaką muszę wspomnieć to to, że skrypt nie jest idealny i rekomendowane posty zmieniają się za każdym odświeżeniem (może nie jest to jakąś ogromną wadą, ale jednak) oraz post aktualnie czytany, może pojawić się na tej liście.

Wracając do dalszych modyfikacji. max-results=5 oznacza, że skrypt porówna pierwszych pięć etykiet i dobierze rekomendowane posty na ich podstawie. Jeśli chcemy ustawić limit 10 maksymalnie wyświetlanych postów, w pliku Related_posts_hack.js musimy zmodyfikować jedną wartość.

Szukamy zatem linijki:

while (i < relatedTitles.length && i < 20) {

i zmieniamy wartość 20 na 10.

Ikonkę wyświetlającą się po lewej stronie posta (http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif) możemy oczywiście podmienić na własną.

Czcionki też możemy zmienić. Pewnie widzisz w kodzie takie elementy jak: „font face=’Arial’ size=’3′” itp. Zmieniając te opcje, dopasujesz wygląd widgetu do swojego bloga.

Jeśli dokonamy tego wszystkiego skrypt powinien wyglądać mniej więcej jak na tym blogu: