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ą.

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.

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.

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 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.

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

ZMIANA ODSTĘPU OD POSTA

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

ZMIANA WYGLĄDU TYTUŁÓW POSTÓW

.linkwithin_title {
}

W nawias wklejamy wybrane atrybuty:

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;
}

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