How to Add jQuery effect Flip over pages widget?

Numerous tricks and tips executing on blog to magnetize visitors/readers view on widgets is a high quality of intelligence. Most of the webmasters are implementing these type of bloggertricks and bloggertips on their blogs by following BlogTariff blog regularly. BlogTariff endeavors to provide high quality of content on their blog for its valuable readers.
Now BlogTariff come up with new “On mouse over Flip book content widget” for blogger. By adding this widget can enhance the quantity of subscribers in better way. Flip over widget is based on “jQuery mouse over effect” code where anyone can add this on their blog by following easy methods, let’s begin the tutorials.

How to Add JQuery effect Flip over page widget for blogger?

Step 1:
Sign into you blogger account
Click on “EDIT HTML” link tab
Now, search for code

]]></b:skin>

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

<style type="text/css">
div.pad {width:600px; height:400px; padding:0 0 40px 0; margin:20px auto; position:relative; overflow:hidden; background:#aaa; border:40px solid #aaa; border-width:40px 40px 0 40px;}
div.pad > div {width:300px; height:400px; position:relative; position:relative; float:right;}
div.pad > div > div:nth-of-type(1) {width:300px; height:400px; position:absolute; left:0; top:0; background:#574;
}
div.pad > div > div:nth-of-type(2),
div.pad > div > div:nth-of-type(2) div {
-webkit-transform-origin: 0 -900px;
-blogtariff-transform-origin: 0 -900px;
-ms-transform-origin: 0 -900px;
-o-transform-origin: 0 -900px;
transform-origin: 0 -900px;
-webkit-transition: 0.75s ease-in-out;
-blogtariff-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
div.pad > div > div:nth-of-type(3),
div.pad > div > div:nth-of-type(3) div {
-webkit-transform-origin: 300px -900px;
-blogtariff-transform-origin: 300px -900px;
-ms-transform-origin: 300px -900px;
-o-transform-origin: 300px -900px;
transform-origin: 300px -900px;
-webkit-transform: rotate(-17deg);
-blogtariff-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
transform: rotate(-17deg);
-webkit-transition: 0.75s ease-in-out;
-blogtariff-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
div.pad > div > div:nth-of-type(2) {width:300px; height:440px; position:absolute; left:0; top:0; overflow:hidden;
-webkit-transform: rotate(-17deg);
-blogtariff-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
transform: rotate(-17deg);
}
div.pad > div > div:nth-of-type(2) div {width:300px; height:400px; position:absolute; left:0; top:0; background:#ddd;
-webkit-transform: rotate(17deg);
-blogtariff-transform: rotate(17deg);
-ms-transform: rotate(17deg);
-o-transform: rotate(17deg);
transform: rotate(17deg);
}
div.pad > div > div:nth-of-type(3) {width:300px; height:440px; position:absolute; left:-300px; top:0; overflow:hidden;}
div.pad > div > div:nth-of-type(3) div {width:299px; height:400px; position:absolute; left:0; top:0; background:#eee; border-right:1px solid #888;
-blogtariff-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
}
div.pad > div:hover > div:nth-of-type(2),
div.pad > div:hover > div:nth-of-type(3),
div.pad > div:hover > div:nth-of-type(2) div,
div.pad > div:hover > div:nth-of-type(3) div
{
-blogtariff-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transform: rotate(0deg);
-blogtariff-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
div.pad h1 {padding:0; margin:0; text-align:center; font:normal 80px/250px georgia, serif; color:#111; text-shadow: 0px 1px 1px #ddd;}
div.pad p {margin:0; text-align:center; font:normal 15px/18px Georgia, serif; color:#111; padding:20px;}
</style>

After successful adding the above code now “Save the template”

Step 2:

Click on “Design (Layout in the new blogger interface) Page elements” link tab
Click on “Add a Gadget”
Select “HTML/Javascript” widget and copy the below code paste in it.

<div class="pad">
<div>
<div><h1>Demo</h1><p>by<br />BLOGTARIFF</p></div>
<div><div>
<p>Your Text Start Here </p>
</div></div>
<div><div><p> Your Text Start Here </p></div></div>
</div>
</div>

Customization:

After successful adding code and altering tags now.

• Replace “ BLOGTARIFF ” with your Blog/Website Name
• Replace “ Your Text Start Here” with your display content information

Now “Save the widget” and template to preview your experiment.

Appreciation

If you enjoyed this article let know your views and suggestions via comments. We always appreciates by Subscribing to US - Don't miss ensuing posts.