Cara membuat efek gulungan disudut blog -- Atau dengan kata lain membuat efek seolah-olah menggulung atau terlipat pada sudut blog.
Cara ini mudah saja sebenarnya, seperti biasa hanya bermain script dengan perintah tertentu sehingga terciptalah efek gulungan disudut blog sesuai dengan yang kita inginkan.
Cara ini mudah saja sebenarnya, seperti biasa hanya bermain script dengan perintah tertentu sehingga terciptalah efek gulungan disudut blog sesuai dengan yang kita inginkan.
Berikut adalah Cara membuat efek gulungan disudut blog :
Cara ini berlaku untuk pengguna blogspot. Pertama sobat login ke blog sobat --> Edit HTML --> beri centang expand widget template. Lalu sobat cari kod <b:skin><![CDATA[ kemudian sobat copy kod dibawah dan letakkan diatasnya.
<script src='http://trikblogger.googlecode.com/files/script_lipat_halaman_trikblogger.js
' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
Jika sudah, cari lagi kod ]]></b:skin> untuk membuat syle CSSnya, copy kod dibawah letakkan diatas ]]></b:skin>
#pageflip {KETERANGAN :
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk7RZu140TxG7wo8Ibaj41cT1QJD0pphqhl377DAIImQWRgPQdzVF_i-iqwfehx2_uNbPtQwC1aeVsJyZNh3gnlb0vHZc1MhTfyJxJIQw0UDesrSL-bdVpBZJlwzF4VDBjxnhJCo4Eo6id/) no-repeat right top;
text-indent: -9999px;
}
- Warna merah adalah URL gambar backgroundnya, sobat bisa menggantikan dengan background lain sesuka hati sobat. Dibawah saya sudah menyiapkan beberapa background alternatif untuk sobat silahkan dipilih :
 |
| URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk7RZu140TxG7wo8Ibaj41cT1QJD0pphqhl377DAIImQWRgPQdzVF_i-iqwfehx2_uNbPtQwC1aeVsJyZNh3gnlb0vHZc1MhTfyJxJIQw0UDesrSL-bdVpBZJlwzF4VDBjxnhJCo4Eo6id/ |
 |
| URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji8ApaAH6VAEWyWMqG0VbEWxCW4e1mBWJZpjbHsYwUuIIaE1sKHJVumH8qJQjlWLw3QA3YV5QWPntrjM9MC4Q9dvdkAE5z2zDBQmTta0tMJTTdbms5blXZ22jIO5ENpS3EpxhE_EhYW5k/s1600/efek-gulung1.gif |
 |
| URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSDymmdFSoirP1AVZzZo23d1HbcGOGfFxd1fVaIiLhqoYE9yOt_bxYfDYbHhB3Gw2Y2T8BaNOOQgHcyRa4bpKBAkWV19tcaU-S7GN-Vf-gx3gFOo2HJH0IBMY_HmOIU7af5ZtjdqZAkc/s1600/efek-gulung2.gif |
Terakhir cari kod <body> dan copy lagi kod dibawah letakkan dibawahnya.
<div id='pageflip'>
<a href='http://trik-komputer-online.blogspot.com/2012/04/efek-gulungan-di-pojok-kanan-atas.html' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj191I-3I7RT8S7UZvMYIFG8k_oKPBjiXfLuvU7hwn_OgBkF40b4Kpit7zVW3EcNpyUEeI0Ui-M1cZLXyMamUfvJfM1ygTOODecRZfwlqFWnOlPgDyvbFLHXhglQK6Li-snPoLuGRTnVHy6/'/>
<span class='msg_block'/>
</a>
</div>
Kemudian Preview / pratinjau dulu sebelum di SAVE kalau sudah ok, SAVE..
Selamat mencoba..
Aturan dan Kebijakan di Trik Komputer
- Semua Konten di Trik Komputer bertujuan sebagai media pendidikan dan pembelajaran, oleh karena itu dimohon tidak menyalahgunakan informasi dan pengetahuan yang diperoleh untuk hal - hal yang merugikan diri sendiri maupun orang lain
- Kami melakukan segala upaya untuk memastikan bahwa informasi di Trik Komputer tersaji seakurat dan sebaik mungkin.
4 komentar:
punya q ga ada code < body > trus gi mana nihh????
thanks infonya.,,
(y)
Salam kenal sobat,..
Mohon ijin ngupi ya?. Mau diutak-atik trus dipasang deh, "Efect Gulungan dipojok kanan atas" ini.
Terima kasih sudah berbagi "Efect Gulungan dipojok kanan atas" ini sobat.
Marlon Alamo.
mantep sobat
Posting Komentar