Jak dodać przycisk pin it do zdjęcia

8 kwietnia 2015


Pewnie większość z was wie co to jest Pinterest, a jak nie to już wszystko tłumaczę. Pinterest to jest wirtualna tablica korkowa. Tworzymy różne albumy, do których dodajemy np. zdjęcia naszych prac plastycznych, inspiracji i wiele więcej. Możemy również "przypinać pinezki" naszym ulubionym zdjęciom. Na moim profilu obecnie znajdują się zdjęcia z wykonanych dotychczas zadań z ZTD oraz TNK. W skrócie wytłumaczyłam o co chodzi z Pinterest, a teraz postaram się krótko i zwięźle wytłumaczyć o co chodzi z buttonem pin it.
Button pin it to nic innego jak wirtualna pinezka. Wstawiając taki button na swojego bloga inni po najechaniu myszką na zdjęcie mogą "przypiąć pinezkę", wtedy zdjęcie z danego bloga znajdzie się w waszych ulubionych. Button ten ułatwia to o tyle, że nie musimy kopiować zdjęć z danej strony (co nie zawsze nam wolno ponieważ na większości blogach, każdy autor wspomina o tym, że treść na blogu jest objęta prawami autorskimi) aby dodać je na do swojej tablicy, tylko od razu dajemy pinezkę i możemy cieszyć się naszą inspiracją w ulubionych.
Poniżej przedstawiam wam instrukcje jak możemy dodać nasz button pin it na bloga.

UWAGA! Przed dokonaniem jakichkolwiek zmian w edytorze kodu HTML, zrób kopię zapasową szablonu. 

1. Przechodzimy szablon - edytuj kod HTML

2. Wstawiamy kursor w obojętnie jakim miejscu w kodzie i klikamy ctrl + f. Otworzy nam się panel wyszukiwania, w który wpisujemy </body> 


3. Kiedy już wyszukamy danego elementu w kodzie to NAD </body> wklejamy kod


<script>
//<![CDATA[
var bs_pinButtonURL = "URL BUTTONU";
var bs_pinButtonPos = "center";
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>

Mała analiza kodu:

<script>
//<![CDATA[
var bs_pinButtonURL = "URL BUTTONU"; - URL BUTTONU zamieniamy na link naszego buttonu 
var bs_pinButtonPos = "center"; - pozycja naszego buttonu, możemy zmienić na left lub right. 
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>

Mój kod wygląda tak: 

<script>
//<![CDATA[
var bs_pinButtonURL = "http://i1291.photobucket.com/albums/b555/parma9/pin6_zpsy0buepei.png";
var bs_pinButtonPos = "center";
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>

4. Efekt końcowy




Na koniec, przygotowałam dla was 20 buttonów pin it do pobrania. Możecie je pobrać TUTAJ. Są one zapisane w pliku ZIP, a to oznacza, że po pobraniu trzeba będzie je rozpakować. Instrukcja poniżej.

Jak rozpakować plik ZIP

Nie ma tu wielkiej filozofii, po prostu klikamy na niego jak na każdy inny folder. Pojawiają nam się pliki, które musimy wyciąć i wkleić do innego folderu. Jednak jeśli ta metoda nie pomoże to wtedy musimy pobrać program WinRAR wtedy rozpakowywanie pliku ZIP wygląda tak:

1. Tworzymy nowy folder, do którego będziemy mogli przenieść nasze pliki.


2. Następnie klikamy na nasz plik ZIP (czyli folder z zamkiem) prawym przyciskiem myszki i wybieramy: Open with WinRAR


3. Nasze pliki otworzą nam się w WinRAR, zjeżdżamy na sam dół i wszystko zaznaczamy


4. Następnie klikamy na Extract To 



5. Pojawi nam się drugie okno, w którym szukamy naszego folderu, wybieramy go, a następnie klikamy OK


6. Nasze buttony są już rozpakowane i gotowe do użycia


W tym tutorialu znowu trzeba będzie wgrywać nasze buttony na stronę typu tinypic, tutorial do tego pojawił się we wpisie o personalizacji zakładki o mnie

Przypominam o wiosennym konkursie, w którym do wygrania jest design bloga. Wszelkie informacje dotyczące konkursu znajdziecie TUTAJ

