Adding Simple Stylish Css Captions To Images On Blogger




| 5 comments

In this blog tip we will look at a quiet simple way to add captions or descriptions to the images used on your blog.On Blogger there is an option when you click on an image uploaded to the post editor to add a caption.This adds the caption below the picture using a table.However with just a few lines of Css we can have the caption across the bottom on top of the image with an neat opacity background.You can also change the colors of the caption to suit your blogs design, You can see some examples in the demo below.

View Demo Button

Adding Css Captions To Images On Blogger


Step 1. In your Blogger dashboard click Design > Template Designer > Advanced > Add Css :







Step 2. Copy and Paste the following code into the section provided :

.imgcaption {
padding-bottom:10px;
padding-top:30px;
position:relative;
}
.imgcaption cap {
position:absolute;
left:0%;
right:0%;
padding:10px;
background:#dddddd;
color:ffffff;
opacity:0.8 !important;
bottom:6%;
}

Note - You can change the background and font color the caption by changing the color code highlighted in green - Color Code Generator.

Step 3. Click 'Apply To Blog' in the top right corner.

That's the css added now you just need to add tags to the images you want to have a caption.

In the image below you can see in yellow the div tag added and closed and in red the caption added in 'cap' tags.

<div class="imgcaption"><a href="http://1.bp.blogspot.com/-LIzITb5FK_g/TfShSJBANnI/AAAAAAAAEWI/l_FJFCW52j0/s1600/Desert.jpg"><img src="http://1.bp.blogspot.com/-LIzITb5FK_g/TfShSJBANnI/AAAAAAAAEWI/l_FJFCW52j0/s320/Desert.jpg"/></a><cap>Desert - Picture Of The Desert</cap></div>

Images uploaded to Blogger already have class="separator" so we just change change separator to imgcaption.Then we add the actual caption as shown in red.

From This :

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-g9iyguILk4Y/TfShUvFbMpI/AAAAAAAAEWM/RRTiEgMbCEg/s1600/Lighthouse.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://1.bp.blogspot.com/-g9iyguILk4Y/TfShUvFbMpI/AAAAAAAAEWM/RRTiEgMbCEg/s320/Lighthouse.jpg" width="320" /></a>

To This

<div class="imgcaption" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-g9iyguILk4Y/TfShUvFbMpI/AAAAAAAAEWM/RRTiEgMbCEg/s1600/Lighthouse.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://1.bp.blogspot.com/-g9iyguILk4Y/TfShUvFbMpI/AAAAAAAAEWM/RRTiEgMbCEg/s320/Lighthouse.jpg" width="320" /></a><cap>Lighthouse - Picture Of A Lighthouse</cap></div>

Thanks it a simple blog tip for captions on images, Be sure to Check out more of our Css Blog Tips

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

5 comments:

  1. Thanks for sharing all this. Have you shown (or can you show ) how to position photos. Especially if I am trying to put two or three small photos next o each other: a tiny adjustment of one causes the others to bounc around randomly.

    ReplyDelete
  2. If I don't enter a picture description does the grey box still appear?

    ReplyDelete
  3. why only one picture have the grey box,but others picture does't have the grey box?

    ReplyDelete
  4. @ that'sso - Any images you add the caption to should have the grey box no matter how many there is.Make sure you are adding the code to the images correctly.Beyond that i can't see whay the problem might be..

    ReplyDelete
  5. thanks!!!!!!a lot for this information

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us