?

Log in

No account? Create an account
 
 
30 November 2012 @ 01:55 pm
Adding Images to Your Sidebar  
Account Status: Free
Actions: Adding Images to Your Sidebar
Theme: All


The idea is to make your journal's sidebar have image links rather than the navbar links at the top or just for an added look to your journal. So I'm going to attempt to explain it to you.

1. First, you'll need the images. This image here of a sidebar shows me that this blogger made her images or had them made. I'm going to use some off the net.


2. When you have your images you'll need to upload them to a Image Location like PhotoBucket. You are going to need the Direct Link that PhotoBucket provides. If you wish to save the images in your Scrapbook you'll need to check out this tutorial.

3. Go to Customize Journal Style>Sidebar. You will be working in the Blurb or Free Text Box.
Make sure your second line as shown says that you want to show the blurb/free text box on your sidebar. You do not have to enter a title if you are trying to make a link system.




4. In the "Text to be added to the sidebar" box you'll want to add your coding for your images:
<img src="Pinterest Image Direct Link Here" height="64" width="auto">
<img src="Goodreads Image Direct Link Here" height="64" width="auto">
<img src="Amazon Image Direct Link Here" height="64" width="auto">


5. As you can see, if I put the images one after another like this on separate lines I get this result. One of the nicest things about the Blurb Text box is that if you hit enter your text will go to the next line when saved, which I did in the coding above.


6. So let's change it to centered...
<center><img src="Pinterest Image Direct Link Here" height="64" width="auto">
<img src="Goodreads Image Direct Link Here" height="64" width="auto">
<img src="Amazon Image Direct Link Here" height="64" width="auto"></center>


7. The result is this...

8. Let's put them all on the same line....
<center><img src="Pinterest Image Direct Link Here" height="64" width="auto"> <img src="Goodreads Image Direct Link Here" height="64" width="auto"> <img src="Amazon Image Direct Link Here" height="64" width="auto"></center>


9. The result is this...

10. Now that you have your link images where you want them, you'll need to add the link coding.
<center><a href="LINK HERE"><img src="Pinterest Image Direct Link Here" height="64" width="auto"></a> <a href="LINK HERE"><img src="Goodreads Image Direct Link Here" height="64" width="auto"></a> <a href="LINK HERE"><img src="Amazon Image Direct Link Here" height="64" width="auto"></center></a>

Make sure you have the </a> after each image section so the link is confined to the image.

11. The result can be seen at workshop_rees for now but will look like the above image only with links...

Notes: But should you need to create paragraphs simply add <p> at the beginning of a paragraph and </p> at the end of one. Or use the old tried and true line break of <br>.

Have questions? Please comment.

 
 
 
dikanadikana on December 7th, 2014 11:43 pm (UTC)
Hi!

Thank you very much for this tutorial, it's really useful. I've been following it to put some social media icons in my sidebar, but I'd like to give them a "hover" effect to change their color. I have already the two versions of each icon (one blue, other red), but I have no idea of how to do it in html. Could you help me, please? :)

Thanks!!
Jill aka Josireesanwar on December 10th, 2014 06:42 am (UTC)
I can. I'll do a tutorial about it though it might take me a little bit. Life is busy right now.
dikana: ojosdikana on December 10th, 2014 09:45 am (UTC)
Great!! :D

Don't worry, take your time. I appreciate it a lot. Thanks!!
machoranger: LOLmachoranger on April 24th, 2017 12:06 am (UTC)
Wow, that's really what I'm looking for, thanks!
Jill aka Josireesanwar on April 24th, 2017 05:22 am (UTC)
I'm very glad.