Tạo mở trang sách cho blog

Để tạo một widget giống như cuốn sách đẹp! Với hiệu ứng mở trang , bạn có thể dễ dàng di chuyển từ trang này sang trang khác.  
(Được lấy từ một trang tiếng Anh)

Nếu bạn đang sử dụng bất kỳ máy tính bảng như iPad, sau đó bạn có thể dễ dàng sử dụng các con số của bạn để chuyển các trang của nó, trong khi nếu bạn đang trên một máy tính để bàn sau đó bạn có thể flick trang với sự trợ giúp của con chuột của bạn. S

Flipper: Trang Flip Hình ảnh Tiêu đề Widget (LIVE DEMO)

Nó có giao diện linh hoạt, cử chỉ cảm ứng và siêu nhẹ, sử dụng hình ảnh , văn bản trong widget này Flipper.

Vào Blogger.com> Template >> Blog của bạn
Tải Sao lưu mẫu của bạn trong trường hợp bất cứ điều gì đã đi sai.
Sau đó chọn Edit HTML >> tiến hành
Tìm thẻ ]]> </ b: skin> và dán trên nó dán mã CSS sau :

Flipper-wrap {-moz-box-sizing: biên giới-box;-webkit-box-sizing: biên giới-box, hộp kích thước: biên giới-box}

Flipper-wrap {position: tương đối; width: 800px; height: 400px; margin: 20px 0 40px 0}

Flipper-wrap {-moz người sử dụng chọn: none;-webkit-user-chọn: không, người sử dụng chọn: none;-ms-người sử dụng lựa chọn: none}

