All about Blogger's Post Thumbnail

When I was designing the website probably one of the most challenging part I have encounter would be all about blogger's thumbnail. Yes! from the name it may sound easy but for some reason I couldn't find any resources which could resolved my concern. The thing is that I've changed my website's layout when you click a label, it only shows the Post title and err the Post Thumbnail. No, its not that post thumbnail did not display it just that it did display awfully! can you imagine a default thumbnail image size which is only 72px x 72px transformed into a let say 200px x 200px and your stock to that size unless of course you'll alter it which will I be teaching you today. You maybe thinking that why can't i simple change the dimension of the image to my preferred one? yes of course we can always do that but as mentioned before, it display in awful manner. So how do we alter it then? to make it resizable the way we want it by not killing the quality of the image? simple. (I never thought it would this be simple. Haha) We just have to add a script and add a class that the script understands to the image tag. Don't worry I'll be teaching you on how to do this in a very friendly manner. so let's get started!

Step 1. Proceed to EDIT HTML.

Step 2. Proceed to EDIT HTML.

- Second, look for expr:src='data:post.thumbnail' on an <img> tag.
- Third, Add class="resizethumbnail" unto <img> tag with expr:src='data:post.thumbnail'.

Example

BEFORE
<img expr:src='data:post.thumbnailUrl' style='width: 100%; height: 100%'/>

AFTER
<img class='resizethumbnail' expr:src='data:post.thumbnailUrl' style='width: 100%; height: 100%'/>

Step 3. Paste this code above </body>

<script type='text/javascript'>
 $(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});});
</script>