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.

piątek, 19 października 2012

Gadżety - Podobne posty czyli miniatury w stopce posta

Jak zrobić aby odnośniki z miniaturami postów pojawiały się w stopce (czyli na dole) każdego posta. To pytanie dostaje od was dość często więc dzisiaj przygotowałam instrukcje gdzie znaleźć i jak zainstalować taką rzecz. Zrobiłam rozeznanie jak najlepiej i najprościej taki gadżet na bloga wrzucić i dziś przedstawię wam najpopularniejszą i najprostszą wersje (może w przyszłości pokuszę się o prezentacje innych). Mowa tu o skrypcie LinkWithin.

Jak wgrać ten gadżet na bloga?

1. Wchodzimy na stronę http://www.linkwithin.com

2. Na stronie głównej mamy mały formularz do wypełnienia. Wygląda on tak:

Wystarczy w nim podać:
1. e-mail - Nie jestem pewna czy musicie podawać aktualny. Testowo dodałam sobie ten gadżet i nie przyszedł do mnie żaden e-mail.
2. Adres bloga na którym chcecie gadżet
3. Platforma - Dla blogów na bloggerze wybieramy po prostu Blogger z rozwijanej listy.
4. Szerokość - Ile miniatur chcemy aby było wyświetlane na raz. Możemy wybrać 3,4 lub 5.
5. Ten kwadrat zaznaczamy gdy chcemy aby tło gadżetu było czarne zamiast domyślnie białego

Gdy wszystkie miejsca są wypełnione klikamy ten duży niebieski przycisk 'Get Widget'

3. Przenosi nas na nową stronę i tylko dwa kliknięcia dzielą nas od wgrania gadżetu :). Mamy tutaj obrazkową instrukcje jak wgrać gadżet jednak dotyczy ona starego interfejsu bloggera więc umieszczę tutaj sama aktualne obrazki.
Zaczynamy od kliknięcia w napis u góry strony 'Install widget'.



4. Na następnej stronie postępujemy tak samo jak przy gadżecie z top komentatorkami (kto nie czytał tutoriala zapraszam TUTAJ)

Polecam nazwę gadżetu zostawić pustą

5. Po kliknięciu 'Dodaj widżet' przeniesie nad automatycznie do ustawień układu naszego bloga.

6. Ostatnią zmianą jest przeciągnięcie stworzonego gadżetu do kolumny środkowej pod prostokąt nazwany 'Posty w blogu'. Jeśli pole z nazwą gadżetu zostawiłyście puste to będzie się on wyświetlał jako HTML/JavaScrpit. U mnie pojawiał się za każdym razem na górze lewej kolumny. Naciskamy go lewym klawiszem myszy i nie puszczając przeciągamy w miejsce pod posty. Na koniec klikamy 'Zapisz zmiany'


Zmiana wyglądu gadżetu (zaawansowane)


Zmieniać można praktycznie wszystko ale niestety nie jest to proste. Podam tutaj te najpopularniejsze rzeczy które mogą wam się przydać

Zmiana napisu 'You might also like:' który domyślnie wyświetla się nad miniaturami


1. Wchodzimy w ustawienia bloggera -> szablon -> edytuj kod html


2. W oknie, które wyskoczy klikamy 'kontynuuj'

3. Widzimy teraz cały kod naszego bloga. Polecam przed wprowadzaniem zmian zrobić kopie zapasową (Instrukcja TUTAJ). Musimy znaleźć fragment <head> . Jest on praktycznie na samej górze kodu. Jeśli go nie widzimy można go wyszukać. Najlepiej zrobić to klikając CTR+F i używając wyszukiwania przeglądarki (ma ktoś z tym problem? Bo może do tego też powinnam zrobić mini instrukcje?)
I od razu pod <head> wklejamy ten fragment:

<script>linkwithin_text='NAZWA JAKĄ CHCEMY WYŚWIETLIĆ:'</script>

WAŻNE: wymieniamy tylko napis NAZWA JAKĄ CHCEMY WYŚWIETLIĆ: na nasz. Resztę zostawiamy tak jak jest. Wszystkie ' są ważne.

4. Zapisujemy zmiany. 

Usuwanie odnośnika do LinkWthin z gadżetu


1. Wchodzimy w ustawienia bloggera -> szablon -> dostosuj -> zaawansowane i wybieramy ostatnią opcje 'Dodaj własny arkusz CSS'.

2. W oknie po prawej wklejamy:

#linkwithin_logolink_0 {display:none;}

3. Zapisujemy zmiany

Zmiana koloru/wielkości tekstu nad miniaturami


1. Wchodzimy w ustawienia bloggera -> szablon -> dostosuj -> zaawansowane i wybieramy ostatnią opcje 'Dodaj własny arkusz CSS'.

2. W oknie po prawej wklejamy:


