Szablony na blogi Blogger (blogspot)

Piękne, nowoczesne i funkcjonalne szablony dla blogerów blogujących na platformie Blogger

Szablon KOLORA

szablon na bloga

Szablon Simpla

szablon na bloga blogger/blogspot

Szablon STYLIA

szablon na bloga

Najnowsze na blogu

Porady, dokładne instrukcje krok po kroku i wiele więcej. Poradnik blogera

Jak dodać gadżet Pinterest: tablica i piny z tablicy

czwartek, 18 lutego 2016
Dzisiaj coś dla entuzjastów serwisu Pinterest i jednocześnie bloggera. Otóż dodamy na bloga gadżet, który pokaże na Pin'y, a w zasadzie po postu całą zawartość wybranej tablicy Pinterest.

Instrukcja krok po kroku na przykładzie mojego nowego, świeżutkiego profilu BLOGia - oczywiście zapraszam, odwiedźcie mnie ;)

Jak na bloga dodać tablicę z Pinterest

Dodawanie tego gadżetu jest bardzo proste. Pamiętacie dodawanie gadżetu Facebook'a? Tu jest podobnie: należy skonfigurować czyli dopasować sobie wygląd gadżetu, a następnie wkleić w odpowiednie miejsca wygenerowany kod. I tyle. Zaczynamy ...

KROK 1. Skopiuj adres tablicy

Wchodzimy na swój profil.

Wybieramy/klikamy wybraną tablicę, przechodzimy do paska adresu, zaznaczamy i kopiujemy cały adres internetowy:

Krok 2. Wejdź na stronę Pinterest i skonfiguruj gadżet:

Wejdź na stronę Pinterest'a: https://developers.pinterest.com/tools/widget-builder/?type=board&boardHeight=240&boardWidth=400&imageWidth=80&template=square

Domyślnie gadżet wyświetla zawartość tablicy Pitnerest. Aby ustawić własną tablicę należy skopiowany wcześniej adres wkleić w pole URL tablicy na Pintereście:



Po poprawnym wklejeniu adresu widoczna powinna być zawartość naszej tablicy:

Możemy wybrać Wielkość (wielkość/kształt) gadżetu, do wyboru mamy: Kwadrat, Pasek boczny,  Nagłówek. Jeżeli propozycje te nam nie odpowiadają to wybieramy Utwórz własne i ustawiamy parametry Szerokość zdjęcia, Wysokość tablicy i Szerokość tablicy.

W przypadku, gdy gadżet ustawiany będzie na pasku bocznym bloga, powinniśmy przede wszystkim rozpocząć od ustawienia Szerokości, tak by gadżet zmieścił się. Gdy jest za długi zmniejszamy Wysokość. Gdy obrazki/piny są zbyt małe to powiększamy Szerokość zdjęcia. Pamiętaj jednak, że nie są to dokładne wymiary gadżetu, tylko orientacyjne, to Pinterest dobiera nam wymiary, my tylko oznaczamy więcej/mniej.
Dokładne wymiary są widoczne na samym dole (podkreśliłam czerwoną linią poniżej). Należy manewrować tymi 3 parametrami, aby uzyskać pożądany wygląd:





Krok 3: Pobranie i wklejenie kodu gadżetu (do szablonu, gadżetu bloggera)

Gdy wygląd widgetu nam odpowiada przechodzimy do umieszczenia go na blogu. Na dole pod podglądem wtyczki znajduje się kod, który należy umieścić w szablonie.
Są to dwa kody.

Kod pierwszy 
Kopiujemy pierwszy kod. Wklejamy go w miejsce, w którym chcemy, by gadżet był widoczny. Może być to np pasek boczny bloga, stopka ... itd.

Po skopiowaniu kody, przechodzimy do Układ i klikamy Dodaj gadżet w wybranym miejscu np pasku bocznym:


Wybieramy gadżet o nazwie HTML/JavaScript. W pole Tytuł wpisujecie nazwę np Pinterest, w pole treść wklejacie skopiowany wcześniej kod gadżetu, zapisujemy:
Dodany gadżet HTML/JavaScript oraz wklejony kod pierwszy skopiowany z Pinterest

