Flipper is an attractive Jquery
Plugin which renovates any content to a beautiful book-like widget! With its touch
page-turnover effect, you can easily move from one page to another without
having any trouble. If you are using any tablets like iPad, then you can easily
use your figures to turn its pages while if you are on a desktop then you can
flick pages with the help of your mouse. After 2 hours of hard-line coding, finally
I was able to recode the widget by Nickys. It could be used on any platform which accepts HTML whether its
Blogger or WordPress, you can utilize it on any website. This Flipping Widget will provide a whole new
glance to your blog or website and thus, it will attract users like a bee to a
honey.
We know you cannot wait to preview the Flipper: Page Flip Text and Image Gallery Widget, so no more waiting go a head and give it a try.
We know you cannot wait to preview the Flipper: Page Flip Text and Image Gallery Widget, so no more waiting go a head and give it a try.
What is Flipper Plugin and Its Feature?
There are tons and tons of
Flipping Plugins and software available on the internet which is created with
the intention to convert an unexciting content into an eye-catching flicking book.
This widget is so flexible and has a quick interface this is the motive why it
is extremely responsive in terms of functionality.
- Flipper is optimized for Smartphone, Tablets, Desktops and etc.
- With Touch Screen, you can navigate pages though your figures.
- It has Flexible interface, touch gestures and clean design.
- It is super lightweight thus, no compromise on your site speed.
- You can not only use images but can also utilize text in this Flipper widget.
How To Add Flipper Jquery Plugin on Blogger BlogSpot:
The procedure is extremely straightforward and it will take minutes to be integrated into your Blogger Blog. We have shaped this tutorial in such a way that it soaks less time and gives perfect results.
- Go to Blogger.com > Your Blog >> Template
- Download Backup of your template incase anything went wrong.
- Then select Edit HTML >> Proceed
- Now in your Template Search for ]]></b:skin> and just above it paste the following 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 solid #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 solid #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 you find it then just above it paste the following 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 >> and then paste the following 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/AVvXsEgjoiHC2qv8KEk2jPIGaD5gijqzzMdhH2W3PK7RNkIbofM-8lkjNMzKI59NvkyuI6QdvKwoQ9v9Pq5_pbPj-7sp52Lzso2BLkVrn3VoAGINrXGJPopxZWZ6_staMkWiP_rDy4jP8ff_p4c/s1600/1.png" class="fullsize" /></div></div>
<div class="flipper-page no-padding">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKdZ3OozihMzfYPtx1Xg7e6CUe-jZhBRnUMn3k-V8vtTJ6AZALzsHxD4acL8MMkdss59LRPYigCVrjberMxNB5JS20tcla6Et2l1hlCq8r22oUdo94Qwq92HAN8qnmTYRFmP92vSlyTkM/s1600/2.png" class="fullsize" /></div>
<div class="flipper-page no-padding">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJfcdbM-BVksQog4lpUcZslTN7CNTSXCtB6k6qev5nLZn5gKejMDOgRNmFvB7epfWeaVYGtG_T5OkZ4HHrPf6wIx9SE91BVr6VMhJFJt5EMIHJJ4_8hOmkuw1c0TddZnLjPWGKMmsgb4U/s1600/3.png" class="fullsize" /> </div>
<div class="flipper-page"><div class="flipper-page-padding-wrap">
<h2>How about some text?</h2>
<p class="mag">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 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 error sit 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 just like a magazine.</p>
</div></div>
<div class="flipper-page">
<p class="headline first">Flicking through photos feels just like in an album. <br />Thank you for checking out Flipper.</p>
</div>
<div class="flipper-page">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJ6NoRtIFqE7iShDviKPNs6kYScSng9lRullgppIouSuwPcTUf2qVO4IZdo6YAqFNscoPHjMNF5arjZQ2n6ffRF86GqOLAMOl9xPmsusNd55tdrmeGelnhW9im2-ILiUDEc6ReDfZJhg/s1600/flipper.png" />
</div>
</div></div>
Remember: You can paste the Above HTML code anywhere you like i.e. in post, above posts, bellow posts and etc.
7. Now you will keep the title box empty and then Save your widget by pressing Save Now button.
How To Customize Flipper:
- If you want to add more Text pages on your Flipper, just add the following coding at the end of your HTML coding (in step 6)
<div class="flipper-page"><div class="flipper-page-padding-wrap">
<h2>How about some text?</h2>
<p class="mag">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 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 error sit 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 just like a magazine.</p></div></div>
- If you want to add more images to your Flipper, then paste the following Code at the end of your HTML coding (in step 6)
<div class="flipper-page">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJ6NoRtIFqE7iShDviKPNs6kYScSng9lRullgppIouSuwPcTUf2qVO4IZdo6YAqFNscoPHjMNF5arjZQ2n6ffRF86GqOLAMOl9xPmsusNd55tdrmeGelnhW9im2-ILiUDEc6ReDfZJhg/s1600/flipper.png" />
</div>
- The customization of the Flipper is extreamly strightforwad, i am sure you will not find any sort of difficulty while personalizing.
From the Editors Desk:
So, guys we hope you have enjoyed the sweetest widget we ever made. These widgets will surly take your blog to the next level.If you need any help with this, or any other tutorial don’t be shy feel free to ask till then peace, blessings and Happy Flipping.
About the Editorial Team
The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
18 comments
Wow! Amazing! Thanks!
by
http://hari11888.blogspot.in
Awesome CSS & JS C ode For Page Flip Effect Is Nice
Thanks Syed ------/
Good post! thanks :-)
Hi Syed,
this is something awesome I have seen after a long time for blogger, right now I can't use it on my main blog but I'd surely add it on my entertainment blogs and thank you very much for such a wonderful widget I appreciate all your efforts on this.. and keep them coming :))
Fresh content ! Awesome.
@facebook tricks and tips and online games
ohh man nice foundation keep it up.....
its awesome...:)blogtariff
Hi, The Flipper pages are going beyond the border in chrome .Could you let me know where I am going wrong. http://notmypages.blogspot.co.uk/
Thanks Everyone for Liking and Appreciating our Effort, And we will continue to Introduce Stunning Widgets So Stay Tuned.
@Anantha Ramakrishnan
I Don't Think so its the Widgets Problem Because the Widget is Only Put Live after testing again and again on Different Templates. Try To Customize the Flipper CSS. Or Send Us your Template Again We will Do it for You. Peace and Blessings
That's very amazing, I liked it too much. I am too much impressed and this feature are very good. It works perfect for my tablet. Thanks man.
page turning software
How do I size it so its the perfect size for my blogger blogs sidebar? I want it to fit 150x150 images, not huge images
can the images be clickable?
width:800px;height:400px Change these According to your Need From the CSS Coding. I Hope it will fit your Sidebar
Yes Images are Clickable
Is it possible to modify it by any means to give the same effect with posts and next and previous button because i want to make a template with same effect.
waiting for your asistance syed bro.
Blogger it is possible but for that thing you need a high class developer because it is real touch to build a whole template that works like Flipper. Even this widget took alot hours to create. Peace
Hi I want to change the color of navigation buttons below the flipper to the extreme left. Please help me which coding should i change
really awesome
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.