Everyone know that Blogger is most used for personal blogs, And most of personal have tons of pictures. This will be a very quick tutorial on how to add captions to those pictures to improve your blog’s usability and help visitors identify the description of each photograph you have on your posts.
This tutorial is inspired in a very quick screencast made by @mads that can be watched here. I just found it very useful and decided to adapt it for Blogger users.
The final result
If you want to see it working please check the live demo.
Explaining the method
The little script we are going to use here is very simple, it will add captions all the images that have the addCaption class, and the text in your captions will be the “title” attribute of your image.
Step 1 – Installing jQuery Library
You only need to do this step if you don’t have jQuery installed yet, if you already have it, you can skip to step 2. To install jQuery just paste the following code just before your </head> tag:
<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<!-- End of jQuery -->
Step 2 – Installing the Script
Now that you have made sure that you have jQuery installed, you need to install addCaption script, to do that just paste the following code just before your </head> tag:
<!-- addCaption -->
<script src='http://dl.getdropbox.com/u/1693834/javascript/addcaption.js' type='text/javascript'/>
<!-- End of addCaption –>
Step 3 - Adding some style
Let’s make it look beautiful, paste the code below right before your ]]></b:skin> line:
/* Image Captions
--------------------------------------------------- */
div.addCaption {
margin-bottom:1.5em;
padding:10px;
text-align:center;
background:#f0f0f0;
border:1px solid #ccc;
color:#565656;
display:inline-block;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
div.addCaption img {
display:block;
}
Using the Script
When you finish installing, just save your changes and you will be ready to go. To use the script, whenever you need to add captions to an image, just give it addCaption class and write your caption text in the title attribute. Please check the image shown above, on Explaining the method.
Adding captions to images uploaded by Blogger
To add your caption to images uploaded trough Blogger is the same thing:
Click to insert your image, and set it up as you usually do.
Now go to the Edit HTML mode, add the addCaption class and set the title that you want to be shown in the caption to the <img> tag.
Final Words
As you may know there are plenty of more ways to add captions to images around… Including some fancy and animated alternatives. I just found this one really simple but effective and decided to post it here. Maybe in the future I will make tutorials for more complex alternatives that may require more work, but I think this one will help beginners and those who like everything simple, like me.
If you have any question do not hesitate to leave a comment, or contact us. Don’t forget to subscribe and follow us on twitter.
