Przyciski PIN IT - instalacja i darmowe przyciski

21 lip 2014



Rozstrzygnięcie konkursu w którym do wygrania jest "uszyty na miarę" baner blogowy za ponad tydzień. Jednak już dzisiaj każda z Was może jednak upiększyć swojego bloga i sprawić, że będzie bardziej funkcjonalny dla odwiedzających. Przygotowałam dla Was przyciski PIN IT! i instrukcję jak je zamieścić na swoim blogu. Przycisk taki pojawia się po najechaniu kursorem na zdjęcie, a kliknięcie w niego pozwala od razu czytelnikowi przypiąć Twoje zdjęcie do jego tablicy na Pinterest (możecie przetestować u mnie jak to działa).


JAK ZAMIEŚCIĆ PRZYCISK PIN IT (BLOGGER)

1. Otwórz dowolny dokument tekstowy (np. word) i wklej do niego poniższy kod. (kod pochodzi stąd)
<script>
//<![CDATA[
var bs_pinButtonURL = "tu wklej adres url obrazka";
var bs_pinButtonPos = "topright";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>


2. Wybierz jeden z przygotowanych przeze mnie przycisków, które są dostępne TU (poniższe przyciski widoczne na tej stronie są tylko ich ilustrację dlatego koniecznie wejdź TU).

3. Prawym przyciskiem myszy kliknij na wybrany przycisk i wybierz "Kopiuj adres URL grafiki".

4. Zastąp czerwony fragment kodu skopiowanym właśnie adresem. Adres musi być umieszczony w cudzysłowie.

5. Teraz skopiuj swój kod i przejdź do bloggera.

6. Wybierz "szablon" i kliknij "Edytuj kod HTML". Jeśli pojawią się jakieś ostrzeżenia, zaakceptuj i przejdź dalej. Nie bój się, to nie gryzie :P Za pierwszym razem, też miałam opory!:)








7. Kliknij w dowolny fragment kodu i wciśnij Ctrl+F. Pojawi się okienko wyszukiwania do którego wpisz </body> i naciśnij ENTER. W kodzie podświetli się wyszukiwany fragment. Zaraz pod nim wklej kod, który masz skopiowany.


8. Zapisz szablon. Otwórz bloga w innym oknie i sprawdź czy przycisk działa.



Nie jest to takie trudne jako może wydawać się na pierwszy rzut oka. Dajcie znać jak poszło i czy przyciski, które przygotowałam wpadły Wam w oko.

Na koniec przypominam o konkursie w którym możecie wygrać zaprojektowany specjalnie dla Was baner blogowy. Wygrają aż 2 osoby!!!:)


Ściskam!
Karolina

