While designing a reader’s website nosotros came across an existing fact that popups normally annoys users, but if nosotros intend to a greater extent than purposely together with hence it has the potentials to alter its image. Do yous always imagine of creating a lengthy spider web log shipping service of virtually twenty pages permit every bit assume if yous published it on twenty dissimilar pages together with hence your users volition experience irritation, hence on this circumstances yous take to utilize popups together with tin acquire by twenty page posts on a unmarried page. Therefore, today nosotros volition practice a CSS3 Popup Text together with Image box for Blogger.
We know yous would dearest to preview these CSS3 Popup picture together with text boxes ,so don't hold upwards shy experience gratis to laissez passer on it a try.
We know yous would dearest to preview these CSS3 Popup picture together with text boxes ,so don't hold upwards shy experience gratis to laissez passer on it a try.
Features of CSS3 Popup Box:
- It has polish fade-in together with fade-out Jquery effect.
- Bring cherish experience alongside Blogger, WordPress together with those blogging platforms which accepts HTML.
- It is built alongside CSS3 together with JavaScript hence yous tin assume how good it volition work.
- Works good alongside almost every browser i.e. Google Chrome, Internet Explorer, Firefox together with etc.
How To Add CSS And JavaScript inward 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.
For Image Popup:
- Go to Blogger.com >> Template >>
- Now backup your template, hence yous lead keep a hardcopy of your subject if anything went wrong.
- Then become to Edit HTML >> Proceed
- Now Search for ]]></b:skin> and together with hence only inward a higher house it glue the next CSS codes.
div#Popup{ position: absolute; top: 40px; width: 560px; left: 170px; border: venture 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: venture 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 forthwith glue the next JavaScript code inward a higher house it.
6.Now salvage your template past times pressing Save Now button
<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>
How To Install Popup Box on Blogger:
To install popup picture together with text boxes yous take to follow the inward a higher house steps correctly, if yous lead keep already added the CSS together with JavaScript codes together with hence practice every bit follows.
- Go to Blogger.com >> Add a New Post
- Now glue the Following Code inward 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 yous desire to demo to your visitors on popup your button.
Important: After pasting the inward a higher house HTML code don't revert dorsum to Compose tab, only hitting the Publish button. You tin besides house the inward a higher house code where yous desire to house your popup button.
For Image Popup:
Just glue the next code anywhere inward your HTML template i.e. Blogger >> NEW Post >> HTML TAB
For Text Popup:
<div id="Popup">
<h3>
Heading</h3>
Here yous volition write a flake introduction virtually the picture hence users tin easily alternative what yous are trying toshow inward 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 inward your HTML template i.e. Blogger >> NEW Post >> HTML TAB
<div id="Popup">
<h3>
Here Goes Your H3 Heading</h3>
Here yous volition write a flake introduction virtually the picture hence users tin easily alternative what yous are trying toshow inward the image<br /> Here You tin Write your multiple texts, yous tin fifty-fifty utilization HTML tags together with etc.
<br />
<a class="button" href="" id="closePopup">OK</a>
</div>