.linkwithin_text { 
color: #FF683F   !important; 
font-size: 16px   !important; 

Gdzie: 
color: #FF683F - odpowiada za kolor całej czcionki. Zmieniamy go wymieniając #FF683F na dowolny inny kolor. Kody kolorów możemy znaleźć przy dowolnym elemencie z naszego bloga wchodząc w ustawienia bloggera -> szablon -> dostosuj -> zaawansowane i klikając dowolną rzecz.

font-size: 16px - odpowiada za wielkość liter nad miniaturami. Zmieniamy wymieniając 16 na inną liczbę.

3. Zapisujemy zmiany

Zmiana koloru tła przed i po najechaniu na prostokąt


1. Wchodzimy w ustawienia bloggera -> szablon -> dostosuj -> zaawansowane i wybieramy ostatnią opcje 'Dodaj własny arkusz CSS'.

2. W oknie po prawej wklejamy:


.linkwithin_posts a { 
background: #ffffff  !important; 

.linkwithin_posts a:hover { 
background: #643ab5 !important; 

Gdzie:
.linkwithin_posts a { 
background: #ffffff  !important; 

Dotyczy tła przed najechaniem. Ponownie wymieniamy #ffffff na dowolny kolor.

A:
.linkwithin_posts a:hover { 
background: #643ab5 !important; 

Dotyczy tła prostokąta po najechaniu. 



Jeśli coś jest nie jasne albo chcecie abym coś jeszcze dodała do tego tutoriala - Zapraszam do komentarzy :)


23 komentarze:

  1. Dobry post :) dodaje do ulubionych - bo jestem w trakcie reorganizacji... btw - zjadło J na początku :)

    OdpowiedzUsuń
  2. to jakaś moda na dodawanie instrukcji dotyczących linkwithin :D?
    swoją drogą - Twój sposób na ukrywanie linka nie jest poprawny, bo gadżet w każdym boksie generuje go z innym identyfikatorem.

    OdpowiedzUsuń
    Odpowiedzi
    1. Może i nie poprawna ale działa ^^. Staram się jak mogę, jestem jednak jedynie grafikiem :)

      Usuń
  3. Bardzo dobry post ;) Jeśli kiedykolwiek będę potrzebowała tego gadżetu to mam nadzieję pamiętać, że pisałaś o tym na swoim blogu.

    OdpowiedzUsuń
  4. Świetny post, tego właśnie potrzebowałam :) Dzięki!

    OdpowiedzUsuń
  5. post jest świetny, naprawdę nie da się nie zrozumieć :)
    mam tylko taki problem, że utknęłam na kroku, w którym ma nas przenieść do ustawień układu naszego bloga. Po prostu mnie nie przenosi :(((

    OdpowiedzUsuń
    Odpowiedzi
    1. Mam to samo, i nie wiem czemu mnie nie przenosi dalej...

      Usuń
    2. Mnie tak samo, kilka razy już próbowałam, nawet na róznych przeglądarkach :/

      Usuń
  6. każdy ma to samo, ja również utknęłam w momencie kiedy mam się przenieść do ustawień bloga :(

    OdpowiedzUsuń
  7. W końcu zmieniłam ten gadżet tak jak chciałam, dzięki za za jasno i prosto napisaną instrukcję. :)

    OdpowiedzUsuń
  8. Cudownie, wreszcie trafiłam na sensownie napisany artykuł na ten temat;) Pozdrawiam i dziękuję

    OdpowiedzUsuń
  9. Wow, mega pomocny post! Wszystkie porady przejrzyste i bardzo konkretne, nie miałam najmniejszego problemu z ich zrozumieniem i zastosowaniem na swoim blogu. Bardzo dziękuję!

    OdpowiedzUsuń
  10. Dziękuję!! Kawał dobrej roboty:)

    OdpowiedzUsuń
  11. Super post, Bardzo przydatny! Jedno pytanie czy można zmienić posty, do których podawane są odnośniki? Nie wszystkie mi do końca odpowiadają. Będę wdzięczna za info. POzdrawiam

    OdpowiedzUsuń
  12. wgrałam na bloga Linkwithin, jednak nie pojawiają mi się miniatury zdjęć a wyłącznie tytuły postów, już próbowałam odinstalować i wgrać ponownie i nadal ten sam efekt .. jak można to zmienić?

    OdpowiedzUsuń
  13. super :) udało mi się, nie jestem dobra w odwzorowywaniu takich rzeczy ale świetnie to przedstawiłaś, dzięki :)

    OdpowiedzUsuń
  14. Jezeli mam szablon kafelkowy, a chciała bym mieć podobne posty tylko pod postem, a nie na stronie głównej :)

    OdpowiedzUsuń
  15. Dziękuję za rady:) Masz może jakiś patent, żeby powiększyć te okienka?

    OdpowiedzUsuń
  16. Podbijam prośbę o wytłumaczenie, jak powiększyć okienka. Oraz jak je wyśrodkować, bo mam na lewej stronie, co mi przeszkadza.

    OdpowiedzUsuń