Jak dodać gadżet "zobacz podobne wpisy" na bloggera

21 grudnia 2015


Nie mówię tutaj o gadżecie Linkwithin, do którego już była robiona instrukcja. Mowa tutaj o gadżecie podobnym do Linkwithin, ale nie musimy wchodzić na różnego rodzaju strony, aby wygenerować kod do danego gadżetu. Gadżet ten działa na bazie etykiet i pojawi się nam na stronie po wklejeniu jednego skryptu oraz po oznaczeniu wpisów etykietami.

1. Przechodzimy do szablon - (zrób kopię zapasową szablonu) - edytuj kod HTML 



2. Klikamy kursorem w obojętne jakie miejsce w kodzie i wybieramy ctrl+f lub (Mac) cmd+f i w okienko, które nam się pojawi wpisujemy </body>, a następnie klikamy enter.


3. Po wyszukaniu </body> tuż NAD tym znacznikiem wklej poniższy kod:


<!-- BEGIN CODE IT PRETTY RELATED POSTS GALLERY CODE -->
<b:if cond='data:blog.pageType == "item"'>
<style>
.related-posts {
  width: 100%;
  margin: 2em 0;
  float: left;
}
.related-posts ul li {
  list-style: none;
  margin: 0 5px;
  float: left;
  text-align: center;
  border: none;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//<![CDATA[
$(document).ready(function() {


  //CODE OPTIONS
  var maxSearched = 500;
  var minimum = 3;
  var maximum = 5;
  var imageSize = 150;
  var roundImages = false;
  var relatedTitle = true;
  var labelInTitle = true;
  var relatedTitleText = "more posts about";
  var defaultImage = "";
  var campaignTracking = false;
  var campaignSource = "";
  var campaignMedium = "";
  var campaignName = "";
  var postLabels = $('.post-labels a');
  var insertBefore = $('.post-footer');

  //END CODE OPTIONS - DO NOT EDIT BELOW THIS LINE
  var labels=[];var label;var alternateLabel;var minposts=minimum-1;if(postLabels.length===1){label=postLabels.text().trim()}else if(postLabels.length>1){$(postLabels).each(function(){labels.push($(this).text().trim())});label=labels[Math.floor(labels.length*Math.random())];var labelLocation=labels.indexOf(label);if(labelLocation===labels.length-1){alternateLabel=labels[labelLocation-1]}else{alternateLabel=labels[labelLocation+1]}}if(label!==undefined){var title=$(".entry-title").text().trim();var labelCount=0;var alternateLabelCount=0;var matches=[];var url=$('link[rel="alternate"][title*="Atom"]').eq(0).attr("href");$.ajax({url:url,data:{"max-results":maxSearched,alt:"json-in-script"},dataType:"jsonp",success:function(e){$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){labelCount++}if($.inArray(alternateLabel,r)!==-1){alternateLabelCount++}}});if(labelCount<=minposts&&alternateLabelCount>=minposts){label=alternateLabel}$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){var s=e.feed.entry[t].title.$t.trim();if(s!==title){var o;for(var u=0;u<e.feed.entry[t].link.length;u++){if(e.feed.entry[t].link[u].rel==="alternate"){o=e.feed.entry[t].link[u].href}}var a;if(e.feed.entry[t].media$thumbnail!==undefined){a=e.feed.entry[t].media$thumbnail.url.split(/s72-c/).join("s"+imageSize+"-c")}else{a=defaultImage}if(matches.length<maxSearched&&campaignTracking===false){matches.push('<li><a href="'+o+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}else if(matches.length<maxSearched&&campaignTracking===true){matches.push('<li><a href="'+o+"?utm_source="+campaignSource+"&utm_medium="+campaignMedium+"&utm_campaign="+campaignName+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}}}}});if(matches.length>=minimum){if(relatedTitle===true&&labelInTitle===true){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+' <span class="related-term">'+label+"</span></h5><ul></ul></div>")}else if(relatedTitle===true&&labelInTitle===false){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+"</h5><ul></ul></div>")}else{insertBefore.before('<div class="related-posts"><ul></ul></div>')}matches.sort(function(){return.5-Math.random()});for(var t=0;t<maximum;t++){$(".related-posts ul").append(matches[t])}}insertBefore.css("clear","both");$(".related-posts ul li").css({"max-width":imageSize,"border":"none","padding":"0"});if(roundImages===true){$(".related-posts ul li img").css({"width":imageSize,"height":imageSize,"border-radius":"50%"})}else{$(".related-posts ul li img").css({"max-width":imageSize,"height":"auto"});}}})}
});
//]]>
</script>
</b:if>
<!-- END CODE IT PRETTY RELATED POSTS GALLERY CODE -->