16 komentarzy:

  1. Nie mam tam konta. Jednak kiedy się na to zdecyduje to będę już wiedziała gdzie szukać dobrej porady :)
    obserwuje:)

    OdpowiedzUsuń
  2. Akurat u mnie się nie przyda, ale może kiedyś?
    A tak w ogóle to fajna tapeta :)

    W wolnej chwili zapraszam do mnie:
    http://magia-zwyklego-zycia.blogspot.com/

    OdpowiedzUsuń
  3. Ooo, pierwszy raz o tym słyszę, bardzo ciekawie to brzmi, dobrze, że wszystko wyjaśniłaś :)
    http://sloiczeknutelli.blogspot.com/

    OdpowiedzUsuń
  4. Cały czas zastanawiam się nad tym Pinterestem. Kiedy dodawałam swoje pomysły na Zszywkę, która jest przecież polskim wariantem Pinteresta, ludzie dodawali moje pomysły na tablice typu "pomysły na DIY". Niektóre moje pomysły są na tyle moje, że nie chciałabym by je ktoś kopiował. Z jednej strony być może byłby to fajny generator wejść na bloga (chociaż na zszywce to tak nie działało...) z drugiej zastanawiam się, czy po prostu jakiś rękodzielnik z typu tych mniej szanujących rękodzielniczy rynek i innych rękodzielników w ogóle, po prostu go nie powieli i podpisze jako swój, a ja mu w tym sama pomogę. Dylematy, dylematy... W kwestii zaś posta, jest świetnie przygotowany i chociaż sama za cholerę nie ogarniam HTML'a to bez problemu bym sobie z tym poradziła. Jeśli rozwiążę mój moralny dylemat, to może się nim posłużę :P


    U Łosia nowy post: http://nevermind-factory.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Rozumiem Cię doskonale. Szczerze mówiąc też miałam wątpliwości co do Pinteresta, ale się przełamała. Nie wiem jak jest na stronie typu Zszywka, ale ja po ustawieniu na Pintereście opcji powiadamiania mnie o działaniach moich pinów dostaje maile z informacją, że taki i taki użytkownik zapinował mój wpis i link do profilu tej osoby, więc jak coś to od razu można sprawdzić czy rzeczywiście tylko polubił czy może jeszcze podkradł. Wiem, że jest opcja blokowania, ale nie korzystałam z niej więc nie wiem na jakiej zasadzie to działa ;)
      Jeśli chodzi o instrukcje to masz oczywiście racje, że byś sobie poradziła, bo tu akurat nie da się nic popsuć :)

      Usuń
    2. No na Zszywce też przychodzą powiadomienia, ale jak kiedyś zwróciłam komuś uwagę, że nie wstawiłam tego obrazka jako darmowy wzór, a pomysł należy do mnie i jeśli ktoś chce go powielić, to powinien zapytać, to spotkałam się z bardzo chamskim odzewem. To ostatecznie mnie upewniło o usunięciu tablicy z moimi pomysłami z tamtego portalu, ale ogarnę sobie tę opcję z blokowaniem, ciekawe jak to działa. No i ciekawe, jaka jest kultura użytkowników Pinteresta, Zszywka jest jednak trochę hermetyczna i dosyć specyficzna pod względem poglądów użytkowników. Często np. widuję pod zszywkami z fajnymi koszulkami, wstawionymi z pytaniem "gdzie to kupić?" odpowiedzi rękodzielników, że chętnie namalują kopię. Nóż się w kieszeni otwiera szczególnie wtedy, jeśli w innym komentarzu ktoś linkuje Twórcę...

      Usuń
    3. No to rzeczywiście nie ciekawie się dzieje na tej Zszywce, ale można to porównać do blogowania - kiedyś jedna dziewczyna (zresztą to nie pierwszy raz) ukradła mi wpisy i zdjęcia w słowo w słowo to samo było + nazwę bloga, bo jeszcze wtedy miałam całkiem inną niż obecnie to było wielkie oburzenie i tłumaczenie, że przecież jak ja dodaje coś na bloga to jest to dla wszystkich i każdy może sobie to brać. Nie dziwię Ci się, że tak reagujesz na to jak ktoś pisze, że może wykonać kopię jakiejś koszulki czy biżuterii, mnie samej szlak trafia jak ktoś pisze do mnie czy zrobię szablon, podsyłają link na wzór, ja robię, a potem mi odpisują "ale ja chciałam taki sam jak tamten" no wtedy to ręce i cycki opadają - dosłownie. Nie wiem jak ma się kultura użytkowników na Pintereście, ja się nie spotkałam jeszcze z przykrymi sytuacjami.

      Usuń
  5. Akurat u mnie się to nie sprawdzi ale kto wie może kiedyś zdecyduję się na Pin it :)

    http://magdalens-blog.blogspot.com/

    OdpowiedzUsuń
  6. Pierwszy raz słyszę o czymś takim :)

    OdpowiedzUsuń
  7. Pierwszy raz widzę coś takiego, ale poradnik wydaje się naprawdę przydatny, może kiedyś skorzystam :)

    Zapraszam Cię bardzo na nową, profesjonalną sesję zdjęciową. Bardzo wiosenną :)
    http://moooneykills.blogspot.com/2015/04/fruit-make-up.html

    OdpowiedzUsuń
  8. Fajny i przydatny post, dla mnie wszelkie działania w kodzie są czarną magią, ale i tak czasami tam zaglądam

    OdpowiedzUsuń
  9. Dziękuję za pomoc. Próbowała kilka razy i dopiero z Twojego kodu mi się udało :D

    OdpowiedzUsuń
  10. Cieszę się, że się udało ;)

    OdpowiedzUsuń
  11. A mi nie działa nie wiedzieć czemu :(

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona