Do you want all blogger tricks?

Do you want more Blogger, Web Development Tricks? Enter Your Email Below And Get Latest Stuff Deliverd To Your Inbox.

Automated Title, Alt Attributes for Blogger Posts Images - JavaScript

Cover Image Automated Title, Alt Attributes for Blogger Posts Images - JavaScript


    ALT Attribute is the Alternate Text or the description of the image this will display when your image is not loaded for some reason. 

    This will inform the Search Engine about the image if it is not loaded. 

    ALT text should be Unique and Relevant to the image you are uploading.

    Alt also plays an important role in accessibility. When there is no image loaded or the link to the image is broken then this will be very hard for visually impaired users to see what actually is not loaded or whether there is an image or not.

    Relevant Alt tags can help your site/blog to rank higher in Search Engine Results Now your question is how?

    When you use the right Alt attributes then your image will rank higher in Search Engines Images Search. So when any person clicks on that image it will redirect to your site hence it is one of the factors of SEO.

    Title Attribute: Title attribute is different from the name of the image as the title attribute when defined it doesn't display all the time. 

    The title attribute is by default a hidden text when the user mouse over the image the title attribute text will be shown in the popup just above the image next to the mouse cursor.

    Note: This trick will work on the empty images without alt and Title attributes. 

    My advice will be to add alt and title attributes explicitly to the new posts images.

    How this trick will work? 

    This trick is a Javascript code where we take the name of the image as the alt and title attribute value. 

    In order, this trick to be efficient your images should have relevant image names.

    Before you upload the image file just give it the exact name and then upload.

    Who should not follow this trick?

    This trick is not for the blogs where images are uploaded without naming it correctly.

    Don't use the name of the images like 1.png, 1.jpeg etc give it short and relevant name to the image.

    It will be useless if you don't have any relevant name to the images. Visually impaired users will not be able to know what exactly the image is about.

    JavaScript Code for Blogger Blogs:

    STEP 1:  Go To Template Section As Shown in The Image Below
    Template

    STEP 3: After Clicking on Edit HTML Search for 
    </body>
    STEP 2:  Copy This Below Code Before </body>

    <script type="text/javascript">
       
    let img,p,a,s;
       
    p = /^.*[\\\/]/g;
       
    img = document.querySelectorAll('.post img');
    img.forEach((el, i, array) => {
       
        s = el.getAttribute('src');
       
       a = s.replace(p, '').split('.')[0].replace(/%2B/g, ' ');
        if(!el.getAttribute('alt')){
              el.setAttribute('alt', a);
    }
        if(!el.getAttribute('title')){
              el.setAttribute('title', a);
    }
    });
    </script>


    STEP 3:  Now save the template and check your images.

    JavaScript Code for other Websites:

    (Note: This will select all images)


    <script type="text/javascript">
       
    let img,p,a,s;
       
    p = /^.*[\\\/]/g;
       
    img = document.querySelectorAll('img');
    img.forEach((el, i, array) => {
       
        s = el.getAttribute('src');
       
       a = s.replace(p, '').split('.')[0].replace(/%2B/g, ' ');
        if(!el.getAttribute('alt')){
              el.setAttribute('alt', a);
    }
        if(!el.getAttribute('title')){
              el.setAttribute('title', a);
    }
    });
    </script>

    Concluding:

    I'm very happy you have added the code and optimized your blog images.

    This trick is to make your images to get the recommended alt and title attributes. 

    Doing this manually for new posts with relevant text will make your images more fruitful.




    That's It Thanks For Following our Tutorial '' Automated Title, Alt Attributes for Blogger Posts Images - JavaScript '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
    Read more »

    Image Optimization Guide For Blogger And WordPress 2019



      Hello Everyone We are Back With One of the most important topics about Best Practices For (Image SEO) - How To Optimize Blog Post Images. We are Now Writing this post in 2017 Where For Every one Who is Connected with Internet From Blogger to Affiliate marketer They Need Good Unique Images To Make Cover Pic or To Share in Social Networking Sites or To use in Their Blogs. 

      But Few of them are Thinking OF SEO (Search Engine Optimization) Because What Many Bloggers are doing they Search For Images in Google or Other Search Engines. From Images Section in Search Engines, They Are taking the Popular Images Relevant to their Topic Without Considering anything about Copyrights or Duplicate images issue.

      Why Optimize Images?

      The Most Important Question is Why To Optimize Images? What We will Get?
      1. First Benefit We Will Get If we use SEO Optimized Images in our Articles is The Page Loading Speed Will Increase and If you don't know The Importance of page loading speed Then I will Explain to you that this is one of the factors Consider for SEO. as we know Google has created a page to know the page loading speed of our sites.

      2. There are many Big Sites like Pinterest, StumbleUpon Which are Known as Photo Sharing Sites Where you can Add your Site URL Or Upload Your Images Directly with your Post or Page URL. This Can bring Huge amount of Traffic to your Pages.
      3. If you Use Your own Created Image in your site then if some other site uses it and link back to your site as a credit to you then you will get an Organic backlink.
      4. When you Publish your posts in any CMS Like WordPress, Blogger etc Your Article Images will also get indexed by Search Engines And When Someone Click On that Image And Comes To Your Site You will get Traffic From Images.
      5. This Were Few Important Benefits But You will get More If you optimized Every Image Correctly.

      What Are Stock Images? Where to find them Free?

      Stock Images are the Professional Images Which are Licensed For Particular or Specific Use. These Images are bought and sold on a royalty-free basis and Some Sites Give Them Free. This Images Can be used in commercial design purposes or For other uses by Webmasters and Web Designers.

      You can Download and Use Stock Images Free From This Following Sites.
      1. Unsplash.com 
      2. Stocksnap.io
      3. Pexels.com
      4. Pixabay
      5. FreeDigitalPhotos (Attribution required)

      If you Find More Free Stock Images Sites then Please Notify Us

      Now We Will Go Deeper in the image So what can we do to the image to get it Optimized for Search Engines.

      How To Choose The Right Name For The Image?

      Many Bloggers Or Webmasters When They Create Image or Select Image for the Blog post They Just Directly Upload The Image without caring about the name of the image.

      I Have Seen Many Bloggers Write the image name in numbers like 1.jpeg, 2.jpeg or very Long Name Which Do not Relate to the Subject.

      Use Names Relevant To the Subject of the Post and If the name is long separate it using Underscore or Dashes in Between so that it can be Readable and Can Be Index by Search Engine.

      When Someone Searches for Images in Google or Other Search Engines.When They Type the Keyword Which you have added as the Image Name Then your Image SERP Will Be Higher.

      Images Size and Resolution Optimization:

      Always Use Small Size Image Check the Image Size Before Uploading to the Server.

      The Larger The Image or Image Size The Slower The Site Load Time This Thing You Should Always Remember.

      Always Keep The Image Size Less Than 100 kb You Can Compress The Image Offline By Using Photoshop or Other Software and You can Compress the Image Online Also.

      There are Many Online Image Compressing Sites But We are Mentioning Few Names That are:


      Resolution Of The Image:

      The image should not be very big or not very small so keep the image resolution considering the width of your blog post area so that it can be fixed in your post.

      Don't Use Images Less Than 250 x 250px If someone clicks on the image the image will be shattered and cannot be seen Clearly on large Devices.

      But Some Times You can use large or Small images if your article demands it.

      Which Image Format is Better?

      The most popular image formats available are JPEG, PNG and GIF.

      JPEG format – JPEG images are widely used in websites or Blog Posts as the images in this format will be smaller in size and will load faster and after certain amount of compressing this JPEG format starts to shred and lose pixels. But this will improve page load time.

      PNG format – PNG Files Support Transparency, Unlike JPEG This is a lossless format and can sustain high compression. That's why most websites make their logo in this format so that it should not lose the Quality Even after resizing and Compression.

      GIF format – GIF format Supports Animation That's Why this is popular in social networks and Image Sharing Sites and it supports small size images and it is lossless for images with 256 colours or less.

      Image Title and ALT Text:

      <img src='url_here' alt='image-alternate-text-here' title='image-title-here'/> 
      ALT Text is the Alternate Text or the description of the image this will display when your image is not loaded for some reason. This Will Inform the Search Engine That here will be this image if it is not loaded. ALT Text should be Unique and Relevant to the image you are uploading.

      Title here in the image displays when you hover over the image if you have added the title then that title will display. 

      For Blogger Users:

      For Blogger Users To Add AltText

      To add title and alt text to the image:

      After Uploading the image in the post editor click on the image and go to properties then you will get the option to add both title and alt text.

      For WordPress Users:

      Add TItile and Alt in WordPress

      When You Upload The Image with the media uploader you will get the option right side to add title and alt text directly to the image.

      Image Caption:

      Captions text are optional to use this will appear right after the image. if you want to give credit to some site or image owner then you can use caption or you can give the image location or show some image importance.

      Conclusion:

      We Know The importance of optimizing images now. After reading this post always follow the Best Practices For Image SEO to get Traffic From Search Engines.

      That's It Thanks For Following our Tutorial '' 2017 Best Practices For Image SEO - How To Optimize Blog Images? '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.



      Read more »

      Fastest Popup Feedburner Subscription Plugin v2.0 for Blogs - 2019

      Cover Image of Fastest Popup Feedburner Subscription Plugin v2.0 for Blogs




        Live Demo

        Hello, Friends This time we have updated ours previously created subscription widget. In this widget, we have made a couple of big changes. 

        What's new in this Version?

        The Session Storage Feature: This meant when a user clicks on the close button then the widget will not appear until the user closes the tab and open the website/blog again. This will make the widget more user-friendly.

        Changes in the Style: We have made a few changes in the widget button to make it more beautiful. Few changes to make the widget more responsive on medium-sized screens. 

        FEATURES:

        Pop Up Feature And Close Button:

        We Made this widget to pop up after the blog loads. The user can click on close button to hide the widget and continue reading the blog. Popup Feature will give maximum exposure to the Email Subscription widget as this will appear on the centre of the screen and it will not close till the users click on the close button present at the top right part of the widget.

        Image of Feedburner Subscription Widget 2.0

        Added Pulse Effect and FontAwesome Icons:


        We have Added Font-awesome icons in this widget so that it should look attractive and modern. And Pulse Effect to the heart will make the widget lot more interactive for the users. And Used CSS Properties like border-radius to make it curved. See The GIF Image Demo below we apologize for the quality of the image.

        An Animating Gif Image of Feedburner Subscription Widget 2.0


        Does Not Affect on Blog Loading Speed:

        We Have Used window.onload Method. This is a JavaScript Method. We have used this method to load the widget after the page loads so this widget will not affect on blog loading speed. If for any reason the blog does not load completely then this Email Subscription widget will not appear.



        Timeout Delay Feature: 

        Timeout Delay Feature is a JavaScript method. Here we have used this method to delay the displaying of the Feedburner Email Subscription Form Widget for 3 seconds after the blog has fully loaded. if the site does not load properly and the widget loads first the Users will get irritated so this small tweak helps in improving the user experience.
        1. Popup Email Subscription Widget With Close Button
        2. It will Appear at the centre of the screen for maximum exposure.
        3. It is attractive and makes your site or blogs more professional.
        4. This Widget will not effect on loading time of your blog.
        We Have Styled This Widget in Such a Way That It Looks More Official and Beautiful. We Checked in Many Templates This Widget Works Very Smoothly. 

        After A Lot of Hard Work and Tweaking Few Things, We have Created this Widget For our Users So that They Can Add It and Increase Subscribers Count. 

        Adding This Widget is very easy in less than one minute you can add this widget to your blog.

        Adding The Widget in the Blog:

        STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard


        Blogger Layout

        STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.


        Add a Gadget


        STEP 3: Click On "Add a Gadget" As highlighted in the image above.



        STEP 4: After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.


        STEP 5:  Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <style> .ABT_float_ads_main_Wrap { width: 100%; max-width: 550px; max-height: 400px; position: fixed; z-index: 98765; background: rgb(59, 89, 152); left: 50%; top: 50%; transform: translate(-50%, -100%); box-sizing: border-box; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); border-radius: 10px; text-align: center; box-shadow: 0px 0px 3px 1px black; display: none; } .ABT_float_ads_close { margin: 0 auto; text-align: center; padding: 30px 20px 30px; position: absolute; top: -45px; right: -30px; z-index: 9999999; } .ABT_float_ads_close #ABT_close_button { font-size: 25px; color: #fff; display: inline-block; background: rgb(250, 155, 57); padding: 5px; } #ABT_close_button { cursor: pointer; } #ABT_credits { font-size: 25px; color: #fff; position: absolute; bottom: 2px; right: 5px; display: inline-block; text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); text-decoration: none!important; } .ABT_formWrap { background: rgb(250, 155, 57); padding: 10px; margin: 0px; width: 100%; min-width: 350px; overflow: hidden; box-sizing: border-box; border-radius: 10px; } .ABT_Heading, .ABT_Heading2 { color: #fff; font-size: 28px; font-weight: bold; text-shadow: 0px 0px 3px black; font-family: 'oswald', sans-serif; text-align: center; display: block; padding: 5px 0px; margin: 10px 0px 0px 0px; } .ABT_Heading2 { color: #fff; font-size: 18px; margin-bottom: 20px; font-style: italic; font-weight: 400; margin-top: 5px; } .ABT_Heading2 .fa-rss { color: rgb(250, 155, 57); } .ABT_Heading .fa-heart { color: rgb(227, 27, 35); } .ABT_float_ads_main_Wrap .fa-long-arrow-down { font-size: 40px; z-index: 98567; position: absolute; display: inline-block; padding: 10px; top: 80px; left: 45%; color: white; text-shadow: 0px 0px 5px black; } .ABT_formWrap .ABT_input_group { width: 100%; box-sizing: border-box; position: relative; margin: 0 auto; margin-top: 20px; border: 1px solid rgb(59, 89, 152); border-radius: 4px; } .ABT_input_group:before { color: #fff; content: "\f003"; font-family: FontAwesome; position: absolute; text-align: center; padding: 10px 12px; width: 50px; height: 100%; box-sizing: border-box; background: rgb(59, 89, 152); border: 1px solid rgb(59, 89, 152); text-shadow: 0px 0px 3px black; } .ABT_formWrap .ABT_Email { box-sizing: border-box; width: 100%; padding: 10px 0px 10px 60px; height: 100%; margin: 0px; border: none; border-radius: 4px; border: 1px solid rgb(59, 89, 152); } .ABT_formWrap .button { width: 100%; display: block; padding: 10px; box-sizing: border-box; position: relative; margin: 10px auto; margin-bottom: 20px; border-radius: 4px; background: rgb(59, 89, 152); font-size: 18px; border: none!important; cursor: pointer; text-shadow: 0px 0px 3px black; color: #fff; } .ABT_Widget_Container:before { content: ""; position: absolute; border-right: 15px solid transparent; border-left: 15px solid transparent; border-top: 15px solid rgb(59, 89, 152); border-bottom: 15px solid transparent; left: 50%; transform: translate(-50%); top: -1px; z-index: 55; } .ABT_Widget_Container{ position: relative } .ABT_formWrap, .ABT_innerForm, .ABT_Widget_Container { width: 100%; } .pulse { -webkit-animation: pulse .8s linear infinite; -moz-animation: pulse .8s linear infinite; -ms-animation: pulse .8s linear infinite; animation: pulse .8s linear infinite } .ABT_float_ads_close:before { content: ""; position: absolute; border-right: 9px solid #955f28; border-left: 5px solid transparent; border-top: 9px solid transparent; border-bottom: 5px solid #955f28; left: 6px; } @keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); transform: scale(1) } 50% { -moz-transform: scale(0.8); transform: scale(0.8) } 100% { -moz-transform: scale(1); transform: scale(1) } } @-webkit-keyframes &quot; pulse&quot; { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @-ms-keyframes &quot; pulse&quot; { 0% { -ms-transform: scale(1); transform: scale(1) } 50% { -ms-transform: scale(0.8); transform: scale(0.8) } 100% { -ms-transform: scale(1); transform: scale(1) } } @media (max-width: 650px){ #ABT_float_ads_main_Wrap{ display: none!important; } }</style>

            <div class='ABT_float_ads_main_Wrap' id='ABT_float_ads_main_Wrap'>        <span class="ABT_Heading"><i class="pulse fa fa-heart fa-lg" aria-hidden="true"></i> Loved Our Blog Posts? </span>        <span class="ABT_Heading2"><i class="fa fa-rss" aria-hidden="true"></i> Subscribe To Get Updates Directly To Your Inbox</span>        <div class='ABT_float_ads_close'>            <span id='ABT_close_button' style='float: right'>           <i id='ABT_Close_Button' class="fa fa-times" aria-hidden="true" title='close the Advertisment'></i>       </span>        </div>
                <div class='ABT_Widget_Container'>
                    <div class="ABT_formWrap">
                       <form class="ABT_innerForm" action='http://feedburner.google.com/fb/a/mailverify?uri=AllBloggerTricks' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=AllBloggerTricks&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>                    <div class='ABT_input_group'>                        <input class='ABT_Email' alt="Enter your email address:" placeholder="Enter your email address:" type="email" name="email" />                    </div>                    <input type="hidden" value="AllBloggerTricks" name="uri" />                    <input type="hidden" name="loc" value="en_US" />                    <input class="button" type="submit" value="Subscribe" />                </form>
                    </div>
                </div>        <span id='ABT_credits' style='float: right; font-size: 12px;  text-shadow: 0px 0px 3px black;'><a style='text-decoration: none!important; color: #fff;' href="http://www.allbloggertricks.com/2017/09/how-to-add-popup-email-subscription-form.html">Get This Widget</a></span>
                <div style='clear:right'></div>    </div>
        <script type="text/javascript"> window.onload = function() { if(sessionStorage.getItem('closed')){ document.getElementById("ABT_float_ads_main_Wrap").style.display = 'none'; }else{ var ABT_closeButton = document.getElementById('ABT_close_button'); var ABT_float_ads_main_Wrap = document.getElementById("ABT_float_ads_main_Wrap"); myVar = setTimeout(function() { ABT_float_ads_main_Wrap.style.display = 'block' }, 3000); ABT_closeButton.onclick = function() { if(!sessionStorage.getItem('closed')){ sessionStorage.setItem('closed', 'true'); } document.getElementById("ABT_float_ads_main_Wrap").style.display = 'none'; } } }</script>

        That's it Thanks For Following The Tutorial Now Its time For Customization to make it as it made for your site.

        Customization:

        • The Orange Highlighted Text is responsible for Font-awesome Style-sheet if you already included this style-sheet in your blog template then please don't add this Script in your blog.
        • The Light-Blue Highlighted Text is Responsible For Your Feedburner Address Just change every instance of Yellow Highlight text and replace with your Feedburner Address.
        STEP 6:  All Done Save the Gadget and Check it on your site.

        Conclusion:

        Finally, we have added the plugin. If you found any problems installing this plugin then feel free to comment I will help you in resolving your problem.

        If you want this plugin to have some additional features then comment below or contact us regarding your request. 

        We have also added a media query to hide this widget when the width of the device is less than 650px. 


        That's It Thanks For Following our Tutorial '' Fastest Popup Feedburner Subscription Plugin v2.0 for Blogs - 2019 '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
        Read more »