http://www.mybloggerlab.com/2012/07/flipper-jquery-plugin-page-flip-image.html

플리퍼라는 위젯입니다.

http://downloadinggiant.blogspot.kr/ 이런 홈페이지를 보면 홈에도 적용되는 것이 확실 한데 ㅜㅜㅜ 어렵네요 

배포홈에서는 아래와 같이 설명 하고 있는데 ㅜㅜㅋㅋ

1. Go to Blogger.com > Your Blog >> Template
2. Download Backup of your template incase anything went wrong.
3. Then select Edit HTML >> Proceed
4. 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);
}