CSS3 Popup Text and Image Boxes For Blogger

While designing a reader’s website we came across an existing fact that popups usually annoys users, but if we think more purposely then it has the potentials to change its image. Do you ever imagine of creating a lengthy blog post of about 20 pages let as assume if you published it on 20 different pages then your users will feel irritation, so on this circumstances you need to utilize popups and can manage 20 page posts on a single page. Therefore, today we will create a CSS3 Popup Text and Image box for Blogger.

We know you would love to preview these CSS3 Popup image and text boxes ,so don't be shy feel free to give it a try.

Features of CSS3 Popup Box:

  • It has smooth fade-in and fade-out Jquery effect.
  • Bring cherish experience with Blogger, WordPress and those blogging platforms which accepts HTML.
  • It is built with CSS3 and JavaScript so you can assume how well it will work.
  • Works well with almost every browser i.e. Google Chrome, Internet Explorer, Firefox and etc.

How To Add CSS And JavaScript in Blogger:

The steps of installation are extremely straightforward, and it would not consume more than 10 minutes for complete integration. 
  • Go to Blogger.com >> Template >>
  • Now backup your template, so you have a hardcopy of your theme if anything went wrong.
  • Then go to Edit HTML >> Proceed
  • Now Search for ]]></b:skin> and then just above it paste the following CSS codes.

div#Popup{ position: absolute; top: 40px; width: 560px; left: 170px; border: solid 1px #bbb; padding: 20px; background: #fff; -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25); opacity: 0.0; -webkit-transition: opacity 0.0s ease-out; z-index: 0; }
div#Popup.show {
opacity: 1.0;
z-index: 100;
-webkit-transition-duration: 0.25s;

pre { background: rgba(0,0,0,.75); margin: 0 0 18px; padding: 13px 18px 14px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 1px 1px #fff; font-size: 11px; line-height: 16px; font: 12px/18px "Monaco","Courier New","Courier",monospace;color:#fff;}

code{ color:#fff;background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); font: 12px/18px "Monaco","Courier New","Courier",monospace;}

   border-radius: 10px;
    -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5);
    color: #FFFFFF !important;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    padding:1px 4px 1px 4px;
.button:hover{ background:#327F32;text-decoration:none;}

     5.Then Search for </head> and now paste the following JavaScript code above it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
// Place all Javascript code here
$("#showPopup").click(function() {
return false;
$("#closePopup").click(function() {
return false;
 return false;

     6.Now save your template by pressing Save Now button

How To Install Popup Box on Blogger:

To install popup image and text boxes you need to follow the above steps correctly, if you have already added the CSS and JavaScript codes then do as follows.
  1. Go to Blogger.com >> Add a New Post
  2. Now paste the Following Code in your HTML Tab of Blogger Post Editor.
<a href="" id="showPopup" class="button">Show me The Message</a>
    3.Now Replace  Show me The Message with the text you want to show to your visitors on popup your button.

Important: After pasting the above HTML code don't revert back to Compose tab, just hit the Publish button. You can also place the above code where you want to place your popup button.

For Image Popup: 
Just paste the following code anywhere in your HTML template i.e. Blogger >> NEW Post >> HTML TAB

<div id="Popup">
Here you will write a bit introduction about the image so users can easily pick what you are trying toshow in the image<br />
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYDg_4uJR2iPQBSf2Uy7JvF6DwWlQ0hJB1tQ4uNewSGS7cJ7bAWOWbWApiqzQKcZioAe5dTbz_lyJxCtfJeF_SA2s62RrLyQxSuPCFYRsJPiJcgzt45cUg7OuAphnT6vOJY8Nn6ysO0JA/s1600/1.png'/>
<br />
<a class="button" href="" id="closePopup">OK</a>

For Text Popup: 
Just paste the following code anywhere in your HTML template i.e. Blogger >> NEW Post >> HTML TAB 

<div id="Popup">
Here Goes Your H3 Heading</h3>
Here you will write a bit introduction about the image so users can easily pick what you are trying toshow in the image<br /> Here You can Write your multiple texts, you can even use HTML tags and etc.
<br />
<a class="button" href="" id="closePopup">OK</a>

So we hope you will give utilize this popup widget on your blog, if you have any suggestions feel free to send your comments till then peace, blessings and happy learning. 

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


July 10, 2012 at 1:00 AM

Amazing Pop Up Window

Good Effort Thanks Syed

Resently Posted CSS : Google Style Red Button Hover & active

July 16, 2012 at 7:05 PM

Awesome :) help me show password to my readers

July 22, 2012 at 11:47 PM

Its work but i have a problem that i need image or text popup same place of "Show me The Message". Means that when i used this code It works perfectly but popup show at the top of the blog post and i need popup show at the end of blog post. Any one help me :)

August 7, 2012 at 9:17 AM

bro this tools works fine but when click show message then message show always in blogger top please help me how can add message box same click area

Regard Muhammad Azeem

August 7, 2012 at 9:20 AM

http://win7master.blogspot.com/2011/11/popup-text-and-images.html view my post cannot open some menu button other post show menu..

Editorial Team MOD
August 7, 2012 at 9:26 AM

Brother Include the POP UP Coding in your Blog Post then it will appear next to your Pop Button

Editorial Team MOD
August 7, 2012 at 9:28 AM

Brother You Have Linked "http://www.blogger.com/post-edit.g?blogID=2037047642667202318&postID=6363322008990908313&from=pencil" To your Pop Button. Simply Go To Blogger >> Edit Post >> HTML TaB >> Search the Above Link >> And Replace it with >> # << Now Update Post. Don't Revert Back to Compose other wise it will not work. Peace

August 7, 2012 at 4:26 PM

Thank you Syed Faizan ali

August 5, 2013 at 7:36 PM

This pop-out button text box is fantastic and I am using it on my blog. Thank you so much!

One question. Is there a way I can modify the code so that I could add a video to the box?


Editorial Team MOD
August 7, 2013 at 8:02 AM

Yes you can always customize the CSS

January 9, 2014 at 12:25 AM

nice post

March 2, 2014 at 10:38 AM

I want when I open or click image in a post it should be responsive. I mean when I open it on a mobile device it should show up whole image. I have blog http://www.bfworld.tk it works good on desktop but when i open it on a mobile device and open any post in there and when click any image in there. It opens the image but show only half of the image. Can you please tell me how to make it responsive like i have my template on www.bfworld.tk its responsive and work good except the issue i just mentioned. Please anybody help me in this serious trouble. Thanks Julie

Editorial Team MOD
March 6, 2014 at 9:58 AM

Hi, You just need to automate the Width of the image. Here's the solution: Just add this to CSS

.post img {
max-width: 100%;
height: auto;

May 23, 2014 at 12:08 AM

Would be possible to make the popup automatic, i.e. not triggered by a "click" on the blog page ? When someone visit my blog I would like to display a popup text box after 3 minutes. How to do this ?

June 12, 2015 at 12:21 AM

For Image, not working.

Editorial Team MOD
June 13, 2015 at 12:15 PM

Works fine in the demo

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.