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 ♥ ♥ ♥