O co chodzi?

Potrzebujesz grafiki na swojego bloga?
Banera, tła, drobnych elementów czy całego szablonu? Nie ma problemu. Grafika zajmuje się od paru lat i mogę zaoferować Ci coś wykonanego profesjonalnie i tylko dla Ciebie.


środa, 14 listopada 2012

Tutorial - Podobne posty w postaci linków

Na  życzenie Chabrowej Ani dzisiaj przygotowałam tutorial jak umieścić linki do podobnych postów pod postami. Jest to bardzo podobna rzecz do opisanego TUTAJ LinkWithin który umożliwia wyświetlanie miniatur postów pod każdym postem na stronie głównej. Instrukcja zamieszczona dzisiaj pozwoli wam umieścić podobną rzecz. Różnicą będzie to, że tym razem do postów prowadzić będą same linki zamiast obrazków a całość nie będzie wyświetlała się pod każdy postem a tylko pod tym aktualnie otwartym,

Ponieważ kodowanie nie jest i nigdy nie było moją mocną stroną pozwoliłam sobie przejrzeć gotowe skrypty stworzone przez innych i dostosować jeden z nich do potrzeb tego tutoriala.

Link do oryginalnego posta po angielsku można znaleźć TUTAJ. Jednak w tym tutorialu uprościłam trochę kod aby gadżet dopasował się sam wyglądem do bloga.



Jak zainstalować gadżet


1. Przed zabawą z kodem zrób kopie zapasową grafiki na blogu: INSTRUKCJA

2. Wejdź w ustawienia blogera i z lewego menu wybierz opcje 'Szablon'


3. Teraz kliknij na 'Edytuj kod HTML'
4. W następnym oknie kliknij kontynuuj.
5. Teraz widzisz przed sobą cały kod odpowiedzialny za wygląd Twojego bloga. Zanim zaczniemy wprowadzać w nim zmiany pamiętaj aby zaznaczyć pole 'Rozszerz szablony widżetów' nad nim.

6. Naszym zadaniem jest odnalezienie w tym kodzie dwóch elementów. Aby to zrobić naciskamy CTRL + F na klawiaturze i w nowym polu przeglądarki które się pojawi wpisujemy następujące wyrażenia:

</head>


Od razu pod tym wyrazem wklejamy cały kod umieszczony poniżej:



7. Teraz szukamy fragmentu:

<div class='post-footer-line post-footer-line-1'>

 I wklejamy od razu pod nim ten kod:
<!-- Related Posts Code Start-->
<!--Remove-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->

8. Zapisujemy zmiany


W tym momencie po wejściu w dowolny post pod spodem powinno pojawić nam się coś wyglądającego jak to:

O ile kolor treści powinien dopasować nam się do wyglądu bloga to możliwe, że będziemy chcieli zmienić dwie rzeczy. Pierwsza to napis nad linkami a druga to te śmieszne jabłuszka.

Zmiana Related Posts na dowolny napis


Wystarczy we fragmencie z pierwszego kodu:

var relatedpoststitle="Related Posts";

Wymienić Related Posts na dowolny inny napis np. 'Zobacz też:'


Zmiana ikonek przy linkach


Odpowiada za to ten fragment pierwszego kodu:

background: url(http://littletikeschildcare.files.wordpress.com/2008/03/apple20x20.png) no-repeat ;

Wystarczy podmienić link z linkiem do naszych ikon (warto zachować tą samą wielkość czyli 20x20 pikseli)


Autor:
Etykiety: , ,

2 komentarze:

  1. Unknown14 listopada 2012 11:09

    a co zrobić gdy w kodzie nie ma fragmentu: div class=' itd.

    :)
    u mnie niestety nie ma.

    OdpowiedzUsuń
  2. LazyKiwi14 listopada 2012 20:47

    No i fajnie. Będę miała chwilę wolnego czasu (dziś cały dzień komentuję zaległe blogi i końca nie widać) to odświeżę sobie HTMLa. Zwłaszcza, że już mam pomysł na nowy szablon :D Tak, notes z kartką i drewnem zdążył mi się znudzić :P

    OdpowiedzUsuń

Subskrybuj: Komentarze do posta (Atom)