การทำ PageFlip

PageFlip หรือการกลับหน้ากระดาษ เป็นลูกเล่นหนึ่งที่ช่วยเพิ่มสีสันให้กับบล็อกของเรา ถ้าจะให้เข้าใจง่าย ๆ ก็ดูจากตัวอย่างที่บล็อกนี้ได้ครับจะอยู่ตำแหน่งมุมบนขวามือ ถ้าเราเลื่อนเมาส์ไปที่รูปสามเหลี่ยมสีเทา หน้าบล็อกก็จะดูเหมือนเป็นการพลิกหน้ากระดาษและแสดงให้เห็นสิ่งที่ซ่อนอยู่ในหน้าถัดไป ซึ่งสิ่งที่ผมซ่อนเอาไว้ก็คือการการ Subscribe RSS นั่นเอง


ตอนนี้เรามาดูกันมา การสร้าง PageFlip ให้กับบล็อกของเรามีขั้นตอนอย่างไรบ้าง

ขั้นตอนที่ 1 ไปที่ แม่แบบ|แก้ไข HTML แล้วเลือกขยายแม่แบบ
ขั้นตอนที่ 2 ค้นหาโค๊ด "body {" แล้ววางโค๊ดต่อไปนี้ไว้ข้างบน

#pageflip {
position: absolute; /* relative */
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9dVbWfy1x9H9b_c0JWNGYVTBK31ZIgpOpU2Tqb7sGatl_PSk6XlDgu3MKX5NFMtlOZ27e6l0VnjJSAiRbxI4d-mdcKwYxBCgeVKkFSHI9zGUm9NIyWLsJsgD9Lvk9afN8_K_090mVnB1D/) no-repeat right top;
}

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9dVbWfy1x9H9b_c0JWNGYVTBK31ZIgpOpU2Tqb7sGatl_PSk6XlDgu3MKX5NFMtlOZ27e6l0VnjJSAiRbxI4d-mdcKwYxBCgeVKkFSHI9zGUm9NIyWLsJsgD9Lvk9afN8_K_090mVnB1D/ คือรูปภาพ Subscribe RSS ถ้าต้องการเปลี่ยนเป็นรูปอื่นก็ให้แก้ลิงค์ไปที่รูปที่ต้องการ

ขั้นตอนที่ 3 ค้นหาโค๊ด "</head>" แล้ววางโค๊ดข้างล่างนี้ไว้ข้างบน

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});


});
</script>
<!-- End JavaScript Peel Add -->

ขั้นตอนที่ 4 ค้นหาโค๊ด "</body>" แล้ววางโค๊ดข้างล่างนี้ไว้ข้างบน

<div id='pageflip'>
<a href='http://blogger-assistant.blogspot.com/feeds/posts/default' title='RSS Feed'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisj1en5Ozan0VJYvGt3HhgXkPEJmlwmD_5NASl5YLc_q1iSBLCBOPmc_cnQTLOKwEeMrcJqUrW1FV0w-zU23ADB8oFz6zjyhccvINvbZrfQVRPUwwqcA1KG3VfeLZJHySFf8gS2yX7rTgi/'/></a>
<div class='msg_block'/>
</div>

http://blogger-assistant.blogspot.com/feeds/posts/default ลิงค์ที่ต้องการไปเมื่อทำการคลิ๊ก ในที่นี่ผมให้ไปที่การ Subscribe RSS
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisj1en5Ozan0VJYvGt3HhgXkPEJmlwmD_5NASl5YLc_q1iSBLCBOPmc_cnQTLOKwEeMrcJqUrW1FV0w-zU23ADB8oFz6zjyhccvINvbZrfQVRPUwwqcA1KG3VfeLZJHySFf8gS2yX7rTgi/ คือรูปภาพสามเหลี่ยมสีเทา

ขั้นตอนที่ 5 ทำการบันทึกแม่แบบ

หมายเหตุ : ก่อนทำการ modify HTML ควรจะทำสำรองแม่แบบให้เรียบร้อยเสียก่อนเผื่อเกิดข้อผิดพลาดระหว่างการทำน๊ะครับ