Możecie teraz również umieścić gadżet w wybranym miejscu, po prostu przeciągnąć go.

Kod drugi

Teraz trudniejsze zadanie. Wracamy na Pinterest i kopiujemy drugi kod. Musimy wkleić go do szablonu. Dlatego teraz idziemy do Bloggera, klikamy Szablony > Edytuj kod HTML.

Przed wszelkimi zmianami w szablonie należy wykonać sobie jego kopię. Pamiętajcie, że nawet jeden niefortunny znaczek, a może się nam "rozjechać cały wygląd bloga". Robimy kopię: jak zrobić kopię szablonu blogger oraz przechodzimy dalej.

Wyszukujemy w kodzie instrukcję </body>. Aby to zrobić klikamy w pierszą linię kodu szablonu i uruchamiamy wyszukiwanie, czyli wciskamy na klawiaturze jednocześnie klawisze Ctrl i F. W okienko wyszukiwania wpisujemy:

</body>
oraz wciskamy Enter, aby wyszukać kod. W kodzie zostanie oznaczony wyszukiwany fragment, tutaj oznaczony kolorem żółtym przez wyszukiwarkę Chrome. Nad linią zawierającą </body> należy teraz wkleić skopiowany drugi kod (jeśli potrzeba zrób sobie miejsce tworząc pusty wiersz/linię po prostu wciskając Enter):


Zapisujemy zmiany.



Na blogu w wybranym miejscu powinien pojawić się gadżet, piny z wybranej tablicy Pinterest.




Pomysł na posta powstał jako odpowiedź na zadanie mi pytanie (poprzez Zadaj pytanie):
Mam pytanie, w jaki sposób dodać pinterestowego widgeta do swojej witryny na blogerze, tak aby ukazał się skrót zdjęć z tablicy, a nie tylko znaczek "P" lub "Pin it".
Jeżeli pomogałam albo po prostu uważacie, że post jest przydatny, nie zapomnijcie kliknąć Lubię to poniżej. Dziękuję ;)


Autor: Kasia Kluska (blogia / blogopasja)

6 komentarzy

  1. Taki bład wyszedł:(
    Błąd podczas analizowania pliku XML, wiersz 1008, kolumna 15: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.

    OdpowiedzUsuń
    Odpowiedzi
    1. u mnie to samo :( co trzeba zrobić??

      Usuń
    2. Hej, blogia nie wkleiła dokładnie tego linka którego miała przy Pintereście. Zauważcie, że jest async="" defere="". a kopiując macie async defere. Zmieńcie ręcznie.
      Ja po zmianie nie mam błędu, natomiast nie widać gadżetu na blogu

      Usuń
  2. U mnie się nie udało, bo w całym szablonie nie ma body (piszę bez znaków, bo mnie tu moderator nie puszcza). I ten sam błąd wyszedł jak świetlicowym Inspiracjo,jak próbowałam wkleić drugi kod gdzie indziej.

    OdpowiedzUsuń
  3. U mnie niestety też się nie udało. Nie wyskoczył mi żaden błąd, ale nie widać gadżetu na blogu :(

    OdpowiedzUsuń

Zamów szablon

Podobają ci się moje szablony?
Chcesz kupić szablon, ale masz jeszcze pytania? Napisz.

A może indywidualny projekt?
Szablon na zamówienie to indywidualny wygląd bloga, stworzony specjalnie dla Ciebie.

Kocham piękne rzeczy, kocham projektować wyglądy blogów, kocham tworzyć niesamowite szablony. Doskonale znam Bloggera, jestem programistą, łatwo współpracuję z ludźmi i nie spocznę zanim nie stworzę doskonałego bloga dla Ciebie. Więc ... na co jeszcze czekasz? Napisz do mnie.

Nazwa (np imię, nazwisko):

E-mail (pole obowiązkowe):

Wiadomość (pole obowiązkowe):