How to change post thumbnail size in blogger custom mobile view (without using Javascript)

How to change post thumbnail size in blogger custom mobile view (without using Javascript)

Alright. This is one of the problems most bloggers encounter when using the blogspot.com platform. Having an awesome blogger theme, fast loading speed and good user experience is the dream every blogger have as it helps them rank well, get their readers to read and enjoy their articles to the point where they get to share it with their friends, increasing their traffic and also be at the top of googles’ SERP (Search engine ranking), thus generating organic traffic for them.
how to resize blogger post thumbnail for custom mobile view
How my blog's custom mobile view thumbnail is

How I increased image thumbnail for blogger mobile view (without using any script)


I also stumbled on this issue and like so many other webmasters, rushed to google to see if any other webmaster has encountered such problems and how they tackled the situation.
Most of the forums I went to solved this situation by using javascript. I used this method for a long time until I stumbled on a website analysis tool and I ran my site for SEO issues only to find out that my blog size has become an estimated 1.9mb in size. That means a user has to use 1.9mb just to access my homepage.

This is bad because it will increase the load time for my site, making it bulky and most users do not like that.

Results from my analysis showed that the problem was because I had multiple javascript files in my blog template and this script came in when I copied the codes to make my blogger custom mobile view image thumbnail bigger
I took the Javascript src and opened it in a new tab and oh! boy,  was I shocked. This script is about 100kb in size and when it adds to the increase thumbnail for each image on my blog's homepage, I would be having over 1.9 Mb for my homepage alone.

So I had to remove the entire script from my blog and I went back to initial thumbnail size, as boring as it was. 

I still couldn't leave it like that.
I decided to do an intensive research and I finally stumbled on the solution on Googles webmaster forum. Surprising enough, not many webmasters were able to research that link as it had only 3 comments on it. 
Can you imagine? 3 comments on a solution most bloggers definitely need?
blogger custom mobile view thumbnail
my blogs custom view for tablet

How to make your blogger Mobile view thumbnail larger in size

This procedure will work only on blogger sites. I will upload the thumbnail method for WordPress and other online platforms soon.

This problem can be solved using the following 5 steps;

Step 1: Login to your Blogger Dashboard
ps: if you do not have a blog and want one today, you can get a free blog on blogger.com!

Step2:  Select the required blog from the drop-down menu at the top left corner of your screen and then click on Template >> Edit Html

Step3: From the editor screen that opens, click Ctrl F  on your keypad and a small box inside the editor will appear.
Step 4: Inside the box, type this (you can copy and paste if you like) mobile-index-thumbnail    

Step 5: There is only one mobile-index-thumbnail on most blogger templates. It will take you to a set of codes that look like this

Highlight and replace the code as instructed in this complete manual,

(Please remove all spaces made in between these codes to make the codes work.)

Type your blog URL but add /?m=1 at the end of the URL e.g www.azgist.com/?m=1 and then select a device. Your blog thumbnail has become responsive and will auto resize to fit the width of any device you are viewing it with. Look at my site screenshot using the mobiletest.me tool and try your own. You can run an analysis of your site and let me know what you think about this method.
Share on Google Plus

About AzTv

Azgist.com, AZTV and AZReporters are the Official Online Platforms for The Best Information Blog where we share the Latest News in Nigeria and the World, Download Latest Songs and Music Video, Stream Movies online free of Charge and get your Voice heard by placing you and your Brand in front of Millions of our Followers.
So Feel Free to Read, Watch and Share all our Updates with your Friends.

0 Comments:

Post a Comment

Please tell us what you think about this article. Use the comment box below. Your feedback is important to Us.

What Others Are Reading on TBIB