Miten lisätä Pin It - nappula bloggerin kuviin - How to add the Pin it hover button for Blogspot

Miten lisätä Pin It - nappula bloggerin kuviin - How to add the Pin it hover button for Blogspot

English tutorial below, so pls, scroll your way down :)

Joulutunnelmaa! Christmas ambianse!

Halusin lisätä Pin it- nappulan blogini kuviin ja googletin asiaa. Oli muuten hippasen hankalaa löytää oikeat hakusanat! Mutta löysin mahtavat ohjeet täältä ja täältä , tämä BloggerSentral on ihan huippu.

Mielestäni Pin it -nappulan laittaminen blogiin oli helppoa, tosin nykyään muutokset tehdään Malli- kohdasta ja klikataan kohtaa muokkaa html-koodia. Avautuvasta ikkunasta valitaan sitten muokkaa mallia ja etsitään oikea rivi, eli etsitään vasemmasta reunasta sanaa . Minulla se oli rivillä 1986. Vaihdoin nappulan sijainniksi oikean yläreunan.

Omassa koodiruudussani koodinpätkä oli joko punaisella tai mustalla, joten piti itse etsiä ja löytää kohta missä oli määriteltynä tuo nappulan sijainti. Se löytyi helposti. Jos vaihdat sijaintia muista säilyttää kaikki merkit kuten nämä " "eli vaihdat vain center sanan tilalle sen sijainnin minkä siihen haluat. Itse valitsin siis topright. 

Joku päivä kokeilen vielä muuttaa Pin it -nappulan ulkoasua mutta sen ehtii myöhemminkin.

1. Lue ohjeet ensin täältä englanniksi 

2.Kopioi koodi (Koodi lainattu täältä )

3. Malli ja muokkaa html-koodia
4. Muokkaa mallia
5. Etsi sana body
6. Liitä body sanan yläpuolelle kopioimasi koodinpätkä, tee enterillä tilaa, jos sitä ei ole
7. Jos Pin it -nappula saa ilmestyä kuviesi keskelle, voit lopettaa tähän, eli muista tallentaa

 8. Jos haluat muuttaa pin it nappulan sijaintia, etsi kopioimasi koodin 4:ltä riviltä sana center ja vaihda se haluamaasi sijaintiin. Itse vaihdoin sijainniksi topright. Vaihtoehdot ovat: 

topleft

topright

downleft

downright

 Muista laittaa sijainti-sana "" väliin.

9. Jos olet tyytyväinen nykyiseen Pin it-nappulan ulkoasuun (Iso punainen P) tallenna ulkoasumalli.

10. Jos haluat vaihtaa nappulan ulkoasua, löydät erilaisia ilmaisia malleja täältä.

Viihdyttäviä Pin It -hetkiä!

 

How to add the Pin it hover button for Blogspot

 

Joulutunnelmaa! Christmas ambianse!

I wanted to add Pin it hover button to my blog's pictures. I spend some good moments trying to find right kind of words for the search. That time I didn't know that the right kind of expression in English were hover button. :)

I think it was really easy to get the Pin it hover button to my blog. I found some brilliants instructions, this one is in Finnish and here is some in English and BloggerSentral is just awesome!

If you want also this Pin it hover button to your blog, you'll going to need to make just a tiny bit change of the code of you blogspots template.

What is worth or not to mention, when I was making these changes and I was modifying the  template, the code's text colour were red and black, no green anywhere. That's why I wrote if you want to change the location of the hover, you will find the right spot at the row 4. 

Some day I will try to change the template of the Pin it hover.

1. First read the instructions here or here 

2.Copy the code (The code is borrowed here )

3. Template and edit html code
4. Edit Template
5. Find the word body. Mine was beginning of the row 1986.
6. Attach above the body the code you just copied. You could press enter to make some room for the code. 
7. If it's okay that the Pin it hover appear to the center of your pictures, you've done and you could just end these changes simply by saving the changes. 

 8. If you wanted to change the location of the Pin it hover, find the word center on the row 4th and just change it whatever location you'll like. I choosed topright for the new location of the hover. You could choose between: 

topleft

topright

downleft

downright

Remember replace the location word between these ones "" .

9. If you are happy Pin it hover button's template, just save the template and have nice time to "pinning" all your photos.

10. If you want to change template of the hover button, you'll find some free templates here.

Enjoyable Pin It moments!