Adding Images to Your Sidebar
Nov. 30th, 2012 01:55 pm![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
sireesanwar.livejournal.com posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
layoutloungeAccount 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:
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...
7. The result is this...
8. Let's put them all on the same line....
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.
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![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-community.gif)
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>.
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.
layout_lounge
Image urls being overwritten by LJ?
Date: 2018-06-02 05:20 am (UTC)Re: Image urls being overwritten by LJ?
Date: 2018-07-27 12:00 am (UTC)But as of now I'm seeing them as external LJ links combined with your external website so somewhere it is pulling that link too. If you have styles over at your site it could be interfering with the linking... hard to tell without digging around.
Re: Image urls being overwritten by LJ?
Date: 2018-07-30 07:09 pm (UTC)What's stranger is LJ has also stopped executing the simple code that creates my dropcaps, but only for recent posts, not for older ones more than a few months old. It's still generating the drop caps for those.
Here's a link to my style's code, it's based on Unearthed: http://mikeycosm.org/offsite/ljcustomstyle.txt