Membuat Bagian Pojok Kanan Atas Halaman Blog Terlipat

Assalamualaikum..

Membuat Bagian Pojok Kanan Atas Halaman Blog Terlipat - Mempercantik blog memang wajib dilakukan. Okay sobat di pagi yang cerah ini Telusur Tutorial akan berbagi tips dan trick Blog yaitu empercantik blog dengan membuat halaman blog agan agar terlipat jika tersentuh kursor mouse. Membuat halaman blog terlipat merupakan sesuatu yang sangat menarik dan keren. Saya yakin sobat udah pada pernah lihat dan taU. Itu lhow saat kita sentuh kursor mouse di bagian pojok kanan atas halaman, maka halaman tersebut akan terlipat atau terbuka. Sobat bisa menaruh gambar (disesuaikan) yang biasanya kalau di klik akan di arahkan ke suatu halaman lain seperti halaman RSS blog ataupun bisa berupa halaman lainnya. Saya sarankan untuk menaruh gambar dan link RSS Feed saja, karena akan sangat sulit untuk menaruh gadget di dalam bagian yang terlipat tersebut.

Berikut Langkah Membuatnya :

1. Login ke blogger

2. Tata Letak

3. Edit HTML

4. Back up template untuk mengurangi resiko jika sesuatu yang tidak kita inginkan terjadi.

4. Cari kode <b:skin><![CDATA[ Letakkan kode di bawah ini di atas kode <b:skin><![CDATA[

<script src='http://mahasena.googlecode.com/files/script_ditunjuk_ngelipet_.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>

5. Cari kode ]]></b:skin> biar lebih mudah mencarinya tekan aja tombol CTRL+F. Letakkan CSS di bawah ini di atas kode ]]></b:skin>

#pageflip {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/AVvXsEjy1h4-jM1qzLJo4NVGLwnHepXKI3w3duVinCB2kE4yZcVcA3mei-JvHoYORmCPvfRXKECPdvVsEDIjpMa0Jaxx-JyCYQ7RSOKslcyjMGRbHYUCg1ACXl4x9dzHQZ580A-vCyFhPUH_T9Nk/) no- repeat right top;text-indent: -9999px;}

6. Cari kode <body> Letakkan kode dibawah ini tepat dibawahnya

<div id='pageflip'><a href='http://feedburner.google.com/fb/a/ mailverify?uri=walfchild ' target='_blank'> <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Bwg4WpL8BmBm4oaHCzk38aNrUUs4KTYABQWC1KUbLqal_ZrcIxhWy1k6EL5BBf8XD52thAdjMJtbMf_pHz2yhpAvQmGFQRAXg7Q-UnJlekDpWrx4FCz9UgkgWTV-8AneIp5padeX3k0M/'/><span class='msg_block'/></a></div>

* Keterangan : Ganti tulisan yang berwarna biru dengan URL feed anda.

7. Save template anda dan lihat hasilnya.

Selamat Mencoba ^_^

Wassalamualaikum..