For those of you who are using Blogger, I'm sure you have experienced this problem.
I am talking about putting a picture or image on the sidebar of your blog. Yes, using the Blogger picture gadget.
After you have uploaded your picture, you fill in the Title, Caption and the Link. Then you click SAVE. And this is what you get:
I am talking about putting a picture or image on the sidebar of your blog. Yes, using the Blogger picture gadget.
After you have uploaded your picture, you fill in the Title, Caption and the Link. Then you click SAVE. And this is what you get:
As you can see the the Caption "Easy-To-Follow Tutorial" is way down below the picture.
There is a rather wide spacing between the picture and the caption. It is a waste of space and besides it doesn't look presentable.
Well, this is how you move the Caption closer to the bottom of the picture.
1. Download your picture and fill in the Title only.
2. Do NOT fill in the Caption and the Link.
3. Click SAVE. Now you can see the picture together with the Title on your sidebar.
4. Since now there is no link, which means people cannot click on the picture.
5. What you do is, you write out a html code as shown below:
<a href="YOUR LINK"><b>YOUR CAPTION</b></a>
6. Now when people click on your Caption, it would link them to where you want them to go.
7. Now you have to insert this html code just below the picture in your template.
8. Go to Dashboard>>Design>>Edit HTML>> Tick Expand Widget Templates.
9. To locate the position where you want to place this code, depends on which sidebar you have placed your picture.
10. To find the code of your already published picture, press and hold on to the Crtl button and at the same time use another finger to press the lettter "F". You will find a band popups below your monitor screen.
11. Type the word sidebar in the blank box. Use the Next or Previous Arrows next to it, to find where you have published your picture. You can see your Title among the code as shown below in red.
12. Look carefully where I have pasted the html code (indicated with red arrow). It is just BELOW this set of code:
13. Then click SAVE TEMPLATE.
Note: If you are not too sure whether you have pasted the html code correctly, just click PREVIEW to check it out first. DO NOT straight away click SAVE TEMPLATE.
There is a rather wide spacing between the picture and the caption. It is a waste of space and besides it doesn't look presentable.
The caption should be just below the picture as shown below.
Well, this is how you move the Caption closer to the bottom of the picture.
1. Download your picture and fill in the Title only.
2. Do NOT fill in the Caption and the Link.
3. Click SAVE. Now you can see the picture together with the Title on your sidebar.
4. Since now there is no link, which means people cannot click on the picture.
5. What you do is, you write out a html code as shown below:
<a href="YOUR LINK"><b>YOUR CAPTION</b></a>
6. Now when people click on your Caption, it would link them to where you want them to go.
7. Now you have to insert this html code just below the picture in your template.
8. Go to Dashboard>>Design>>Edit HTML>> Tick Expand Widget Templates.
9. To locate the position where you want to place this code, depends on which sidebar you have placed your picture.
10. To find the code of your already published picture, press and hold on to the Crtl button and at the same time use another finger to press the lettter "F". You will find a band popups below your monitor screen.
11. Type the word sidebar in the blank box. Use the Next or Previous Arrows next to it, to find where you have published your picture. You can see your Title among the code as shown below in red.
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
13. Then click SAVE TEMPLATE.
Note: If you are not too sure whether you have pasted the html code correctly, just click PREVIEW to check it out first. DO NOT straight away click SAVE TEMPLATE.