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/AVvXsEga66wq7RvGMHI6S-lpVrGGrJnvSIRQte4XwXHFYqnEcFp6q5A0fuu8OKMjiP2RV5__jR-0r5uXXHWeqhbUk8Klp7enlnWGlfhOkrQAkFvkE6SSHvHIj1Y6nW4UX3VFFnTk1oEYq7KjB-w/s1600/1.png" class="fullsize" /></div></div>
<div class="flipper-page no-padding">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgstx5HQ1bY6O_hcUaV78a6ITZeJo_dhnU7pRJnlrBF6-hnZp_iCwAnhYumyBZEbMtbU8bejEbSj7oDpxhqqkdlokStCCAgiwb37IGt7uwL7TR3r7KI3Yg6-BGenQffiVtvx4k-VXCWjZQ/s1600/2.png" class="fullsize" /></div>
<div class="flipper-page no-padding">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXkBHSsJDU53sEb2IhXhnkIiDh4-vEUdt_gqGazt-H_XZ6o0lRt4SC0GzY7hThDeYvCVFSQZqLRtpwAOeir4FxwzJVME4lHUeDtokDcMQ6BJ7sT0rex5LjsXoeeKdOFGNqvipQCW_qUVk/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/AVvXsEgCzg3uo4zkyhAaEwGBYjzGv_NTiPqJSJlouMQ_pI7U2hjeR9NjI6SbO7Qro9BZBf7pJufcGIo5qMhUWAq5k029zX6kJ4O5EX-nI86RnBBnY5Mmw-PWE2-W2bZ-pdpHUdxs7xFEcbmR0CM/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/AVvXsEgCzg3uo4zkyhAaEwGBYjzGv_NTiPqJSJlouMQ_pI7U2hjeR9NjI6SbO7Qro9BZBf7pJufcGIo5qMhUWAq5k029zX6kJ4O5EX-nI86RnBBnY5Mmw-PWE2-W2bZ-pdpHUdxs7xFEcbmR0CM/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.
Hey I don't have words to describe this post. I simply want to say that absolutely informative post. It inspires me a lot.Visit: page flip
ReplyDelete