Flipper is an attractive Jquery Plugin which renovates whatsoever content to a beautiful book-like widget! With its acquit upon page-turnover effect, yous tin laissez passer on the sack easily movement from 1 page to roughly other without having whatsoever trouble. If yous are using whatsoever tablets similar iPad, as well as then yous tin laissez passer on the sack easily utilisation your figures to plow its pages piece if yous are on a desktop as well as then yous tin laissez passer on the sack flick pages amongst the assistance of your mouse. After ii hours of hard-line coding, live I was able to recode the widget by Nickys. It could live used on whatsoever platform which accepts HTML whether its Blogger or WordPress, yous tin laissez passer on the sack utilize it on whatsoever website. This Flipping Widget volition supply 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 yous cannot aspect 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 laissez passer on it a try.
We know yous cannot aspect 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 laissez passer on 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 cyberspace 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 inwards damage of functionality.
- Flipper is optimized for Smartphone, Tablets, Desktops as well as etc.
- With Touch Screen, yous tin laissez passer on the sack navigate pages though your figures.
- It has Flexible interface, acquit upon gestures as well as build clean design.
- It is super lightweight thus, no compromise on your site speed.
- You tin laissez passer on the sack non alone utilisation images but tin laissez passer on the sack too utilize text inwards this Flipper widget.
How To Add Flipper Jquery Plugin on Blogger BlogSpot:
The physical care for is extremely straightforward as well as it volition convey minutes to live integrated into your Blogger Blog. We get got shaped this tutorial inwards 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 conduct Edit HTML >> Proceed
- Now inwards your Template Search for ]]></b:skin> and but inwards 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 enterprise #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 enterprise #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 yous notice it as well as then but inwards 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 nearly roughly text?</h2>
<p class="mag">
Lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed produce 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 but similar a magazine.</p>
</div></div>
<div class="flipper-page">
<p class="headline first">Flicking through photos feels but similar inwards an album. <br />Thank yous 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 laissez passer on the sack glue the Above HTML code anywhere yous similar i.e. inwards post, inwards a higher house posts, bellow posts as well as etc.
7. Now yous volition locomote on the championship box empty as well as and then Save your widget past times pressing Save Now button.
How To Customize Flipper:
- If yous desire to add together to a greater extent than Text pages on your Flipper, but add together the next coding at the terminate of your HTML coding (in measuring 6)
<div class="flipper-page"><div class="flipper-page-padding-wrap">
<h2>How nearly roughly text?</h2>
<p class="mag">
Lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed produce 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 but similar a magazine.</p></div></div>
- If yous desire to add together to a greater extent than images to your Flipper, as well as then glue the next Code at the terminate of your HTML coding (in measuring 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 yous volition non notice whatsoever variety of difficulty piece personalizing.
From the Editors Desk:
So, guys nosotros hope yous get got enjoyed the sweetest widget nosotros always made. These widgets volition surly convey your weblog to the adjacent level.If yous bespeak whatsoever assistance amongst this, or whatsoever other tutorial don’t live shy experience costless to enquire till as well as then peace, blessings as well as Happy Flipping.
No comments:
Post a Comment