Add a css3 style flip over book to your site or blogger.

Your Ad Here

Make your template look some what,beautiful by adding book with flip you can see as demo below

Demo

at
Bloggerchoices

add your text here

add your text here

First step:-
First go to blogger>>Log in>> Design or Template>>Customize or template designer>>Add css
Now paste below code in Add css box and press Enter

<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; -moz-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; -moz-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; -moz-transform-origin: 300px -900px; -ms-transform-origin: 300px -900px; -o-transform-origin: 300px -900px; transform-origin: 300px -900px; -webkit-transform: rotate(-17deg); -moz-transform: rotate(-17deg); -ms-transform: rotate(-17deg); -o-transform: rotate(-17deg); transform: rotate(-17deg); -webkit-transition: 0.75s ease-in-out; -moz-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); -moz-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); -moz-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; -moz-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 { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(0deg); -moz-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>

Second step:-
Go to blogger>> login>> Layout or page elements>>Add a gadget>>Html scripit
Add below code in html script Box

<div class="pad"> <div> <div><h1>Demo</h1><p>by<br />Blogger choices</p></div> <div><div> <p>add text here</p> </div></div> <div><div><p>add text here</p></div></div> </div> </div>