Pages

Header Ads

Add Automatic Alt tag (Title) to Post Images on Blogger


Have Lots of Images?
If you have lots of images, then it is very very time consuming and boring to add the alt and title text to each image one by one. To make this work easy I have designed a little plugin for blogger which will automatically adds the alt and title text to all images. Means you don't need to add the alt text manually. Just upload the images and you are done. The work of adding title and alt tag to images will done this plugin.

Also if you have some old post images which are also missing the title and alt tag, then you don't need to add alt tag to images manually, this script will automatically adds the title and alt tags to all images of your blogger site.

How to Add Automatic Alt tag (Title) to Post Images on Blogger
Want to install this widget? if yes then follow the below simple steps:
  •     Goto Blogger Dashboard
  •     Goto Template Tab
  •     Click on Edit HTML
  •     Now search for the </body> tag
  •     Now paste the below code just above the </body> tag.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $('img').each(function(){ var $img = $(this); var filename = $img.attr('src') $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.'))); $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.'))); }); }); //]]> </script>

  •     Now click on Save Template.
  •     That's it you have successfully installed the widget
Customization
Most of the blogger templates have already add the Jquery Library. So, if the jquery library is already presents in your blogger template then just remove the highlighted code line from the code. But if the jquery library is not present in your template then don't remove the highlighted text, otherwise the widget don't work.

How This Widget Work
If you are curious about the widget that how it works? How it adds the title and alt text to images and from where it gets the title and alt text? Then here I am going to explain it. This widget gets the name of the image which you have entered to image before uploading and adds that name as a title and alt text of the image.

Note: So, keep in mind that before uploading the images don't forget to properly rename the image files according to your post topic, so that you get the right alt text to your images.


Have any questions? Feel free to ask me via the comments section! Remember to share this tutorial with others on Facebook, Twitter & Google Plus.

Post a comment

12 Comments

  1. Thank you for sharing such valuable information with us.
    Here check>> Magazine blogger templates

    ReplyDelete
  2. Such a nice post. It will make very easy to add alt tags to a large number of images. Thanks James
    https://www.linkedin.com/in/expert-seo-freelancer-delhi

    ReplyDelete
  3. Very helpful suggestions that help in the optimizing website. thank for sharing the link.

    หนังไทยตลก

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. we are creating heart-winning designs to match your taste to systematically handling the nitty-gritty of putting everything in shape.

    design architecture in guwahati

    ReplyDelete
  6. Thanks for sharing. Please visit Also visit hotel in guwahati

    ReplyDelete
  7. Works like a charm, thanks. Though, is it possible to replace alt tag with post title instead of image filename?

    ReplyDelete
  8. Bitwissend is one of the leading Web Development and Mobile Application Development company in kerala, India having branches in Kottayam and Cochin. Bitwissend have experienced Web Designers and Software developers who uses most advanced and sophisticated IT and Web Technologies which helps you to attain an unbelievable transformation in your business.
    web design company in kerala

    ReplyDelete
  9. Found your post interesting to read. I cant wait to see your post soon. Good Luck for the upcoming update.This article is really very interesting and effective.
    Take a look at my article Legit Ways Get Free Robux on Roblox

    ReplyDelete