Flipper is an attractive Jquery Plugin which renovates whatever content to a beautiful book-like widget! With its deport on page-turnover effect, y'all tin easily motion from i page to roughly other without having whatever trouble. If y'all are using whatever tablets similar iPad, as well as then y'all tin easily utilization your figures to plow its pages piece if y'all are on a desktop as well as then y'all tin flick pages amongst the help of your mouse. After ii hours of hard-line coding, hold upwardly I was able to recode the widget by Nickys. It could live used on whatever platform which accepts HTML whether its Blogger or WordPress, y'all tin utilize it on whatever website. This Flipping Widget volition render a whole novel glance to your weblog or website as well as thus, it volition attract users similar a bee to a honey.
We know y'all cannot facial expression to preview the Flipper: Page Flip Text as well as Image Gallery Widget, so no to a greater extent than waiting become a caput as well as reach it a try.
We know y'all cannot facial expression to preview the Flipper: Page Flip Text as well as Image Gallery Widget, so no to a greater extent than waiting become a caput as well as reach it a try.
What is Flipper Plugin as well as Its Feature?
There are tons as well as tons of Flipping Plugins as well as software available on the meshing which is created amongst the intention to convert an unexciting content into an eye-catching flicking book. This widget is so flexible as well as has a quick interface this is the motive why it is extremely responsive inward damage of functionality.
- Flipper is optimized for Smartphone, Tablets, Desktops as well as etc.
- With Touch Screen, y'all tin navigate pages though your figures.
- It has Flexible interface, deport on gestures as well as construct clean design.
- It is super lightweight thus, no compromise on your site speed.
- You tin non entirely utilization images but tin too utilize text inward this Flipper widget.
How To Add Flipper Jquery Plugin on Blogger BlogSpot:
The physical care for is extremely straightforward as well as it volition bring minutes to live integrated into your Blogger Blog. We stimulate got shaped this tutorial inward such a means that it soaks less fourth dimension as well as gives perfect results.
- Go to Blogger.com > Your Blog >> Template
- Download Backup of your template incase anything went wrong.
- Then pick out Edit HTML >> Proceed
- Now inward your Template Search for ]]></b:skin> and simply to a higher house it glue the next CSS (Style Sheet) code.
.flipper-wrap *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.flipper-wrap{position:relative;width:800px;height:400px;margin:20px 0 40px 0}
.flipper-wrap{-moz-user-select:none;-webkit-user-select:none;user-select:none;-ms-user-select:none}
.flipper-page{position:absolute;left:0;top:0;width:200%;height:100%;background:white;border:1px corporation #e1e1e1}
.flipper-page-left{overflow:hidden;position:absolute;left:0;top:0;width:50%;height:100%}
.flipper-page-left
.flipper-page{left:0}
.flipper-page-right
.flipper-page{right:0;left:auto}
.flipper-page-right{overflow:hidden;position:absolute;right:0;top:0;width:50%;height:100%}
.flipper-page-wrap{position:absolute;left:0;top:0;width:100%;height:100%}
.flipper-overlay{display:none;width:100%;height:100%;position:absolute;left:0;top:0;z-index:9999}
.flipper-page-right
.flipper-overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,0.085)),color-stop(100%,rgba(0,0,0,0.04)));background:-webkit-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#40000000',endColorstr='#14000000',GradientType=1)}
.flipper-page-left .flipper-overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,0.04)),color-stop(100%,rgba(0,0,0,0.085)));background:-webkit-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#14000000',endColorstr='#40000000',GradientType=1)}
.flipper-page-right{-webkit-backface-visibility:hidden;-webkit-transform-origin:0 50%;-moz-backface-visibility:hidden;-moz-transform-origin:0 50%;-ms-backface-visibility:hidden;-ms-transform-origin:0 50%;-o-backface-visibility:hidden;
-o-transform-origin:0 50%;backface-visibility:hidden;transform-origin:0 50%}
.flipper-page-left{-webkit-backface-visibility:hidden;-webkit-transform-origin:100% 50%;-moz-backface-visibility:hidden;-moz-transform-origin:100% 50%;-ms-backface-visibility:hidden;-ms-transform-origin:100% 50%;-o-backface-visibility:hidden;
-o-transform-origin:100% 50%;backface-visibility:hidden;transform-origin:100% 50%}
.flipper-page img{max-width:100%}
.flipper-column-full{display:block;width:100%;height:100%}
.flipper-column-full-half{float:left;display:block;width:50%;height:100%;margin:0;padding:0}
.flipper-column-outer{float:left;padding:30px;width:50%;height:100%}
.flipper-column-single-outer{padding:30px;width:100%;height:100%}
.flipper-column{overflow:hidden;height:100%;width:100%}
.flipper-inner-image{display:block;overflow:hidden}
.flipper-inner-image.start{margin-bottom:20px}
.flipper-inner-image.end{margin-top:20px}
.flipper-inner-image img{float:left}
.flipper-wrap{font:12px/18px helvetica,tahoma,sans-serif;color:#333;background-color:#fff}
.flipper-wrap h1{font-size:22px;line-height:36px}
.flipper-wrap p{margin:18px 0}
.flipper-next-page{position:absolute;width:38px;height:38px;right:-44px;top:50%;margin-top:-19px;cursor:pointer}
.flipper-prev-page{position:absolute;width:38px;height:38px;left:-44px;top:50%;margin-top:-19px;cursor:pointer}
.flipper-pager-wrap{position:absolute;left:0;bottom:-24px}
.flipper-pager{float:left;width:17px;height:18px;margin:5px 5px 0 0;cursor:pointer}
.flipper-temp{border:1px corporation #e1e1e1;top:-1px}
.flipper-fb-bounce{position:absolute;z-index:9999;background:#e1e1e1;padding:10px;right:0;top:0;font:12px/18px helvetica,tahoma,sans-serif;color:#333;display:none}
.demo-box {
padding: 10px 0 5px 0;
}
#my-flipper, #myflipper {
margin: 0 auto;
}
.flipper-page-padding-wrap {
padding: 40px;
}
#myflipper h1 {
text-align: center;
font-size: 36px;
line-height: 340px;
font-weight: 100;
font-style: italic;
}
#myflipper h2 {
text-align: left;
font-size: 22px;
}
p.headline.first {
margin-top: 155px;
}
#myflipper p.headline {
display: block;
font-size: 16px;
line-height: 22px;
font-weight: 100;
font-style: italic;
text-align: center;
}
p.left {
position: absolute;
left: 30px;
top: 30px;
width: 40%;
}
p.right {
position: absolute;
width: 40%;
bottom: 30px;
right: 30px;
}
#myflipper .description.no-margin {
margin-top: 40px;
}
.flipper-page .fullsize {
/* margin: -31px 0 0 -31px;*/
}
.mag {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}
.mag img {
float: left;
margin: 0 10px 10px 0;
width: 200px;
}
.video-wrapper {
width: 700px;
margin: 80px auto;
}
.video-wrapper h3 {
font-size: 36px;
line-height: 22px;
font-weight: 100;
cursor: pointer;
text-align: center;
font-family: helvetica;
color: white;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
5. Now Search for </head> once y'all notice it as well as then simply to a higher house it glue the next JavaScript (Jquery) code.
<script src="http://mbl-flipper-google-blogger.googlecode.com/files/modernizr-2.min.js"></script><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js?ver=3.3.2'></script><script>(function ($, undefined) {$(document).ready(function() {$('#myflipper').flipper({'width' : 700,'height' : 400,"arrows" : true,pager : true,'imagesPath' : 'http://mybloggerlab.com/Images/'});});}(jQuery));</script><script src="http://mbl-flipper-google-blogger.googlecode.com/files/flipper.min.js"> </script>
6. Now Go to Layout >> Add a Gadget >> Add HTML/JavaScript >> as well as and then glue the next code
<!-- MBL Page Flipper Widget -->
<div class="demo-box">
<div id="myflipper">
<div class="flipper-page"><div class="flipper-page-padding-wrap">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgry9nUHc3ETGRzV9r6HUYLGeSxvBLC6fSE90rVhee_L7TpBm9x41-PKgW1zySoIDkhJg9nURzL1sVhWwQ7GjY3b0UDp5A8xl9xNfRZfLW485d_e9FAAZKajYDaTGBFjSUWd9bJXZPrtOo/s1600/1.png" class="fullsize" /></div></div>
<div class="flipper-page no-padding">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ota1tYQnzA7gNNw4SejwTh_UfC71YZ4VYfQr9xhfBCzi30ttUNXRRQK33Qr7m9_xS5GxCuc_Uqg_WNO49jI0kWZlPBE5eTbE2xeOgFo7uNUs6PNDkSuw3hRlIUNyo2G7tOEIleTLLLs/s1600/2.png" class="fullsize" /></div>
<div class="flipper-page no-padding">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs6ERC8UA4UHMO1GHNQLB1m27g86nNYDbSLdJnmx8Ok8FEOC8quucuqPwVKqObew40wWTS6CaTqAvFj9UqDrDiLs0P7jlWji62Bz_27azWrQQztxY4aNzgLDS8jDp8Z0cLBjndjpgn1PU/s1600/3.png" class="fullsize" /> </div>
<div class="flipper-page"><div class="flipper-page-padding-wrap">
<h2>How nigh roughly text?</h2>
<p class="mag">
Lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed create eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim advertising minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.<br /><br />
Sed ut perspiciatis unde omnis iste natus fault sit down voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p class="headline" style="margin-top: 40px;">It feels simply similar a magazine.</p>
</div></div>
<div class="flipper-page">
<p class="headline first">Flicking through photos feels simply similar inward an album. <br />Thank y'all for checking out Flipper.</p>
</div>
<div class="flipper-page">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESQueEx-lHsj0A6Rxq_yOk-n6oxwRK47ZxmwngGjXGDW0UNtFC4nEHQvc7wp9zkTlDWLjk3KCF0uHfv1YM6rIlU7DtQKRdJOGhB5uZWvtZM3N_8BrfueQgiRHVaggEkDsBZ121EvQiMs/s1600/flipper.png" />
</div>
</div></div>
Remember: You tin glue the Above HTML code anywhere y'all similar i.e. inward post, to a higher house posts, bellow posts as well as etc.
7. Now y'all volition move on the championship box empty as well as and then Save your widget past times pressing Save Now button.
How To Customize Flipper:
- If y'all desire to add together to a greater extent than Text pages on your Flipper, simply add together the next coding at the cease of your HTML coding (in measurement 6)
<div class="flipper-page"><div class="flipper-page-padding-wrap">
<h2>How nigh roughly text?</h2>
<p class="mag">
Lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed create eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim advertising minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.<br /><br />
Sed ut perspiciatis unde omnis iste natus fault sit down voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p class="headline" style="margin-top: 40px;">It feels simply similar a magazine.</p></div></div>
- If y'all desire to add together to a greater extent than images to your Flipper, as well as then glue the next Code at the cease of your HTML coding (in measurement 6)
<div class="flipper-page">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESQueEx-lHsj0A6Rxq_yOk-n6oxwRK47ZxmwngGjXGDW0UNtFC4nEHQvc7wp9zkTlDWLjk3KCF0uHfv1YM6rIlU7DtQKRdJOGhB5uZWvtZM3N_8BrfueQgiRHVaggEkDsBZ121EvQiMs/s1600/flipper.png" />
</div>
- The customization of the Flipper is extreamly strightforwad, i am certain y'all volition non notice whatever variety of difficulty piece personalizing.
From the Editors Desk:
So, guys nosotros hope y'all stimulate got enjoyed the sweetest widget nosotros always made. These widgets volition surly bring your weblog to the side past times side level.If y'all postulate whatever help amongst this, or whatever other tutorial don’t live shy experience gratuitous to inquire till as well as then peace, blessings as well as Happy Flipping.
No comments:
Post a Comment