Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger Tutorial » How-to » SEO » How to Add Caption to images in Blogspot blog

How to Add Caption to images in Blogspot blog

You might be noticed additional information about the images in some of big websites like wikipedia , timesofindia that additional information comes right after the image, it also better known as caption. This great feature is officially provided by blogger and allows us to add caption to photos in blogger. In this tutorial we will see how to add caption to image in blogspot blog.

First of all you will need to do is just upload the image to your blogger post. you can upload images to your blogger post by simply clicking on image icon which located at the top tool bar.once you have done with uploading image to your blogger post then click on the image to select your image and then you will see a blue strip just below your image with some options like : alt, title, size and caption of your image.etc.
Now, just click on "Add caption" link and enter any text that you would like to show as caption in your image. its up to you, what you would like to write about the image in caption area.

Related : How to fix Blogger Image Color Changing Issue

Here is simple CSS code that will make your image and caption stylish. Copy and paste below code just above the skin tag in your blog's HTML.

table.tr-caption-container {
    border: 1px solid #d2d2d2;
    padding: 10px 20px 20px 20px;
}

table.tr-caption-container img {
    width: 99.5%;
    border: 1px solid #d2d2d2!important;
}

td.tr-caption {
    font-size: 14px;
    font-style: italic;
    text-transform: capitalize;}

That's all. hope you enjoyed learning how to add caption to image in blogger. if you have any questions feel free to ask by commenting below.
Add Comment
Blogger Tutorial How-to SEO

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • How to Add A Transparent Notification Bar To Blogger
    How to Add A Transparent Notification Bar To Blogger
  • Xmas "Flying Santa Claus" Widget for Blogger
    Xmas "Flying Santa Claus" Widget for Blogger
  • Supreme V2 ( Version 2) Responsive Blogger Template Download for free
    Supreme V2 ( Version 2) Responsive Blogger Template Download for free
  • How to Add Animated Flying Android Man Widget to Blogger
    How to Add Animated Flying Android Man Widget to Blogger
  • Create a Free Blog with Blogspot.com
    Create a Free Blog with Blogspot.com
  • How to Embed YouTube Videos In Blogger Posts
    How to Embed YouTube Videos In Blogger Posts
  • Use A Drop Cap Large First Letter In Posts On Blogger
    Use A Drop Cap Large First Letter In Posts On Blogger
  • Download Best and SEO Friendly Blogger Templates for your Blog
    Download Best and SEO Friendly Blogger Templates for your Blog
  • Flash SWF file Embed Code Generator
    Flash SWF file Embed Code Generator
  • Simple Recent Posts Widget for Blogger / Blogspot
    Simple Recent Posts Widget for Blogger / Blogspot

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ►  2015 (28)
    • ►  November (1)
    • ►  September (7)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
    • ►  April (3)
    • ►  March (3)
    • ►  February (5)
    • ►  January (5)
  • ▼  2014 (105)
    • ►  December (4)
    • ►  November (6)
    • ►  October (1)
    • ►  September (8)
    • ►  August (12)
    • ►  July (14)
    • ►  June (5)
    • ▼  May (11)
      • Google AdSense - Monetize Your Blog With Google Ad...
      • Share to Unlock Content Widget for Blogspot Blog
      • A Perfect Social Subscription Widget for Blogger /...
      • 30 Pure CSS Loading Animations Examples From CodePen
      • How to Install Linkwithin Widget to Blogger / Blog...
      • Create a Free Blog with Blogspot.com
      • Fixed Scroll Follow Us On Twitter Badge For Blogger
      • How to Submit Blogger Sitemap To Google Webmaster ...
      • How to Embed YouTube Videos In Blogger Posts
      • How to Add Caption to images in Blogspot blog
      • Download Best and SEO Friendly Blogger Templates f...
    • ►  April (5)
    • ►  March (15)
    • ►  February (24)

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates