lihat juga

Thursday, June 21, 2012

Cara membuat Page Flip | Effec lipatan kertas di pojok halaman blog

M

umpung kerjaan ngak lagi padet dan acara tv masih juga di penuhi sinetron dengan adegan adegan Cengeng yang alur ceritanya sangat membosan kan, lebih baik aku akan share tentang cara membuat effec lipatan di pojok halaman blog (biasanya ada di sebelah pojok kanan atas) yang di kenal dengan nama Effec Page Flip akan bekerja jika cursor kita arah kan tepat di atas nya ,banyak fungsi yang kita dapat apabila kita menempat kan Effec Page Flip pada blog selain penempatan Page Flip ini untuk subscribe postingan blog juga membuat blog nampak keren(hanya menurut penulis) kita juga bisa pasang Iklan dan lain lain sebagai contoh coba lihat demonya di sini
Nah untuk Cara pembuatanya ikuti tutorialnya seperti di bawah ini
  • Login ke Bloggger.com
  • Masuk ke dasboard
  • Edit HTML jangan lupa download lengkap dulu template takut jika terjadi kesalahan
  • Cari kode <b:skin><![CDATA[  dan pastekan kode di bawah ini tepat di atas kode <b:skin><![CDATA[  berikut kodenya :
  • <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $(&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>
  • Kemudian cari kode ]]></b:skin> lalu masukkan kode di bawah ini tepat di ats kode ]]></b:skin> berikut kode nya
  • #pageflip { position: relative; right: 0; top: 0; float: right; } #pageflip img { width: 100px; height:100px; 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(http://kangmahfid.googlecode.com/files/provil.png) no-repeat right top; }
  • Kemudian Cari kode <body> dan Patekan kode di bawah ini tepat di atas kode <body> berikut kodenya :
  • <div id='pageflip'> <a href='url tujuan'> <img alt='' src='https://lh3.googleusercontent.com/-Nf59CtGIBq4/TXc4EUWGIdI/AAAAAAAABb8/qE8ORM991Ik/s1600/pageflip.png'/> <span class='msg_block'/> </a></div>
  • Lalu save template
MOHON DIPERHATIKAN : Untuk teks yang berwarna hijau adalah alamat gambar yang bisa kamu ganti dengan gambar lain 
dan untuk gambar yang berwarna kuning ganti dengan alamat link yang akan di tuju sobat jika gambar di klik.
 demikian tutorial Cara membuat Page Flip | Effec lipatan kertas di pojok halaman blog semoga bermanfaat dan saran dan kritikan sobat sangat diharap ..di kotak komentar

ads

Ditulis Oleh : gdfysx Hari: 8:22 AM Kategori:

0 comments:

Post a Comment

surf