CSS3 Popup Text and Image Boxes For Blogger

Socialize It →

Tweet

13

Advertisements

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.

CSS3 Popup Text And Image Boxes (LIVE DEMO)

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;}


.button{
   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;
    background:#33AD33;
    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
$(document).ready(function(){
$("#showPopup").click(function() {
$("div#Popup").addClass("show");
return false;
});
$("#closePopup").click(function() {
$("div#Popup").removeClass("show");
return false;
});
$(".trigger").click(function(){
$(".panel").toggle("fast");
 $(this).toggleClass("active");
 return false;
});
});
</script>

     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">
<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 />
<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>
</div>

For Text Popup: 

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

<div id="Popup">
<h3>
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>
</div>

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. 

Advertisements

About the Editorial Team

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