Css3 Popup Text In Addition To Picture Boxes For Blogger

While designing a reader’s website nosotros came across an existing fact that popups unremarkably annoys users, but if nosotros mean value to a greater extent than purposely together with then it has the potentials to modify its image. Do you lot e'er imagine of creating a lengthy weblog post service of almost xx pages permit every bit assume if you lot published it on xx dissimilar pages together with then your users volition experience irritation, thus on this circumstances you lot bespeak to utilize popups together with tin sack create out xx page posts on a unmarried page. Therefore, today nosotros volition create a CSS3 Popup Text together with Image box for Blogger.

We know you lot would dear to preview these CSS3 Popup icon together with text boxes ,so don't live on shy experience gratuitous to laissez passer it a try.

CSS3 Popup Text And Image Boxes (LIVE DEMO)

Features of CSS3 Popup Box:

• It has smoothen fade-in together with fade-out Jquery effect.

• Bring cherish experience amongst Blogger, WordPress together with those blogging platforms which accepts HTML.

• It is built amongst CSS3 together with JavaScript thus you lot tin sack assume how good it volition work.

• Works good amongst almost every browser i.e. Google Chrome, Internet Explorer, Firefox together with etc.

How To Add CSS And JavaScript inwards Blogger:

The steps of installation are extremely straightforward, together with it would non eat to a greater extent than than 10 minutes for consummate integration. 

• Go to Blogger.com >> Template >>
• Now backup your template, thus you lot stimulate got a hardcopy of your subject if anything went wrong.
• Then become to Edit HTML >> Proceed
• Now Search for ]]></b:skin> and together with then only higher upward it glue the next CSS codes.

div#Popup{ position: absolute; top: 40px; width: 560px; left: 170px; border: company 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: company 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> together with directly glue the next JavaScript code higher upward 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 relieve your template past times pressing Save Now button

How To Install Popup Box on Blogger:

To install popup icon together with text boxes you lot bespeak to follow the higher upward steps correctly, if you lot stimulate got already added the CSS together with JavaScript codes together with then create every bit follows.

1. Go to Blogger.com >> Add a New Post
2. Now glue the Following Code inwards 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 lot desire to demo to your visitors on popup your button.

Important: After pasting the higher upward HTML code don't revert dorsum to Compose tab, only striking the Publish button. You tin sack too house the higher upward code where you lot desire to house your popup button.

For Image Popup: 

Just glue the next code anywhere inwards your HTML template i.e. Blogger >> NEW Post >> HTML TAB

<div id="Popup">
<h3>
Heading</h3>
Here you lot volition write a chip introduction almost the icon thus users tin sack easily selection what you lot are trying toshow inwards the image<br />
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4T3vvehM5EvzlXy6eYoVdYBngnfeYz85NfqLGYQVWSg-F057qerI8Z5etRiBOqRfPGYqpxuamfioHmJyfYoP7_I5jzlxvVPlHEmkFCeoFyTtCaMHlqC8rQEp5ywxvGyUJl7LfsOkGevw/s1600/1.png'/>
<br />
<a class="button" href="" id="closePopup">OK</a>
</div>

For Text Popup: 

Just glue the next code anywhere inwards your HTML template i.e. Blogger >> NEW Post >> HTML TAB 

<div id="Popup">
<h3>
Here Goes Your H3 Heading</h3>
Here you lot volition write a chip introduction almost the icon thus users tin sack easily selection what you lot are trying toshow inwards the image<br /> Here You tin sack Write your multiple texts, you lot tin sack fifty-fifty utilization HTML tags together with etc.
<br />
<a class="button" href="" id="closePopup">OK</a>
</div>

So nosotros promise you lot volition laissez passer utilize this popup widget on your blog, if you lot stimulate got whatever suggestions experience gratuitous to shipping your comments till together with then peace, blessings together with happy learning.