Jak dodać "podobne posty" do bloga (LinkWithin) + zmiana wyglądu

16 lut 2015

Pod ostatnim "blogowym" wpisem zostałam poproszona o instrukcję tego jak dodać gadżet "podobne posty" do bloga. Od jakiegoś czasu nosiłam się z zamiarem, aby przygotować ją dla Was  więc w końcu jest. Mam jednak coś więcej jak tylko tutorial o tym jak dodać "podobne posty" do bloga - pokażę Wam również jak sprawić, aby dodatek ten wyświetlał się tylko po rozwinięciu posta (nie zaśmiecamy dzięki temu głównej strony bloga) oraz jak zmienić jego wygląd oraz "You might also like" na dowolny polski napis. Dlatego ten wpis przyda się nie tylko osobom, które nie wiedzą jak dodać LinkWithin do bloga, ale również tym, które już go mają.

CO TO JEST DODATEK "PODOBNE POSTY"?

To gadżet, który możemy zainstalować na blogu wyświetlający pod każdym naszym postem propozycję wpisów powiązanych tematycznie. Wpisy, które zostaną zaproponowane czytelnikowi są dobierane za pomocą przypisanych do nich etykiet. Z moich obserwacji wynika, że im mniej etykiet przypisanych do jednego posta tym trafniej są dobierane propozycje.


INSTALACJA DODATKU "PODOBNE POSTY"

KROK 1: Wchodzimy na stronę LinkWithin.com

KROK 2: Uzupełniamy dane i klikamy "GET Widget!"
Podajemy swój e-mail i adres bloga. Z pierwszej listy rozwijanej wybieramy na jakiej platformie mamy bloga (np. blogger), a z drugiej ile propozycji podobnych postów ma być wyświetlanych (od 3 do 5). Dodatkowo jeśli nasz blog ma ciemne tło, a jasną czcionkę, wówczas zaznaczamy "ptaszka" przy "My blog has light text on a dark background".


KROK 3: Klikamy "Install Widget"


KROK 4: Wybieramy z listy blog na którym chcemy zainstalować "podobne posty" i klikamy "Dodaj Widżet". (Jeśli chcesz, aby dodatek pojawiał się tylko na stronie postów, bądź chcesz zmienić napis "You may also like" na polski to możesz zrobić to już na tym etapie. W tym celu zanim wykonasz KROK 5 przejdź do odpowiednich tematów poniżej)

KROK 5. Przenosimy widget pod kolumnę z postami i zapisujemy układ.


WYŚWIETLANIE "PODOBNYCH POSTÓW" TYLKO NA STRONIE WPISU.

Osobiście preferuję to rozwiązanie bo dzięki niemu nie zaśmiecamy głównej strony bloga. Po dokonaniu niżej opisanych zmian widget będzie wyświetlał się dopiero po rozwinięciu wpisu.
  • Jeśli dopiero instalujesz "podobne posty" i jesteś na KROKU 4 to rozwiń "Edytuj szablon" i zamień wpisaną tam zawartość na:

<b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/></b:if></b:includable>


  • Jeśli już masz zainstalowane "podobne posty" to przejdź w bloggerze do "Szablon". Zrób kopię zapasową szablonu. Kliknij "Edytuj kod HTML". Kliknij w dowolnym miejscu kodu i wciśnij CTR+F. W okienku wyszukiwania, które się pojawiło wklej title='LinkWithin' i wciśnij Enter. Zobaczysz taki kod:
<b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'><b:includable id='main'><data:content/></b:includable> </b:widget>
Zamień go na:

<b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'> <b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/></b:if></b:includable> </b:widget> 

 Całość zatwierdź klikając "Zapisz szablon" 


