Friday 17 April 2015

Tutorial for putting Paypal-buttons and an image-gallery on your blog

The sun is still shining, the kids are still home from school, so I still didn't do very much artwise.... I just had to go outside and feel the warmth on my skin. It's funny, when I was living in Australia the sun was shining almost all of the time, and I could just relax and stay inside if I needed to, because I knew the sun would stay. But here in Belgium I have the feeling I need to grab every little bit of sunshine that's there, because it can go away any minute....

Yesterday I took my markers and my canvas outside and started drawing the figures on there. So I did a little bit of art :-) I even painted a small part already ...

It was fun working big again.

And even the dog is smiling because the sun is shining ;-)


And I finished 2 more ACEO's:



As promised, and because some of you asked, I'll try to explain how I made this extra page with the paypal-buttons.

1. First you need to add an extra page to your blog, by going to design - pages - add new page

2. Make sure you work in the HTML-mode, not the compose-mode.

3. Next you need to make an image-gallery. The tutorial I used for that is this one. I changed a few things to suit my needs.

The html is for an image-gallery with 4 (equal) images next to eachother. Copy and paste the html below:

<center><table><tbody>
<tr>

<td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="yourwebsiteurl" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="yourimagetitle" border="0" src="yourimagesource" width="120" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">yourcaption</td></tr>
</tbody></table></td>

<td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="yourwebsiteurl" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="yourimagetitle" border="0" src="yourimagesource" width="120" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">yourcaption</td></tr>
</tbody></table></td>

<td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="yourwebsiteurl" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="yourimagetitle" border="0" src="yourimagesource" width="120" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">yourcaption</td></tr>
</tbody></table></td>

<td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="yourwebsiteurl" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="yourimagetitle" border="0" src="yourimagesource" width="120" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">yourcaption</td></tr>
</tbody></table></td>

</tr>
</tbody></table>

</center>

For every new line of 4 images you need to enter this HTML-code again.

4. Change the blue text:

yourwebsiteurl : first I put the name of my blog here, but then when I clicked on the image it went back to my blog, and  didn't want that. I wanted a larger view of my image when I click on the image. So I put the same link here as in yourimagesource
Where do you find that? Go to the blogpost where you used the image,  Click on the image you want, then right-click and go to image-information (not sure whether it's exactly like that in English, since my blog is set to Dutch and I'm just translating). Copy the link that comes up, and paste the same code in both places. You can also make a new post with all the images you want to use (you can leave it in draft-modus if you want to). Just upload your pictures as usual, then switch to HTML-mode, and look for img src=" or src=". What follows the quotation mark is the part you need. It starts with http:// and ends with .jpg.
yourimagetitle: whatever you want to call your image. You might want to keep SEO in mind when you do this, it's also the title that comes up when your image won't load on someone's browser. I use the title of the ACEO and the number.
120: this is the width if you use images of the same size. I make the width 100 for a vertical ACEO, and 140 for a horizontal ACEO.
yourcaption: here you need to insert the code for your Paypalbutton

5. Make your Paypal-button

If you don't have one yet, sign up for a free Paypal-account here. I set mine to business-account to receive payments, although I think it also works with a normal account.Then you go to profile - settings - selling preferences and you can start making your button.

Step 1: choose a button-type (if you choose "shopping-cart" customers can keep adding items to their shopping-cart, if you choose "buy now" they buy one item, have to pay, and then can continue shopping). You fill out the item-name and the item number. Very important this one if you sell more than one thing. If you don't give it a number, all your items will have the same number and if someone buys something you have no idea which one they bought (yes, it happened to me ....). This means that for every unique item you need to make a new paypal-button. Which is actually easy to do because you can click "create similar button" and you only need to change the number. For the rest of this part you just fill out everyting you need, you can choose the currency, you can add shipping costs if you want (leave this blank if the shipping is included).

Step 2: track inventory profit and loss: you need to fill this out if you sell one-of-a-kind items, in order to avoid having two customers buying the same item. Click "track inventory", and fill in the item ID and the quantity in stock (= 1). Then you choose the option "don't let customers buy the item". When someone wants to buy an item that has been sold, they get the message that's it's not in stock at the moment they want to pay. When an item is sold out (in that case you get an email from Paypal), you need to replace the HTML-code for the paypal-button with the message "sold out". For now there is no way to let Paypal add that automatically when the inventory = 0, you need to do that yourself.

Step 3: fill out what's necessary, click "save button", and then click "create button".

You get the HTML-code for this particular button, you select all and copy it, then you go back to your blog, and you insert the code in yourcaption.
Do this for every single image.

6. Create a "view cart" button

