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

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.

FACEBOOK | GOOGLE + | TWITTER | INSTAGRAM | PINTEREST | BLOGLOVIN