ZMIANA "YOU MIGHT ALSO LIKE" NA POLSKI NAPIS 



  • Jeśli dopiero instalujesz "podobne posty" i jesteś na KROKU 4 to rozwiń "Edytuj zawartość" i nad </script> wklej
  • var linkwithin_text = 'Podobne posty:'; W miejsce Podobne posty możesz wpisać dowolny tekst.

  • Jeśli już masz zainstalowane "podobne posty" to przejdź w bloggerze do "Układ" i otwórz gadżet "LinkWithin" klikając na nim "edytuj" i nad </script> wklej
  • var linkwithin_text = 'Podobne posty:'; W miejsce Podobne posty możesz wpisać dowolny tekst. Zatwierdź zmiany klikając "Zapisz"

    ZMIANA WYGLĄDU I POŁOŻENIA DODATKU "PODOBNE POSTY"

    W bloggerze wejdź w Szablon>Dostosuj>Zaawansowane> Dodaj arkusz CSS. Wklej w oknie wybrane kody i zatwierdź klikając "Zastosuj do bloga".

    WYŚRODKOWANIE CAŁEGO WIDGETU

    .linkwithin_inner {
    margin: 0 auto !important;
    }

    ZMIANA ODSTĘPU OD POSTA

    Wielkość odstępu regulujemy ilością pikseli ( -10 px, 10px, 20 px itp)

    .linkwithin_outer {
    margin: 10px 0 0 !important;
    }

    ZMIANA WYGLĄDU TYTUŁÓW POSTÓW

    .linkwithin_title {
    }

    W nawias wklejamy wybrane atrybuty:

    KOLOR TYTUŁUblack zamieniamy na wybrany kolor RGB np. z tej tabeli. Numer koloru należy poprzedzić znakiem # :
    color: black !important;

    POGRUBIENIE
    font-weight: bold !important;

    ROZMIAR CZCIONKI
    font-size: 14px !important;

    WYŚRODKOWANIE
    text-align: center!important;

    Przykład kodu, który wyśrodkuje, pogrubi i nada kolor:
    .linkwithin_title {
    text-align: center!important;
    font-weight: bold !important;
    color: #ff0024 !important;
    }

    OKRĄGŁE MINIATURY 

    Zmniejszając wartości px sprawimy, że miniatury nie będą okrągłe, ale będą miały zaokrąglone narożniki.

    .linkwithin_posts a div div {
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    }


    ZMIANA KOLORU TŁA PO NAJECHANIU KURSOREM

    black zamieniamy na wybrany kolor RGB  np. z tej tabeli. Numer koloru należy poprzedzić znakiem #

    .linkwithin_posts a:hover {
    background-color: black !important;
    }


    Tworząc powyższy poradnik posiłkowałam się tym forum.

    63 komentarze:

    1. U mnie LinkWithin nie działał, pokazywał listę postów bez ikonek :( Wywaliłam i dodałam Outbrain, ale za to nie chce mi działać polska wersja. Ech, żona informatyka... ;)

      OdpowiedzUsuń
    2. przydatny post, może kiedyś wykorzystam

      OdpowiedzUsuń
    3. Mała rzecz a cieszy16 lutego 2015 13:18

      Skorzystałam i dodałam polski napis :)

      OdpowiedzUsuń
    4. U mnie kilka miesięcy temu nie chciał dać się nawet zainstalować, aż nagle jest ok :) Próbowałaś wywalić i zainstalować jeszcze raz?

      OdpowiedzUsuń
    5. Świetna wskazówka, będę z niej korzystać :)

      OdpowiedzUsuń
    6. Muszę spróbować ponownie, dzięki!

      OdpowiedzUsuń
    7. Miałam kiedyś, po zmianie szablonu bloga zrezygnowałam, bo po zainstalowaniu Disqusa także wyświetlają się podobne posty pod komentarzami i stwierdziłam, że nie będę dokładać :) ale LinkWithin to też fajny gadżet :)

      OdpowiedzUsuń
    8. Kiedy zaczynałam swoją "przygodę" z bloggerem też miałam problem z tym gadżetem. Jakoś udało mi się przez to przebrnąć samej, ale myślę że takie wskazówki są bardzo cenne dla wszystkich początkujących.

      OdpowiedzUsuń
    9. A u mnie nie wyszukuje takiego kodu, gdy chcę mieć linkwithin tylko na stronie wpisu. A wyszukując linkwithin - mam zupełnie inny kod :(

      OdpowiedzUsuń
    10. A podeślij mi proszę na e-mail kopię swojego szablonu.

      OdpowiedzUsuń
    11. O, i znowu mi się przyda! Dodałam ten gadżet z miesiąc temu, ale dość szybko go usunęłam, właśnie przez to, że wizualnie zaśmiecał stronę główną. Zrobiło się zbyt przaśnie i kolorowo, na dodatek miałam mało postów i wciąż powtarzały się te same. Nie wiedziałam, że można dodać 'podobne posty' tylko na dole posta! Zrobię! Dziękuję i znów szampana stawiam;D
      PS: Masz jakiś pomysł, dlaczego w postach pogrubiła mi się czcionka? W nowo dodanym to samo...a pisząc post czcionka wygląda normalnie. Coś w kodzie html namieszałam?

      OdpowiedzUsuń
    12. To nie wygląda mi na pogrubienie tylko zmianę kroju bądź wielkości czcionki. Zauważ, że fragmenty, które sama pogrubiłaś wciąż się odznaczają jako pogrubione.

      OdpowiedzUsuń
    13. Dziękuję :) Idę działać u siebie :)

      OdpowiedzUsuń
    14. Już zrobiłam :) Z Twoimi wskazówkami to jest dziecinnie proste!!! Dzięki, dzięki dzięki :) :)

      OdpowiedzUsuń
    15. Ojj mnie instrukcja bardzo pomogła i jest tak jak chciałam :)
      Dziękuję bardzo za instrukcje : *

      OdpowiedzUsuń
    16. Super, że o tym napisałaś, ponieważ w ostatni weekend poświęciłam dużo czasu na znalezienie instrukcji jak to zrobić, ale w końcu się poddałam:).

      OdpowiedzUsuń
    17. Gadżet już zamontowany na moim blogu, śliczne dzięki za taką zwięzłą i jasną instrukcję. O, to ja mam pomysł. Jakbyś kiedyś szukała tematów do poradnika o blogowaniu, to ja bym się chętnie nauczyła jak w menu robić rozwinięcia kategorii. Np. mam kategorię Moje gotowanie i chciałabym zrobić podkategorie obiady, desery. Jakby były jeszcze jakieś osoby zainteresowane tym tematem, a Tobie chciałoby się o tym napisać, to chętnie skorzystam:).
      Miłego dnia

      OdpowiedzUsuń
    18. Może to pomoże?:) http://www.zyj-kochaj-tworz.pl/2015/02/jak-zrobic-rozwijane-menu-na-bloga-bez.html

      OdpowiedzUsuń
    19. Dziękuję, że zajrzałaś. Myślę nad tym od kilku dni i nie mam pojęcia dlaczego tak się stało. No nic, będzie grubo, póki nic nie wymyślę;]

      OdpowiedzUsuń
    20. Karolina Tomaszczyk17 lutego 2015 19:06

      nie wiem dlaczego u mnie jest niewidoczny, zrobiłam wszystko zgodnie z Twoją instrukcją a widget się nie pokazuje :/

      OdpowiedzUsuń
    21. Sprawdziłam, jeśli nie zrobię żadnych kombinacji w kodzie to jest na głównej stronie i oczywiście you might also like, jeśli coś zmienię od razu znika...

      OdpowiedzUsuń
    22. Kiedy chcę zmienić na polski napis to znika mi całkiem widget :/

      OdpowiedzUsuń
    23. O, no proszę bardzo już jest taki post:). Dziękuję:)

      OdpowiedzUsuń
    24. Łał, udało się! Dzięki za super ściągę :)

      OdpowiedzUsuń
    25. To można mieć okrągłe miniatury? :) Muszę pokombinować, dzięki :)

      OdpowiedzUsuń
    26. świetne! a moze wiesz jak usunąć separatory pomiędzy proponowanymi postami?

      OdpowiedzUsuń
    27. A mam jeszcze jedno pytanie:). Jak zwykle w weekend grzebię w blogu, wykorzystałam już dużo Twoich porad. Dzisiaj przyszła pora na porządki z datą. Już ją wypośrodkowałam, ale chciałabym ją przenieść tak jak u Ciebie pod tytuł posta. Patrzyłam w formatowaniu daty, ale tam chyba nie ma tej opcji. Jakaś podpowiedź;)?

      OdpowiedzUsuń
    28. Ale masz oko. Sama właśnie zmieniam trochę szablon, a datę przeniosłam wczoraj w nocy :)

      Znajdź w kodzie ten fragment:





      Trzeba go wyciąć i przenieść. Aby odnaleźć miejsce do wklejenia wyszukaj id='post' Rozwiń tę sekcję klikając w kropeczki ...

      W tej sekcji znajdź





      i pod tym wklej to co skopiowałaś. Ważne, abyś odnalazła ten fragment tak jak opisałam bo występuje on w różnych miejscach, a nam chodzi o jedno konkretne. Nie zapomnij zrobić kopi szablonu przez zabiegiem bo łatwo coś sknocić, a później trudno znaleźć błąd:)


      K.

      OdpowiedzUsuń
    29. I jeszcze jedną kreseczkę do gadżetów dodałaś i teraz jest podwójna, bardzo ładnie to wygląda:). Uffff, czyli nie tylko ja spędzam sobotnie wieczory na grzebaniu w blogu;). Dzięki za wskazówkę. Zmienię jeszcze tę datę i przez cały tydzień nic już nie będę wymyślać:)

      OdpowiedzUsuń
    30. Jakiś czas temu zaczęłam tworzyć swój blog i wszystkie Twoje informacje są niesamowicie pomocne:) Niestety ten gadżet u mnie nie działa:/ póki co czekam na informację z zwrotną z centrum pomocy. Mogłabyś mi podpowiedzieć jak zrobić te poziome linie, w których u Ciebie na blogu znajdują się nazwy gadżetów na pasku bocznym? Chciałam tez zapytać czy znasz sposób na zmianę wielkości zdjęć (chciałabym aby były one dużo większe), które pojawiają się w gadżecie "popularne posty". Pozdrawiam:)

      OdpowiedzUsuń
    31. Dziękuję za instrukcję. Jakiś czas temu zainstalowałam sobie ten gadżecik, ale po pewnym czasie zniknął.
      Pozdrawiam

      OdpowiedzUsuń
    32. no i nie działa :( a zrobiłam wszystko jak napisałaś [smuteczek]

      OdpowiedzUsuń
    33. u mnie jest to samo niestety :(

      OdpowiedzUsuń
    34. Czerwona Poziomka1 marca 2015 20:08

      Witaj:)


      Mam do Ciebie pytanie. Zainstalowałam wszystko i ustawiłam żeby wyświetlało gadżet tylko w poście oraz zmieniłam mu nazwę z angielskiej na PL. Problem jaki mam polega na tym, że nie wyświetlają mi się zdjęcia postów, jedynie napis ustawiony przeze mnie zachęcający do czytania tych postów. Moje pytanie brzmi: Co może być przyczyną? Czy to wyszukiwanie postów trwa po prostu i pojawią się po jakimś czasie? Dziękuje za pomoc. Pozdrawiam

      OdpowiedzUsuń
    35. U mnie też niestety nie do końca działa mimo instrukcji :/

      OdpowiedzUsuń
    36. Czerwona Poziomka3 marca 2015 15:29

      Mam to samo i nie wiem już co robić, żeby zaczęło działać:( rozwiązałaś jakoś ten problem? Pozdrawiam

      OdpowiedzUsuń
    37. Widzę kody z forum Blogowicza :P Od dawna nie korzystam już z tego dodatku, bo okazał się kiepski (psuje się, trzeba się gimnastykować z dopasowywaniem wyglądu, pokazuje małe ikony). W swoich szablonach dodaję skrypt, który za każdym razem dobiera świeżą listę polecanych postów, dobranych na podstawie użytych etykiet. Dzięki temu wchodząc dwadzieścia razy na daną stronę możemy za każdym razem dostać nieco inną serię miniatur.

      Internety sugerują też dodawanie powiązanych postów ręcznie, by w 100% pasowały do danego wpisu.

      OdpowiedzUsuń
    38. Widziałam na blogu PasjeKaroliny duże okienka Linkwithin, strasznie mi się to podoba, przeszukałam internet i nigdzie nie mogę znaleźć tutorialu krok po kroku jak je zwiększyć. Proponowany przez Karolinę sposób u mnie nie działa. Proszę o pomoc.

      OdpowiedzUsuń
    39. Szukam kodu, który pozwoli mi w tym dziadowskim widżecie powiększyć miniatury aby były duże jak an blogu Pasjekaroliny. Pomożesz?

      OdpowiedzUsuń
    40. O tak! To też mi się przydało. Nigdy nie potrafiłam sobie poradzić z LinkWithin a tu proszę - elegancko i łopatologicznie przedstawione krok po kroczku jak i gdzie kliknąć, by wszystko działało :) Dzięki :D

      OdpowiedzUsuń
    41. Jeśli Arek nie będzie mógł/chciał/miał czasu to ja niedługo będę ten temat rozkminiać.

      OdpowiedzUsuń
    42. Droga Karolino, byłabym Ci ogromnie wdzięczna, dzięki Twojemu blogowi wiele u siebie zmieniłam. Jestem z obecnego wyglądu mojego bloga zadowolona ale te małe okienka Linkwithin troszkę nie pasują do całego designu. Nie podołałam tylko usunięciu napisu Technologia Bloger ale to z powodu błędów w kodzie. Musiałabym chyba wszystko usunąć i zacząc od nowa dodawać gadżety żeby wszystko działało jak trzeba. Kod podany przez Karolinę z bloga Pasje Karoliny może nie jest przeznaczony i skorelowany z kodem html na blogspocie po wielokrotnych próbach niestety nie działa?

      OdpowiedzUsuń
    43. jejku nie byłam u ciebie jakiś zcas a tu takie zmiany, super, muszę częściej zaglądać. Wcześniej korzystałam z twoich blogowych rad i przyznam przydaly się.

      OdpowiedzUsuń
    44. Tu masz informację o tym jak się pozbyć stopki z szablonu: http://forum.blogowicz.info/topics106/blogger-jak-skasowac-stopke-szablonu-vt5753.htm

      OdpowiedzUsuń
    45. Miniatury pobierane są z serwera LW i mają wielkość 100x100, więc niewiele z tym zrobisz. Dlatego zacząłem stosować inne rozwiązania (wg mnie lepsze). Efekty można zobaczyć np. u jestemkasia i lumpexoholiczka.

      OdpowiedzUsuń
    46. Super to wygląda wręcz fenomenalnie! Jednak obawiam się, że ta wtyczka, jak sądzę jest możliwa do zainstalowania tylko na Wordpresie a ja działam jeszcze na nieszczęsnym bloggerze? Da się ją zainstalować na Bloggerze? Z góry dzięki za odpowiedz.

      OdpowiedzUsuń
    47. Dziękuję, to batalię z Blogerem zaczynam od nowa :)>

      OdpowiedzUsuń
    48. Nie wiem jak Ci dziekować, jutro zgłębie tajniki i spróbuję zainstalować ten gażet. Mam nadzieję, że mi się uda i wreszcie będę w pełni zadowolona z mojego bloga. Ogromnie dziękuję za informację :).

      OdpowiedzUsuń
    49. Dziękuję za przejrzystą formę podpowiedzi jak udoskonalić blog.
      Skorzystałam z Twoich rad i na pewno niejeden raz jeszcze coś zmienię :)
      pozdrawiam

      OdpowiedzUsuń
    50. Ostatnio się nad tym zastanawiałam, może teraz w wolnej chwili się skuszę (:

      OdpowiedzUsuń
    51. Mi nie działa :c Pisze mi: "Nie znaleziono strony"

      OdpowiedzUsuń
    52. Kiedy wejdę na bloga i kliknę na któryś z postów LinkWithIn

      OdpowiedzUsuń
    53. Usuń linkwithin i spróbuj jeszcze raz zainstalować - czasami pomaga. Jak nie pomoże do podrzuć link do swojego bloga.

      OdpowiedzUsuń
    54. Zaczęło działać? Bo wydaje mi się, że jest ok...:)

      OdpowiedzUsuń
    55. To znaczy tak, ogólnie działa :-) Z tym, że chciałam jeszcze spersonalizować kilka szczegółów no i w tym miejscu już nie zadziałało :/

      OdpowiedzUsuń
    56. Mam ten sam problem i w końcu na zagranicznym blogu znalazłam rozwiązanie - jeśli masz ustawione niewidoczne etykiety, ten widget nie działa.

      OdpowiedzUsuń
    57. Wiktoria Wieczorek24 czerwca 2015 19:18

      Nie działa ta strona :( czy jest jakaś inna strona do generowania wtyczki? albo sam kod?

      OdpowiedzUsuń

    Zostaw po sobie ślad. Każdy komentarz napędza do działania i dodaje skrzydeł. Właśnie Twój głos chcę usłyszeć!