Flipper-page {position: absolute; left: 0; top: 0; width: 200%; height: 100%; background: white; biên giới: 1px solid # e1e1e1}

. Flipper trang bên trái {overflow: hidden; vị trí: tuyệt đối; left: 0; top: 0; width: 50%, chiều cao: 100%}

Flipper trang bên trái

. Flipper-page {còn lại: 0}

. Flipper trang bên phải

Flipper-page {quyền: 0; bên trái: auto}.

Flipper trang bên phải {overflow: hidden; vị trí: tuyệt đối; quyền: 0; top: 0; width: 50%, chiều cao: 100%}.

Flipper-page-wrap {position: absolute; left: 0; top: 0; width: 100%; height: 100%}

Flipper-overlay {display: none; width: 100%; height: 100%; vị trí: tuyệt đối; left: 0; top: 0; z-index: 9999}.

. Flipper trang bên phải

. Flipper-overlay {background:-moz-linear gradient (trái, RGBA (0,0,0,0.085) 0, RGBA (0,0,0,0.04) 100%); nền:-webkit-gradient (tuyến tính , bên trái, bên phải 0, RGBA (0,0,0,0.04) 100%), background:-o-linear gradient (trái, RGBA (0,0,0,0.085) 0, RGBA (0,0,0,0.04) 100 %); background:-ms-linear gradient (trái, RGBA (0,0,0,0.085) 0, RGBA (0,0,0,0.04) 100%); background: tuyến tính gradient (trái, RGBA ( 0,0,0,0.085) 0, RGBA (0,0,0,0.04) 100%);
bộ lọc: ProgID: DXImageTransform.Microsoft.gradient (startColorstr = '# 40.000.000', endColorstr = '# 14.000.000, GradientType = 1)}

Flipper trang bên trái flipper overlay {background:-moz-linear gradient (trái, RGBA (0,0,0,0.04) 0, RGBA (0,0,0,0.085) 100%); nền: -webkit-gradient (tuyến tính, bên trái, bên phải 0, RGBA (0,0,0,0.085) 100%), background:-o-linear gradient (trái, RGBA (0,0,0,0.04) 0, RGBA (0,0,0,0.085) 100 %); background:-ms-linear gradient (trái, RGBA (0,0,0,0.04) 0, RGBA (0,0,0,0.085) 100%); background: tuyến tính gradient (trái, RGBA ( 0,0,0,0.04) 0, RGBA (0,0,0,0.085) 100%);
bộ lọc: ProgID: DXImageTransform.Microsoft.gradient (startColorstr = '# 14.000.000', endColorstr = '# 40.000.000, GradientType = 1)}

Flipper trang bên phải {-webkit-backface-khả năng hiển thị: ẩn;-webkit-transform nguồn gốc: 0 50%;-moz-backface-khả năng hiển thị: hidden;-moz-transform nguồn gốc: 0 50%;-ms- backface-khả năng hiển thị: hidden;-ms-biến đổi nguồn gốc: 0 50%;-o-backface-khả năng hiển thị: ẩn;
-O-biến đổi nguồn gốc: 0 50%; backface-khả năng hiển thị: ẩn; biến đổi nguồn gốc: 0 50%}

Bên trái. Flipper-page {-webkit-backface-khả năng hiển thị: ẩn;-webkit-transform-xuất xứ: 100% 50%;-moz-backface khả năng hiển thị: ẩn;-moz-transform nguồn gốc: 100% 50%; ms-backface-khả năng hiển thị: hidden;-ms-biến đổi xuất xứ: 100% 50%;-o-backface-khả năng hiển thị: ẩn;
-O-transform-xuất xứ: 100% 50%; backface-khả năng hiển thị: ẩn; biến đổi xuất xứ: 100% 50%}

Flipper trang img {max-width: 100%}.

Đầy đủ. Flipper cột {display: block; width: 100%, chiều cao: 100%}

. Flipper cột nửa {float: left; display: block; width: 50%; height: 100%; margin: 0; padding: 0}

Bên ngoài. Flipper cột {float: left; padding: 30px; width: 50%; height: 100%}

. Flipper cột-single-bên ngoài {padding: 30px; width: 100%; height: 100%}

. Flipper cột {overflow: hidden; height: 100%; width: 100%}

. Flipper hình ảnh bên trong {display: block; overflow: hidden}

. Flipper nội image.start {margin-bottom: 20px}

. Flipper nội image.end {margin-top: 20px}

Flipper-trong-hình ảnh 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-pager-wrap {position: tuyệt đối; left: 0; dưới: 24px}

Flipper-pager {float: left; width: 17px; height: 18px; margin: 5px 5px 0 0; con trỏ: con trỏ}

Flipper-tạm thời {border: 1px solid # e1e1e1; top:-1px}.

Helvetica, Tahoma, sans-serif; color: # 333; display: none}

. Bản 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 {
vị trí: tuyệt đối;
left: 30px;
top: 30px;
width: 40%;
}
p.right {
vị trí: tuyệt đối;
width: 40%;
bottom: 30px;
phải: 30px;
}
# Myflipper. Description.no-margin {
margin-top: 40px;
}
Flipper trang. Fullsize {
/ * Margin: 31px 0 0-31px; * /
}
. Mag {
-Moz-column-count: 2;
-Moz-column-gap: 20px;
-Webkit-column-count: 2;
-Webkit-column-gap: 20px;
cột-count: 2;
cột khoảng cách: 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;
con trỏ: con trỏ;
text-align: center;
font-family: Helvetica;
màu sắc: trắng;
text-shadow: 0 1px 1px RGBA (0,0,0,0.4);
}

5. Tìm kiếm thẻ </ head> một lần bạn tìm thấy nó sau đó chỉ ở trên nó dán mã sau :

<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>

(Chức năng ($, undefined) {

 $ (Document) đã sẵn sàng (function () {

 $ ('# Myflipper') flipper ({

 'Width': 700,

'Chiều cao: 400,

 "Mũi tên": 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. Go >> Layout >> Gadget Thêm HTML / JavaScript >> và sau đó dán đoạn mã sau:

<- MBL Trang 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/AVvXsEizYiRS_rySn7swIRB2GzBlQCWCtHp6pqgsZxh4V4WbFEdFzX-Bbg0SArdBN-9wr52wNuFtYW6OqN2eZrhp60qaCKTKNhZ1APkGmzUp5XY8WUFhlna2HViNq53_lbJj0G0x6UNGiLVOKOU/s1600/1.png" class="fullsize" /> </ div> </ div>


 <div class="flipper-page no-padding">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_Loo2aqbc5a3EovUMoFcvWUzPScM6cQ_dsag1xAVYsS7STznztbvAp3ADjcRTQLcTElSK0MNtJD_hq3ZGFbGwrySY_b94HeW7vpZiSeOIvpl9KBqxhZrx74lMUVvzEh2N_4on-8vHRc/s1600/2.png" class="fullsize" /> </ div>

 <div class="flipper-page no-padding">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3H3VD65gidqKQAHWHpJQIx2B_wRiHu_-R9JHrW7aSlrt3Ma9jMJRcuixvYxYhaTfKKc4cnjqaRcc6l0dpNC498QmhKh7o3wKhlOvLUcPhWJelvlyrMRLuSFdxtnl7vdcCJoXt793E4Sc/s1600/3.png" class="fullsize" /> </ div>

 <div class="flipper-page"> <div class="flipper-page-padding-wrap">
 <h2> Làm thế nào về một số văn bản </ h2>
 <p class="mag">
 Lorem ipsum dolor sit amet, consectetur adipisicing Elit, sed làm eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim quảng cáo giọt veniam, Quis nostrud exercitation ullamco laboris tạm thời ut aliquip cũ ea commodo consequat.Duis aute irure dolor <br /> <br />

 Sed ut perspiciatis unde omnis iste Natus lỗi ngồi voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae Sơ yếu lý dicta sunt explicabo </ p>
 <p class="headline" style="margin-top: 40px;"> cảm thấy giống như một tạp chí </ p>
</ Div> </ div>

 <div class="flipper-page">
 <p class="headline first"> flicking qua ảnh cảm thấy giống như trong một album.<br /> Cảm ơn bạn đã kiểm tra ra Flipper </ p>
 </ Div>

 <div class="flipper-page">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQcwx6SImneG9WaobrglQ0VbIR183UCNmujR_K7gdUakimee3QnM0INhVV2BQR98NIbTJhmW52BuC7A7F901fffRcdGIDxjQe9nnCQvGWB8vB9cSFxKsjq9g8eNafM3W7Ds5OQVycWQ0/s1600/flipper.png" />
 </ Div>

 </ Div> </ div>

Chú ý: Bạn có thể dán mã HTML Trên bất cứ nơi nào bạn thích ví dụ trong bài viết, các bài viết ở trên, bài viết dưới đây và vv.

7. Bây giờ bạn sẽ giữ cho hộp tiêu đề trống rỗng và sau đó Save widget của bạn bằng cách nhấn Save Now.
Làm thế nào để Customize Flipper:
Nếu bạn muốn thêm các trang văn bản thêm về Flipper của bạn, chỉ cần thêm mã sau vào cuối của mã HTML của bạn (ở bước 6):

<div class="flipper-page"> <div class="flipper-page-padding-wrap">
<h2> Làm thế nào về một số văn bản </ h2>
<p class="mag">
Lorem ipsum dolor sit amet, consectetur adipisicing Elit, sed làm eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim quảng cáo giọt veniam, Quis nostrud exercitation ullamco laboris tạm thời ut aliquip cũ ea commodo consequat.Duis aute irure dolor <br /> <br />
Sed ut perspiciatis unde omnis iste Natus lỗi ngồi voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae Sơ yếu lý dicta sunt explicabo </ p>
<p class="headline" style="margin-top: 40px;"> cảm thấy giống như một tạp chí </ p> </ div> </ div>

Nếu bạn muốn thêm hình ảnh nhiều hơn để Flipper của bạn, sau đó dán đoạn mã sau vào cuối của mã HTML của bạn (ở bước 6) :

<div class="flipper-page">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQcwx6SImneG9WaobrglQ0VbIR183UCNmujR_K7gdUakimee3QnM0INhVV2BQR98NIbTJhmW52BuC7A7F901fffRcdGIDxjQe9nnCQvGWB8vB9cSFxKsjq9g8eNafM3W7Ds5OQVycWQ0/s1600/flipper.png" />
</ Div>

Chúc các bạn thành công!

THỦ THUẬT 05:04