4.  Analiza kodu:

Pierwsza część kodu - CSS:

<style>
.related-posts {
  width: 100%;
  margin: 2em 0;
  float: left;
}
.related-posts ul li {
  list-style: none;
  margin: 0 5px;
  float: left;
  text-align: center;
  border: none;
}
</style>

W tej części kodu możemy podopisywać sobie różne style jak np. obramowania, cienie etc.

Druga część kodu (wartości na kolorowo są zmienne):

 //CODE OPTIONS
  var maxSearched = 500;  var minimum = 3;  var maximum = 5;  var imageSize = 150;  var roundImages = false;  var relatedTitle = true;
  var labelInTitle = true;  var relatedTitleText = "Zobacz również:";  var defaultImage = "";
  var campaignTracking = false;
  var campaignSource = "";
  var campaignMedium = "";
  var campaignName = "";
  var postLabels = $('.post-labels a');
  var insertBefore = $('.post-footer');

Tutaj są ustawienia dotyczące naszego gadżetu. 

Ilość przeszukiwanych postów na blogu. Jeśli chcemy, aby wyszukiwało nam mniej powiązanych wpisów, to po prostu musimy zmienić liczbę na mniejszą. 500 - to maksymalna liczba. 
Najmniejsza ilość pokazywanych wpisów 
Największa ilość pokazywanych wpisów 
Rozmiar miniatur
Zaokrąglenie lub brak zaokrąglenia miniatur. Jeśli chcemy mieć zaokrąglone miniatury musimy false zamienić na true
Pokazywanie z jakich etykiet wyświetlany jest wpis czyli np. "Zobacz również: lifestyle". Jeśli chcemy mieć sam napis "Zobacz również:" musimy zmienić true na false  
Tekst jaki ma się pojawić nad polecanymi wpisami 

4. Efekt końcowy:

WAŻNE! Aby polecane wpisy się wyświetlały musimy mieć przynajmniej 3 wpisy oznaczone tą samą etykietą!

