How to Add Pinch to Zoom Effect in Blogger Blogs for Mobile devices

When one of our users requested me to share a cool plugin for allowing mobile Touch screen Pinch to zoom on blogger. So make a small search on Google & I came across Spiceupyourblog. They have shared a awesome plugin for this case which works great on mobile phones. This hack will also be done on your blog template just by adding the viewport meta tag which allows the readers to zoom in & zoom out their screen as they wish! In default on your template the “user-scalling=no” will be like this or it may not present on your theme. It you want the mobile users to zoom your site then you need to change the value from “no” to yes”. It’s an recommended tool because this can make your reader experience as real while reading & now I’m here with a tutorial for Adding Pinch To Zoom with viewport Meta tag for mobiles in Blogger.

How to Add Pinch to Zoom Effect in Blogger Blogs for Mobile devices

As I said before, this case can be solved with meta tag. First you need to set your blog default size on mobile phones, it is noted as initial-scale=2.0. Then you need to set the minimum and maximum values with scalable value “yes” or scalling value to “yes”. If you add these edited tag on your blog, then you can enable pinch to zoom effect for mobile in your blog. Most of the users will be visiting your site through smartphone’s, so I would recommend you to add this effect on your blogger blogs.

How to Add Pinch to Zoom Effect in Blogger Blogs for Mobile devices

For making this process success, I’ve two methods. Both are same but the coding are quite different. You can choose any one method for adding Pinch to Zoom for Mobile Users in Blogger Blogs. Let’s see how?

How to Enable Pinch To Zoom effect On Your Blog

Method 1: With Meta Content Width Tag

Step 1: Go to Blogger Dashboard >> Select Template>> Edit HTML and search the </head> tag on your template.

Step 2: Now just Copy And Paste this code just above </head> tag,

<meta content=’width=device-width, initial-scale=1.0, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes’ name=’viewport’/>

Step 3: That’s it! Now Save your template & check your site in mobile, cool?

Method 2: With Viewport Meta Tag 

Step 1: Go to Blogger Dashboard >> Select Template>> Edit HTML and search the </head> tag on your template.

Step 2: Now just Copy And Paste this code just before </head> tag,

<meta name=’viewport’ content=’width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes’/>

Step 3: Save your template & check your site via mobile and enjoy!!

These effects can surely make the reader to feel comfortable will reading your contents. Hope you’ve installed Pinch to Zoom effect in your blog for Mobile devices successfully. If you’re having any problems then you may drop them in comments! Don’t forget to share your thoughts in comments below! Happy Zooming 🙂 [via]

For More Watch Video Tutorial:

Facebook Comments

Speak Your Mind

*

CommentLuv badge