You only need to create this button once. This button allows your customer to see which items they have put in their shoppingcart. After you have created your "shoppingcart"-button, you can find "create more buttons" underneath your generated code. Choose "create a view cart button", copy the HTML-code, go to blog design - layout - add a gadget - HTML/Javascript and paste the code in there. You don't need to give it a title. This way the "view cart"-button is in the sidebar of your blog, so that it's always visible no matter where you are on your blog.


That's it! I hope it was not too confusing. If you have questions just ask and I'll try to help. Don't forget I'm not an HTML-expert, I can only share my experiences .....

To finish this post: my funny of the week ;-)

lol ....

Okay, that's it for this week. Linking this as always to Paint Party Friday. If you want to see lots of wonderful art, just click on the link :-)
Thanks for visiting me, hope your day has been going well, and I wish you a nice, relaxing wekend with no stress whatsoever! See you next week ♥ ♥ ♥


19 comments:

  1. Your painting is coming long nicely, love the photo of your dog. The plug joke is good, too. Valerie

    ReplyDelete
  2. lovely photos and paintings and dog too

    ReplyDelete
  3. Ah I could relate so well to what you said about taking the sun for granted in Australia but now grabbing every second of it in Belgium. It's like that here too so if we do ever get a properly warm sunny day you really have to get outside and enjoy it (if the midgies will allow you to!) because you just know it'll be raining again the next day! Your dog is lovely! Thanks for the tutorial - It's actually very funny because I was just thinking I needed to add a buy it now page to my blog rather than just buttons on individual posts. I may need to set some time aside to do this - thank you!

    ReplyDelete
  4. oh and your painting looks gorgeous already - I love how you bring out the images from the kaleidoscope of colours in the background.

    ReplyDelete
  5. Love your ACEO's, your dog and your tip. Thanks so much!

    ReplyDelete
  6. thanks for the tutorial!! I'm bookmarking this for future reference.

    enjoy the sunshine :)

    ReplyDelete
  7. Oh wow, thanks for this tutorial! Love that 2nd girl's hair... if my curls were not so insistent on being curls, that is the hairstyle I would have liked! You ARE the queen of painting hair.

    ReplyDelete
  8. I saved your tutorial - not sure if I'm ready to sell online again. But I may be in the future. Love your painting start and your girls are wonderful. I agree with Minnemie - you are the queen of hair painting! Thanks again for sharing that tutorial

    ReplyDelete
  9. Loving the wip painting already! And the ACEO's- brilliant-I love the Leonard Cohen quote! Thanks so very much for taking the time to explain the PayPal system. Perhaps one of these days I'll jump in.

    ReplyDelete
  10. Your new art is gorgeous! I didn't have a moment to spare over the Easter break and today's my first day back with my paints so it's nice to visit here and feel like I'm getting back to 'normal' ;) Thankyou for sharing the tutorial with us, you're very kind. :)
    Have a great weekend Denise.
    Jess xx

    ReplyDelete
  11. SO generous of you to write the instructions you followed to get your art up for sale through paypal. thank you!

    lovely to see your art, that little deer is so dear!

    ReplyDelete
  12. Your puppy reminds me of mine a lot. What a cuties, Can't wait to see all the figures on your canvas. The white really pops against the colors in the background.

    ReplyDelete
  13. Making the most of springtime sunshine sounds just right. Here un the northern hemisphere we certainly don't take it for granted. Your new large canvas is looking very intriguing. I love the little dog . I haven't thought about using papal direct on my blog but if I decide to this would certainly help!

    ReplyDelete
  14. I am still laughing about that cartoon... great tutorial...I need to refer back to that!! Excellent info and adorable aceos....and love the happy dog too! Love the new wip...glad you got some sunshine! Thanks for taking all that time to write out the tutorial!!

    Hugs Giggles

    ReplyDelete
  15. thanks Denise for the paypal tut, and of course your colourful art

    ReplyDelete
  16. Great to see your background and the start of your picture with the lovely cat and flowers.
    I must bookmark your fantastically detailed tutorial in case I ever decide to use paypal, thanks!

    ReplyDelete
  17. that tutorial is perfect. I have been thinking about doing that for ages, and you make it sound like it is actually achievable... thanks for writing it...xx

    ReplyDelete
  18. Your aceo's are awesome and your smiling family pet member is adorable. :))

    ReplyDelete
  19. Thanks for these tips! These are fundamental for anyone who seeks to get into the online trade. Not only does this allow you to show your work to the biggest paying audience in an instant, it also makes your blog lucrative in itself, through the advertisement links. The internet is malleable, and it can be molded into any shape or form for any purpose, and this is just a prime example of that capability. Cheers!

    Henry Shelton @ Results IM

    ReplyDelete

Thanks for taking the time to comment! I love hearing your thoughts about my work. Because I am getting too many spammer comments, l have to use Captcha, sorry. Hope this is not a problem for you !