Add Popup Text and Image Boxes to Blogger?

Webmaster always in way to enhance the blog with adding wonderful widget and scripts to attract more visitors/readers to gain more popularity. Here, BlogTariff comeup with another interesting “Popup Text and Image Box” widget for blogger. Instead of writing full length post on single post readers won’t read successfully they won’t have enough time to reader your full length post. If you tried for splitting of full length post into series by providing links on each post also converts irritation to visitors to by visiting each post.
Here, BlogTariff brings you a wonderful solution to put fullstop this problem, yes BlogTariff and associated partnered site Omlitech has developed CSS3 code to utilize for Full length post in the form of Popup with numerous links at one stop.
We hope before you do implement this experiment on blog you love to preview how Author experimented this idea their OMYLAB blog.

Live Demo

Advantages by Adding this CSS3 Popu Box

• Show all the series of posts in single Popu box
• Make readers to find easy way to access all the post in a single Popup box
• This code box is based on jQuery effect with smooth fade-in and fade-out
• On all blogging platforms you can experience this code
• On all browser platforms it performs well
• Put Full stop to writing full length post
• Put Full stop to linking series linking posts

How to Install CSS3 Code on Blogger?

Sign into your blogger account
Click on “EDIT HTML” link tab
(Before you do implement on you blog backup template if anything goes wrong you can reuse it again)
Now, Search for code

]]></b:skin>

After finding the code copy the below code and paste above to it

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

After successful adding the above code now search for code

</head>

After finding the code copy the below code and paste above to 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>

After successful adding the above code now, “Save the Template”

How to Add Popup Box link code to Blogger?

Now Click on New Post link tab
After successful writing post, now paste the below code wherever you want show Popup box through Blogger Post Editor “Edit HTML” link tab.

<a href="" id="showPopup" class="button">Show me The Message</a>

Customization:

• After pasting the above code just alter the message “Show me the message” with your choice words to show Popu Box.
• After successful alteration message now, “Publish the post”.
• As per your requirement this Popup box can be shown anywhere in the blog.

Code for Image Popup box

Now Click on New Post link tab
After successful writing post, now paste the below code anywhere on blog post through Blogger Post Editor “Edit HTML” link tab

<div id="Popup">
<h3>
Here Starts Your H3 Heading </h3>
Here introduce about the image so users easily can select displayed information in the image<br />
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqU2_JW7ElgmpNeoPgT87tLCwIGiiqmrr3vSFTKFhLZTJ5NQb7wX-3PM30jsRoLQshrQdPLEw54fVxuIpNXt6uUG5s1ZvfkkQioGUQNr8He7H3frilwafiOr6SVYaINK69pjUhnMTO-w/s660/Popup-box-blogtariff.com.jpg'/>
<br />
<a class="button" href="" id="closePopup">OK</a>
</div>

Customization:

• Replace "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqU2_JW7ElgmpNeoPgT87tLCwIGiiqmrr3vSFTKFhLZTJ5NQb7wX-3PM30jsRoLQshrQdPLEw54fVxuIpNXt6uUG5s1ZvfkkQioGUQNr8He7H3frilwafiOr6SVYaINK69pjUhnMTO-w/s660/Popup-box-blogtariff.com.jpg" with your own image to display Popup box.

Code for Text Popup box

Now Click on New Post link tab
After successful writing post, now paste the below code anywhere on blog post through Blogger Post Editor “Edit HTML” link tab.

<div id="Popup">
<h3>
Here Starts Your H3 Heading</h3>
Here introduce about the image so users easily can select displayed information in the image<br /> Here Write your multipurpose texts also HTML tags and etc.
<br />
<a class="button" href="" id="closePopup">OK</a>
</div>

Appreciation:

We hope you've enjoyed this article and we helped you little bit let know your views and suggestions via comments. Don't forget to Subscribe to US