Ada banyak cara untuk melakukan hal ini, banyak dari mereka menggunakan file flash yang membuatnya kurang disesuaikan, namun, salah satu yang akan kita lihat dalam posting ini dibuat dengan jQuery.
Teratur konten yang "balik" itu adalah gambar untuk berlangganan feed tetapi Anda dapat menempatkan setiap gambar dan link ke halaman apapun.
Anda dapat melihat contoh dalam demo blog.
Untuk menambahkan halaman ini efek lengkungan pada blog Anda:
. 1 Pergi ke Template> Edit HTML dan sebelum </ head> menyisipkan script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>. 2 Kemudian sebelum]]> </ b: skin> tempel gaya ini:
<script>
/ / <! [CDATA [
$ (Document). Ready (function () {
$ ("# Pageflip"). Melayang-layang (function () {
$ ("# Pageflip img,. Msg_block"). Stop ()
. Bernyawa ({
width: '307px ',
height: '319px '
}, 500);
}, Function () {
$ ("# Pageflip img"). Stop ()
. Bernyawa ({
width: '50px ',
height: '52px '
}, 220);
$ (". Msg_block"). Stop ()
. Bernyawa ({
width: '50px ',
height: '50px '
}, 200);
});
});
/ /]]>
</ Script>
/ * Halaman flip. 3 Akhirnya, setelah tempel <body> atau:
----------------------------------------------- * /
# Pageflip {
position: relative;
kanan: 0;
top: 0px; / * Perubahan untuk 30px jika Anda memiliki navbar (navigasi bar) * /
float: right;
z-index: 9;
}
# Pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
kanan: 0;
top: 0;
-Ms-interpolasi-mode: bicubic;
}
# Pageflip. Msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
kanan: 0;
top: 0;
background: url (http://oi44.tinypic.com/2hheno6.jpg) no-ulangi kanan atas;
}
# PageflipMirror {
Posisi: statis;
kanan: 0;
top: 0;
float: right;
}
<body expr:class='"loading" + data:blog.mobileClass'>Kode berikut:
<div id='pageflip'>Dalam biru Anda akan melihat URL - ini adalah URL dari gambar yang, dalam hal ini, adalah ajakan untuk berlangganan feed. Anda dapat mengubahnya nanti yang lain (harus dari ukuran yang sama) jika Anda ingin.
<a href='http:// name-of_your_blog .blogspot.com/atom.xml'>
<img src='http://oi40.tinypic.com/10fqnav.jpg' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/> </ a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden;'/>
</ Div>
Dalam merah Anda dapat melihat di mana nama blog Anda harus ditambahkan, yang akan menjadi link ke feed blog Anda ketika pengguna memberikan klik pada gambar di belakang, tetapi Anda dapat menempatkan setiap URL jika anda ingin link ke halaman lain.
Dan itu saja. Simpan template itu.
Ingat bahwa menggunakan jQuery, sehingga Anda hanya harus memiliki satu versi itu, dan jika Anda menggunakan Scriptaculous atau Mootools, Anda harus menerapkan beberapa perubahan.
Tidak ada komentar:
Posting Komentar