Popup Image viewer in Blogger using CSS


To setup Popup Image Viewer in Blogger. Click here for Live Demo

Go to Templates>Edit Html and copy-paste the following code between your <head> </head> section.

<style type="text/css">

position: relative;
z-index: 0;

background-color: transparent;
z-index: 50;

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */




Now add the following code the that blog post where you want image to popup.

<a href=""><img src="Image URL" width="100px" height="100px" border="0px" /><span><img src="Image URL" /><br /></span></a>

Place the image url by replacing with Image URL from above code.


Click here for Live Demo

Blogger Widget change your blog text size

Using this Widget you can give option your readers to change blog text size so that they can read in which size they like.

Go To Layout>Page Elements> Add a Gadget> Html/Javascript

Copy The Following Code & Paste in your Html/Javascript widget:

Code updated

<div><a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’.8em'”><span style=”font-size: x-small;”>Small</span></a></div><div><a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’1em'”><span style=”font-size: small;”>Medium</span></a></div><div><a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’1.5em'”><span style=”font-size: large;”>Large</span></a></div><div>
</div><div><a href=”http://www.xyzblogger.com/?p=388″ target=””_blank””><span>Get This Widget</span></a></div>


Live Demo of this widget

You can even add this code in your post by editing your template body.

Update: This code will work for all default templates provided by Blogger and may not work properly in custom blogger templates.

This widget will not affect your blog or other visitors, only the reader who is changing text for himself.
You can even add more size options by editing the font-size in the above code.

Redirect a blogger blog to some other Url


Go to Design>Edit Html

Find the following code using Ctrl+F


Just Above that code paste the following code.

<b:if cond=’data:blog.url == &quot;http://OldBlogURl/&quot;’>

<meta content=’0; url=http://the_Url_you_want_it to redirect/‘ http-equiv=’refresh’/>


Replace the Green Line with your current blog url (which you want to redirect to some other another url)

Replace the Red Line  to new blog url.

How to prevent Blogger blog from redirecting to country-specific domain

To Prevent blogger to redirect your blogspot.com to any country-specific domain such as blogspot.in (for India) do the following:

Go To Design>Edit HTML

And now between <head> and </head> tag insert the following code.


<script type=”text/javascript”>
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf(“.”));
if (ctld != “.com”) {
var ncr = “http://” + blog.substr(0, blog.indexOf(“.”));
ncr += “.blogspot.com/ncr” + slug;


And Save the Template.

Blogger started redirecting blogspot.com to country-specific domains (ccTLDs)

Blogger have started redirecting blogspot.com to your country-specific domain(ccTLDs).

So far redirection is done in 15 countries.

  • India- blogspot.in
  • UK – blogspot.co.uk
  • Japan – blogspot.jp
  • Canada – blogspot.ca
  • Italy – blogspot.it
  • Sweden – blogspot.se
  • Mexico – blogspot.mx
  • France – blogspot.fr
  • Portugal – blogspot.pt
  • Argentina – blogspot.com.ar
  • Brazil – blogspot.com.br
  • Australia – blogspot.com.au
  • New Zealand – blogspot.co.nz
  • Germany – blogspot.de
  • Spain – blogspot.com.es


And this redirection will affect your blog in following ways:

Facebook likes, tweets,Google + will get affected as you will have visitors from different  location for same post will have different ccTLDs.

Crawlers will find same content on different urls so you might get banned for publishing duplicate contents.

If you are using some other plugins for comments like Disqus or FB comments will also might get affected.


Why Google is redirecting blogspot.com to ccTLDs?

The answer is censorship.

Here is what google says:

By utilizing ccTLDs, content removals can be managed on a per country basis, which will limit their impact to the smallest number of readers. Content removed due to a specific country’s law will only be removed from the relevant ccTLD.