70 komentarzy:

  1. A jak dodać takie właśnie ''Zobacz również'', ale żeby wyświetlały się popularne posty lub ostatnio dodane? :)

    OdpowiedzUsuń
  2. Jeśli chodzi o popularne posty to w bloggerze jest gadżet, który dodajemy do kolumny bocznej i wówczas wyświetlają nam się wszystkie popularne wpisy. Jednak nie wiem czy o to Ci chodzi. Zdecydowanie prościej by było jakbyś pokazała gdzie na jakimś blogu taką opcje ;)

    OdpowiedzUsuń
  3. natalia20041989 .21 grudnia 2015 20:28

    Jak zwykle świetna instrukcja:)

    OdpowiedzUsuń
  4. Świetny poradnik, muszę się kiedyś za to zabrać i dodać do swojego bloga, bo kiepsko to u mnie wygląda :)

    OdpowiedzUsuń
  5. Ależ ja się tego naszukałam i nakombinowałam z tym... A tu proszę, taki prosty poradnik! Dziękuję. :)

    OdpowiedzUsuń
  6. Ciekawa propozycja i bardzo fajny efekt :)

    OdpowiedzUsuń
  7. Wszystko fajnie, ale dla mnie to czarna magia :( :P

    OdpowiedzUsuń
  8. My już coś ta mamy i na razie nie będziemy zmieniać xD Ale dobrze wiedzieć, że tu taką instrukcję możemy znaleźć :)

    OdpowiedzUsuń
  9. Myślę, że dałabyś radę! :D

    OdpowiedzUsuń
  10. Wbrew pozorom jest to bardzo przydatny gadżet :)

    OdpowiedzUsuń
  11. Chodzi mi o to żeby popularne posty wyświetlały się na końcu posta czy tak pod postem. :)

    OdpowiedzUsuń
  12. Z tego co wiem to w Bloggerze jest to raczej nie wykonalne, bo popularne posty działają tutaj jako oddzielny gadżet, a nie jako część szablonu, którą można przenieść ;)

    OdpowiedzUsuń
  13. Oj podoba mi się. Chyba nawet bardziej od Linkwithin :) Możliwe, że spróbuję. Dziękuję! <3

    OdpowiedzUsuń
  14. Spróbuj, spróbuj :)
    Nie ma za co ;)

    OdpowiedzUsuń
  15. Jej, jak mi się podoba ta instrukcja i jak ja jej kiedyś szukałam. Na pewno skorzystam!

    OdpowiedzUsuń
  16. Dodałam to do bloga testowego. Nie działa, ale pojawiło się więcej białego tła pod miejscem na komentarze.

    OdpowiedzUsuń
  17. Mogę być dwie przyczyny:
    1. Nie ma wystarczająca ilość etykiet (minimum 3 te same etykiety dodane do 3 wpisów) i nie są one widoczne (w opcjach zostały wyłączone)
    2. Jest dodany jakiś kod w szablonie, który się gryzie z kodem z tej instrukcji

    OdpowiedzUsuń
  18. Ok, czyli pewnie jedynka, bo w testowym nie mam za wiele etykiet.

    OdpowiedzUsuń
  19. Pewnie tak :) Czasem trzeba odczekać chwilkę za nim gadżet "załapie". Jakby jednak gadżet nie działał to dawaj znać, spróbujemy coś zaradzić :)

    OdpowiedzUsuń
  20. Na pewno 1, na głównym działa :) Czyli wszystko ok.

    OdpowiedzUsuń
  21. Właśnie o takim gadżecie marzyłam <3

    OdpowiedzUsuń
  22. Uff. Po tygodniu zmagań z różnymi kodami UDAŁO SIĘ :)
    Dziękuję.

    OdpowiedzUsuń
  23. Właśnie tego szukałem! Dziękuję :)

    OdpowiedzUsuń
  24. ja sobie zrobiłam wyzwanie i zmieniam bloga na bardziej profesjonalnego. Korzystając z twojego tutorialu mam na blogu "podobne wpisy" tylko napis mi się nie podoba- zwłaszcza jego wielkość. Zmieniłam wielość z 150 na 200 ale nie ma żadnej zmiany...ty masz ładnie to wyśrodkowane :D Dzięki wielkie za to, że mnie inspirujesz :D

    OdpowiedzUsuń
  25. Super, że się podjęłaś takiego wyzwania :D Jeśli chodzi o czcionkę wyśrodkowaną to dopisz do tej części kodu:

    .related-posts ul li {

    list-style: none;

    margin: 0 5px;

    float: left;

    text-align: center;

    border: none;

    }

    font-size: 40px; (wartość oczywiście zmienna) :)

    OdpowiedzUsuń
  26. Cieszę się, że trafiłam na Twój blog :) Byłam zadowolona z tego jak mój wygląda, ale zainspirowałaś mnie by jeszcze nad nim troszkę popracować (wszystkie zmiany w standardowym szablonie wprowadzałam sama, z czego jestem dumna :D ). Będę sobie czytać w wolnych chwilach i sprawiać, by mój blog jeszcze bardziej cieszył moje oko :)

    OdpowiedzUsuń
  27. Super, że mój blog zainspirował Cię do zmian! Jeszcze bardziej się cieszę z tego, że próbujesz sama swoich sił ;)

    OdpowiedzUsuń
  28. dziękuję! cały dzień szukałam, grzebałam i nic i dzięki Twemu blogowi udało sie!!!!!! Jestem bardzo wdzięczna :)
    orientujesz się może dlaczego nie chce mi w edytuj kod html wyszukać jakiejś frazy (np jak chciałabym spersonalizować "czytaj więcej" Pozdrawiam

    OdpowiedzUsuń
  29. Może wstawiłaś niechcący spacje przed lub za wyszukiwaną frazę, lub była jakaś literówka ;)

    OdpowiedzUsuń
  30. Marcelina Kędzierska20 maja 2016 15:36

    Hej, jeśli wpiszę "font-size" zmienia się rozmiar tekstu w proponowanych postach, a chciałabym, aby zmieniła się wielkość czcionki "zobacz również", jak to zrobić?

    OdpowiedzUsuń
  31. Dopisz font-size do tej części .related-posts {

    width: 100%;

    margin: 2em 0;

    float: left;

    }

    OdpowiedzUsuń
  32. Zupełnie zmieniam szablon na blogu, na koniec chciałam dodać "podobne wpisy", ale gadżet się nie wyświetla. Nie działa ani ten ani drugi sposób, ani nawet LinkWithin. Gdzie szukać przyczyny?
    Z góry dziękuję za odpowiedź :)

    OdpowiedzUsuń
  33. LinkWithin nie działa na Bloggerze od jakiegoś czasu i nie wiem czemu, nie ja za to odpowiadam :)
    Drugi sposób nie działa, bo - pisałam o tym w komentarzach pod tamtym wpisem - zmiany są wprowadzane na Bloggerze i jak znajdę chwilę czasu, to zrobię aktualizację wpisu. Ten gadżet natomiast, działa pod warunkiem, że damy mu czas do namysły, aby sobie skompletował wpisy i mamy przynajmniej 3-4 wpisy oznaczone tą samą etykietą :)

    OdpowiedzUsuń
  34. A co jeśli nie mam body?

    OdpowiedzUsuń
  35. To znaczy, że masz szablon z błędem lub pobraną nie pełną wersje z internetu, a wtedy wersji demo się nie modyfikuje, bo może dojść do sytuacji jak usunięcie szablonu/bloga.

    OdpowiedzUsuń
  36. Wkleiłam kod, ale nie działa. A bardzo by mi się przydał.

    OdpowiedzUsuń
  37. Pisałam już we wcześniejszych komentarzach - trzeba chwilę odczekać aż gadżet wyłapie wpisy. Czasem trwa to do 24h ;)

    OdpowiedzUsuń
  38. A wiesz co co trzeba zmienić żeby etykiety wyświetlane były w poście? Bo w obecnym szablonie tego nie mam.

    OdpowiedzUsuń
  39. W układzie bloga trzeba edytować kolumnę z postami i tam zaznaczyć etykiety ;)

    OdpowiedzUsuń
  40. Wiem. Mam włączone, ale ten szablon je ukrywa.

    OdpowiedzUsuń
  41. Może jest dodany kod w szablonie, na ukrycie etykiet?

    OdpowiedzUsuń
  42. Możliwe, ale nie wiem jak to odszukać.

    OdpowiedzUsuń
  43. Od początku prowadzenia bloga szukam takiego gadżetu, bo Linkwithin mnie nie zachwycił: wyświetlał co chciał, jak chciał i kiedy chciał, a czasem wcale. Skorzystałam z instrukcji i mam to, co chciałam - gadżet działa prawidłowo, w dodatku jest bardzo ładny, estetyczny. Dziękuję!

    OdpowiedzUsuń
  44. U mnie niestety nie zadziałało :( Nie wiem czemu :(

    OdpowiedzUsuń
  45. A zrobiłaś wszystko tak jak jest napisane? Dopisalas odpowiednio etykiety? Odczekalas 24h? No i najważniejsze szablon jest pobrany czy nie?

    OdpowiedzUsuń
  46. Tak wszystko zrobiłam zgodnie z instrukcją. Etykiety mam w każdym poście, tylko są ukryte tzn nie wyświetlają się pod postami. Szablon to systemowy blogera - "rewelacja" tylko trochę sama go zmieniałam ale głównie przez dodawanie kodów CSS. Tak, 24 godziny minęły :(

    OdpowiedzUsuń
  47. Miałam pisać, żebyś odkryła etykiety ;) Skoro działa to super :)
    Możesz: .post-labels {display:none;}

    OdpowiedzUsuń
  48. Dziękuję bardzo! :D Teraz wszystko działa i wygląda tak jak chciałam :) Chociaż pewnie teraz zacznę kombinować z innym elementem :D

    OdpowiedzUsuń
  49. Dziękuję! Faktycznie LinkWithin nie działa i zastanawiałam się o co chodzi, myślałam, że tylko ja mam taki problem. Jednakże chciałabym o coś zapytać, ponieważ wchodząc w konkretny wpis wyświetlają mi się te podobne posty, natomiast na stronie głównej już nie. Tak powinno być? Mając LinkWithin wyświetlało się na stronie głównej przy każdym poście stąd pytanie. :)

    OdpowiedzUsuń
  50. Dziękuję CI ! Od kilku dni się z tym męczyłam i w ogóle nie działało. Mam tylko pytanie, czy da się te ikony ze zdjęciami jakoś wypośrodkować? U mnie całość bardzo zjeżdża na lewą stronę.

    OdpowiedzUsuń
  51. Dziękuję bardzo za ten post :) Wszystko świetnie rozpisane, czytelnie. Nawet taki laik jak ja dałam sobie z tym radę i to dosłownie w kilka chwil :) Dziękuję :)

    OdpowiedzUsuń
  52. Nie ma za co :)
    Cieszę się, że wszystko się udało ;)

    OdpowiedzUsuń
  53. Synergia Przyjemności24 stycznia 2017 15:34

    Bardzo fajne ale u mnie jakoś się nie wyświetla...

    OdpowiedzUsuń
  54. Czy zostało wszystko wykonane tak jak w instrukcji i przede wszystkim czy zostały odczekane 24h? Na niektórych blogach gadżet wczytuje się dłużej, szczególnie jak jest dużo wpisów.

    OdpowiedzUsuń
  55. Mam mały problem. Wczoraj zmieniłam szablon na blogu i chciałam sobie ponownie dodać ten gadżet. Przy wcześniejszym szablonie działał bez zarzutu i praktycznie od razu. A teraz robiłam wszystko zgodnie z instrukcją i nadal nic. Widziałam w komentarzach, że trzeba poczekać 24h. Odczekałam i dalej nic. Czy to, że pobrałam darmowy szablon z sieci może mieć jakieś znaczenie? :) Masz jakiś pomysł czy mogłabym coś z tym zrobić, żeby działało? :) Z góry dziękuję za pomoc :)

    OdpowiedzUsuń
  56. Szablon pobrany z zagranicznej strony ? Darmowa wersja? :)

    OdpowiedzUsuń
  57. Z Polskiej :) Od Karografia :) Darmowa wersja :)

    OdpowiedzUsuń
  58. Nie wiem jak to jest w darmowych szablonach u Karoliny, ale niektórzy robią tak, że skracają kod szablonu i wtedy może nie działać, może również się gryźć z innym skryptem lub jest już zainstalowany gadżet w danym szablonie ;)

    OdpowiedzUsuń
  59. Mhm :) Trudna sprawa :) Mimo wszystko dzięki za pomoc :)

    OdpowiedzUsuń
  60. Synergia Przyjemności26 stycznia 2017 10:06

    Tak ale dziś wgrałam jeszcze raz i poczekam z 2 dni ;) Obecnie mam Linkwithin ale wkurza mnie, że wyświetla się też na głównej stronie.

    OdpowiedzUsuń
  61. Jaki szablon? Pobrany z internetu może? Czy zwykły Bloggerowy? Jeśli chodzi o Linkwithin - można go ukryć na stronie głównej, napisz do mnie na maila, to Ci napisze ;)

    OdpowiedzUsuń
  62. Mnie też nie działa, a mam szablon z Karografii. Czy muszę zmienić szablon żeby zadziałało? :/

    OdpowiedzUsuń
  63. Tak jak napisałam to w poprzednim komentarzu - nic się nie zmieniło w tej kwestii.

    OdpowiedzUsuń
  64. czarywkuchni10 maja 2017 16:17

    Świetny post :) Bardzo chciałam to zrobić i mi się udało dzięki Twoim instrukcją:)

    OdpowiedzUsuń
  65. Czarywkuchni10 maja 2017 16:20

    Super post! Bardzo mi pomógł...

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona