Tutorial: How to make clickable blog buttons

Earlier I posted how to easily organize your blog with thumbnail pictures and links underneath! Now, I'll be showing you how to make clickable thumbnail images... so instead of clicking the link underneath the picture, you can click the image and direct your readers to where ever you want.

This is pretty easy...but not as simple as yesterdays tutorial!

#1 Before we begin the tutorial... you will need an image like the following! Any image will work.... here's an example:

I added the overlay and wording in picmonkey!

#2 Now here is the code you will need to use... I highlighted and labeled it for you!

<a href="YOUR SPECIFIC BLOG POST URL GOES HERE">

<img src="YOUR IMAGE URL GOES HERE"> </a>

{I'm going to show you how to place this on your blogs page.}

#3 Now go to your blogger dash board and select pages

*Find the page you want to place your buttons

Press edit

#4 Now you should see a screen like mine.... Select the HTML button

#5 Paste the code I gave you earlier in the content area 

#6  Where I labeled "YOUR DIRECT IMAGE URL GOES HERE" Paste your images DIRECT url

The easiest way to get your images direct url  is download your pictures to photobucket... and from their they allow you to copy the direct url code for your pictures!! Below is a snapshot of my photobucket...

#7 Then copy the url address you want your readers to end up.... For me it was a particular post 

I clicked the specific post title to get the specific url and copied it out of my browser.

#8 Paste the url in the space I labeled YOUR SPECIFIC BLOG POST URL GOES HERE

After you paste in your codes..click back over to compose

You should only see your image

Lastly, publish your page! That is it!!!

Make sure to view your blog and test out the link!!!

It was nice chatting with y'all!! Have a blessed day!

XOXOXOXOXOOXXO

Ann- The Rustic RedHead

Did this help?? I'd love to know... leave some love below!!


You might also like: Organizing your blog buttons/links