35 komentarzy:

  1. O matko, taki wybór! Zwariuję! Który wybrać, który...?! :)))

    OdpowiedzUsuń
  2. Super że pokazałaś ale pogubiłam się już w 1 punkcie tzn otwieram worda coś tam jest zapisane i te dziwne napisy gdzie mam wkleić?????Przepraszam ale nie mam pojęcia jak to zrobić:).....pozdrawiam

    OdpowiedzUsuń
  3. a u mnie odnośnik do grafik nieistnieje tzn odnosi mnie do nieistniejącej strony

    OdpowiedzUsuń
  4. Bardzo praktyczny kurs! Najbardziej podobają mi się przyciski w 3 linijce od dołu :D

    OdpowiedzUsuń
  5. Mam pytanko coś mi nie wychodzi doszłam do punktu 7. tam gdzie się wpisuje w to okienko wciskam wtedy enter wtedy pojawia się więcej linijek z dziwnymi napisami-nic mi to nie mówi ......i rozumiem mam odnaleźć linijkę z nazwą body i potem nawiasie czyli wkleić skopiowany na czerwono w cytacie podany kod zapisuje......tak zrobiłam i nie wyszło;( ...co ja robię źle.....?

    OdpowiedzUsuń
    Odpowiedzi
    1. Ważne, abyś znalazła całą tę frazę /body wraz z nawiasami <>. Bezpośrednio pod tą frazą wklejasz kod uzupełniony o adres wybranego obrazka (Za nawiasem <> a nie w środku). Wklejasz cały kod podany przeze mnie w instrukcji, ale czerwony fragment trzeba zastąpić adresem URL wybranego obrazka. Który przycisk wybrałaś? Wkleję Ci cały kod, który musisz zamieścić u siebie.

      Usuń
  6. Jestem ciekawa czy w taki sam sposób mozna zrobić przycisk na Stylowi ?? Ponieważ konta na pinterest nie posiadam, ale za to na Stylowi mam ;-))

    OdpowiedzUsuń
    Odpowiedzi
    1. Wszystko da się zrobić, pamiętaj tylko, że to przycisk dla Twoich czytelników. Sama nie musisz mieć konta:)

      Usuń
  7. Czyli ten przycisk sprawia, że użytkownik pinterest automatycznie wrzuca zdjęcie do swojego albumu tak ?

    OdpowiedzUsuń
    Odpowiedzi
    1. To dziękuję za informację , myślałam że ja muszę tam mieć swoje konto ;-)) zatem w wolnej chwili spróbuję u siebie zamontować owy gadżet ;-))

      Usuń
    2. Super, już mam przycisk ;-)) Dziękuję!

      Usuń
  8. Jest mały błąd w kodzie. Brakuje na końcu "pt>" :) mam też znaczek u siebie :)

    OdpowiedzUsuń
    Odpowiedzi
    1. i nie mogę mieć tego kodu bo mi koliduje z paskiem bocznym :/

      Usuń
    2. Rzeczywiście obcięłam, ale już poprawione. Dziękuję Ci baardzo za czujność! Z ciekawości muszę dopytać co Ci się dokładnie dzieje z tym paskiem?

      Usuń
  9. Super, działa:) a jest jakiś myk, żeby przycisk umieścić na środku obrazka?
    Pozdrawiam!

    OdpowiedzUsuń
    Odpowiedzi
    1. A jest:) W 4 lini kodu

      var bs_pinButtonPos = "topright"

      zmieniasz na

      var bs_pinButtonPos = "center"

      Usuń
  10. Dzięki za pomoc! I już jest w porząsiu:)

    OdpowiedzUsuń
  11. Wyświetla się pin it, ale niestety przeskalowuje go do ogromnych rozmiarów :/

    OdpowiedzUsuń
    Odpowiedzi
    1. Skorzystałaś z moich ikonek?

      Usuń
    2. Skorzystałam, ale efekt był ten sam.
      Poszperałam w necie i znalazłam rozwiązanie, a tym samym zmieniłam ikonkę.
      Ale bardzo dziękuję za odpowiedź :)

      Usuń
    3. Zdradzisz co było problemem? Może się to komuś jeszcze przyda!:)

      Usuń
  12. U mnie Pin it zaczęło wyświetlać się automatycznie po założeniu konta na Pintereście, więc nie myślałam jeszcze o tego rodzaju upiększeniu na blogu, ale... kto wie? Może warto by było chociaż ikonkę zmienić :) Pozdrawiam :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Wystarczy, że czytelnik skorzysta z innej przeglądarki na której nie jest zalogowany na Pinterest lub z czyjegoś komputera i nie będzie miał ikonki - lepiej nie ryzykować:P

      Usuń
  13. oj kochana, dla mnie to jak I etap budowy promu kosmicznego , ha ha ha :)

    OdpowiedzUsuń
  14. Zamontowałam i wszystko działa. Bardzo jasno wszystko wytłumaczyłaś. Dziękuję bardzo i pozdrawiam!

    OdpowiedzUsuń
  15. Ale super! Działa. Bardzo fajnie to wytłumaczyłaś. Jestem początkującą blogerką - dla mnie to wszystko czarna magia. A tu szast-prast i zrobione. Dziękuję!

    OdpowiedzUsuń
  16. Fiu fiu! Ależ mam przycisk! Dziękuję za kod :)

    OdpowiedzUsuń
  17. Działa! Dziękuję za instrukcję. :))
    HTML to dla mnie czarna magia, dzięki Tobie mogę poprawić coś, na co sama długo bym nie wpadła jak to zrobić.
    Pozdrawiam serdecznie! Iza

    OdpowiedzUsuń
  18. Udało się!!! Dziękuję bardzo, jesteś nieoceniona :)

    OdpowiedzUsuń

Zostaw po sobie ślad. Każdy komentarz napędza do działania i dodaje skrzydeł. Właśnie Twój głos chcę usłyszeć!