BLOGGER: HOW TO MAKE HOMEPAGE IMAGES CLICK THROUGH TO POST PAGES

One of those funny little things that Blogger does is to open homepage images as a full resolution version of themselves. Instead, I think most of us would prefer that homepage images clicked through to their full post page. Only from the post page should the image open as a full resolution version of itself. Does that make sense?...You click your image on your homepage and it takes you to your post, then you click on your image on your post page and it pops up as a larger version of itself.

When I first started on Blogger it drove me crazy that this wasn't the default setting. Finding a tutorial on how to change this seemed near impossible. So, as I often do, I turned to my tech genius friend, Richard, for help. He gave me a quick (and brilliant) fix and the thumbs up to share it with you guys.

Step 1. Go to the dashboard and select the “Template” tab. Now back up your template!

Step 2. Then, from the “Template” tab, click “Edit HTML.” Once you're inside the template editor, click inside the text box and search (control + F) for this:

</b:skin>

Under that you'll need to paste this code:

<!-- custom start - make home page images click through to post pages -->

<script src='http://code.jquery.com/jquery-latest.min.js' 
type='text/javascript'/> 
 <b:if cond='data:blog.pageType == &quot;index&quot;'> 
 <script type='text/javascript'> 
 //<![CDATA[ 
    function linkListImagesToPosts() { 
        $(".blog-posts .post-outer").each(function(index) { 
                 // get the post url from the title anchor 
                 var newhref = $(this).find("h3.post-title a").attr("href"); 
                  
                 // find the image anchor and clone it 
                 var a = $(this).find("img").first().parent("a"); 
                 var aclone = a.clone();         
                  
                 // change the link in the image anchor 
                 aclone.attr("href", newhref); 
                  
                 // replace the old anchor with the new one 
                 a.replaceWith(aclone); 
         }); 
    } 
   $(document).ready(function() {                 
         linkListImagesToPosts(); 
    }); 
 //]]> 
 </script> 
 </b:if>

<!-- custom end - make home page images click through to post pages -->

Note: if you have another version of Jquery elsewhere on your blog it may cause problems. If you find that any issues pop up after implementing this code, try removing the section in pink.

Thanks again to Richard!