PIN IT PRZYCISK :))

Aby zdjęcia na moim blogu najechane myszką zostały opatrzone...



...takim znaczkiem...:)

musiałam przede wszystkim skorzystać z pomocy Beaty Redzimskiej, Magdy Mirkowicz  :) i pokładów własnej cierpliwości...
na początku był...znaczek...
ukazany wyżej znaczek pobrałam jakiś czas temu...wraz z całą serią

miało być pięknie, różowo i romantycznie... czyli w jednym miejscu, w jednej linii:)) wszystkie ikonki społecznościowe, szybko oddelegowujące to tych moich miejsc różnych i kontaktów też...
...poległam:) nie miałam wystarczająco dużo...czegoś (czytaj czasu, chęci, zdrowia itp. :> )
potem zapomniałam o romantycznym różu, a zapragnęłam "pin it button"  na moich zdjęciach :)

... nie poległam i w dodatku wykorzystałam Magdalenowe ikonki :)

to jak to uczyniłam:

wersja bez pobierania ikonek - wykonać jak Beata

wersja z pobieraniem:
1. ikonki od na przykład Magdy zapisać na dysku, jeżeli chcielibyśmy inne, to wpisać w google "ikonki społecznościowe" i... szukać, aż się znajdzie :) wymarzone
2. uzyskać URL dla naszej ikonki...robimy to na przykład tak:
wchodzimy na stronę http://www.tinypic.pl/
wgrywamy nasze zdjęcie/ikonkę
kopiujemy "Bezpośredni link do pliku" (i wklejamy sobie do worda/ notatnika/ czy na notatkę;> )albo (nie kopiujemy w tym momencie, ale stronę zostawiamy otwartą, żeby później skopiować ;> )
3. teraz będziemy postępować jak pokazuje Beata ale...
4. wprowadzimy zmiany w kodzie, który znajdujemy u Beaty....

<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizFf5dvWNqHmdX4KnAp243l_C0mwp2tZyoFu-jtClSEwl-ZU_mO7YphggZgEJmPPMuf-jeIzWC7PH4hee-n7MBM75D5ab40KQqN9a9DJfjIAqw7ssXPm4iSnkwhefno_9Erh903tY72jkU/s1600/pinterestx1_72.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>
...zaznaczoną przeze mnie część kodu musimy zastąpić "Bezpośrednim linkiem pliku" (punkt 2.) (albo mamy już utworzony URL i skopiowany np. do worda, albo szybciutko tworzymy teraz ;> )

u mnie wygląda to tak:

<script>
 //<![CDATA[
 var bs_pinButtonURL = "http://pics.tinypic.pl/i/00587/l13aojzkq7pk.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 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></body>

i jeszcze ostatnia rzecz:

umiejscowienie przycisku pin it, na naszych zdjęciach blogowych...
w nasz kod będziemy musieli wpisać odpowiednią komendę ;> w zależności od tego, gdzie chcemy mieć przycisk:
pin it może być na środku (tak jest automatycznie) - center
w lewym górnym rogu - topleft
w prawym górnym rogu - topright
w lewym dolnym rogu - bottomleft
w prawym dolnym rogu - bottomright

odpowiednią komendę wpisujemy w zaznaczonym poniżej miejscu :)

<script>
 //<![CDATA[
 var bs_pinButtonURL = "http://pics.tinypic.pl/i/00587/l13aojzkq7pk.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 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></body>