Add Automatically Title/Alt tag to Images in Blogger
In case you have plenty of pictures, then it is rather very time ingesting and boring so as to add the alt and title textual content to each and every picture one at a time. To make this work handy i've designed a little plugin for blogger so they can mechanically adds the alt and title textual content to all pics. Approach you don't have to add the alt textual content manually. Simply add the pix and you're executed. The work of adding title and alt tag to pics will executed this plugin.
Additionally when you've got some historical publish snap shots which are also missing the title and alt tag, then you don't ought to add alt tag to photographs manually, this script will routinely adds the title and alt tags to all portraits of your blogger web site.
How this Script works?
This script will robotically take the title of the snapshot and adds a Alt and Title Tag for all of the photos for your web publication.
Learn extra about what are alt and title tags right here
This script not most effective adds Alt and Title tags but additionally gives a + if there may be area in the identify of uploaded snapshot.
For instance if your add a picture with title Alt Title Tag Generator then it'll trade to Alt+Title+Tag+Generator making it search engine optimization friendly.
Tips on how to Use This Script?
The only thing you need to do is to name your photographs appropriately before uploading to blogger. For those who don't identify photographs adequately then you can also not see right alt title tags for portraits.
> Goto Blogger Dashboard
> Goto Template Tab
> Click on on Edit HTML
> Now seek for the </body> tag
> Now paste the below code simply 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>
<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 on save Template.
> That's it you could have efficiently mounted the widget
Customization
Most of the blogger templates have already add the Jquery Library. So, if the jquery library is already grants to your blogger template then just dispose of the highlighted code line from the code. But when the jquery library just isn't reward to your template then don't dispose of the highlighted text, or else the widget don't work.
No comments:
Post a Comment