How To Make Auto Titles And Descriptions Image On Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Every thing is certainly no title and description, such as a Website or Blog.
Similarly, the existing image on a website or blog, examples of images in articles Blog. Most blogs have a title or description in the article pictures, when you hover over an image will appear Blog article title or description of the image.

In the system website or blog is called "attributes picture" or "image title" and "image alt", this very function for the Webmaster or Blogger who cares about the SEO on a Website or Blog them because this is one of the factors for adding value in SEO on a Website or Blog. The visitors also feel happy when visiting a website or blog that is super optimizations such as when they hover over the image no attributes, it will be very beautiful. So here you as a Webmaster, or A Blogger must work to achieve that. But I believe if you are super busy and do not just take care of one job in the sense of time you rarely empty, therefore I will provide solutions to help facilitate your work in this case.

In this case of course you have to add an attribute or a title or a description of the image on a Website or Blog, of course common way is to add to add an attribute or a title or a description of the image of each you post an article, so what if you forget to add add an attribute or a title or a description of the image article you? The general way that does not help you, then I will share ways that your article has the attributes picture automatically without requiring you to add to it each time you post articles on your blog.

If you are interested, let into the tutorial⇨

You just need to put the following JavaScript above / before the </ body> tags in the template of your blog⇩

<!-- Titles And Descriptions Image By www.BloggerDiscreet.com Starts -->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$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('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() – viewportHeight),
       distance = progress * (viewportHeight – scrollbarHeight) + scrollbarHeight / 2 – $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>
<!-- Titles And Descriptions Image By www.BloggerDiscreet.com Ends -->

Alhamdulillaah, tutorial is ready.