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

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

Unknown

: 22.22 11 comments

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq9UNCey_H1QQfVYGy6M3JoudBytQP5nKMfrhIYm39F88URnDwV8qh5cQ_2eznZBv0Jh4CldNApKSh7J871MWSdh9LJxktHCgO7poA3u8smSgfyqPVdWcifMCIhoQTaqxHADlJ6NhQQI4/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
Judul Artikel :Cara membuat Page Flip | Effec lipatan kertas di pojok halaman blog
photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang Cara membuat Page Flip | Effec lipatan kertas di pojok halaman blog Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih
Label:

11 komentar

avatar
Balas
Nurfani delete 22 Juni 2012 pukul 06.29

Kalau hanya pasang gambar doang gak papa khan bos?

avatar
Balas
Unknown delete 22 Juni 2012 pukul 09.13

@Nurfaniyo'iii bos :D

avatar
Balas
Nurfani delete 22 Juni 2012 pukul 14.23

@mahfid mayanto Wah mantep nih bos. Jadi pengen pasang, tapi menurut anda bagaimana dengan load nya?

avatar
Balas
Unknown delete 22 Juni 2012 pukul 16.49

@Nurfani Saya kira ngak lah sob kan fungsinya hampir sama dengan pemasangan gambar pojok halaman blog..

avatar
Balas
Anonim delete 22 Juni 2012 pukul 22.27

Ini pakai jQuery ya?
bagus juga nih ,,, saya coba deh diblog satunya,,,

wilujeng ngeblog

avatar
Balas
Unknown delete 22 Juni 2012 pukul 22.37

@sakahayang.com silah kan shobat....good luck

avatar
Balas
Nurfani delete 24 Juni 2012 pukul 11.31

@mahfid mayanto Oke deh bos, makasih ya atas info nya :)

avatar
Balas
zulham delete 26 Juni 2012 pukul 05.03

sob,..aku coba pasang di blog aku,tapi ketika aku mau save kok pesannya tidak bisa di parse,..padahal scriptnya sudah sama sob,..gimana nih,..

avatar
Balas
Unknown delete 26 Juni 2012 pukul 08.20

@zulham Ternyata setelah aku teliti kesalahan ada pada kami dan sudah di perbaiki silahkan di coba lagi terima kasih atas infonya....

avatar
Balas
Misbah delete 27 Juni 2012 pukul 07.14

menurut saya lebih simle pake java script,tapi loading blog akan jadi lola,..hehehe...nice share :)

avatar
Balas
Unknown delete 27 Juni 2012 pukul 10.44

@Misbahudinhallo mas broer makasih masukan nya ...and coment nya ...

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>

Konversi