Cara Membuat Efek Lipatan Kertas Di Blog

Mungkin sobat blogger sudah sering melihat efek lipatan kertas ketika sedang menjelajah website ataupun blogwalking, namun masih bingung tentang cara pemasangannya di blog... nah kebetulan jika ya berarti sobat telah mendarat dengan tepat karena pada postingan artikel ini akan membahas cara pemasangan efek lipatan kertas untuk digunakan di blog. Oke sob jika tertarik untuk mencoba memasang efek lipatan kertas ini monggo disimak tutorialnya...

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa kode tersebut agar sesuai dengan tema blog sobat.
  
  

  <script>
  var URLPagePeel ='http://monozcore.blogspot.com';
  var imgSmallPP = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6XSHkijBrOPtN11KpmYdp_HVY_AR8I90blF3lIHjqtM-hYE9AYbOM3aH5nLUGbw5OGc6dq-S4BMjVGLaiI5qQli7z8XRwg0PANFds0Er8ObijRdXO_4KhqBZ227_xxrqysoM1kcg9iM/s320/peel.png';
  var imgLargePP = 'https://2.bp.blogspot.com/-NQI_e1dlU4Y/W3PBmQA2GqI/AAAAAAAAIdM/NNdvrHdSiiwk0pRjezU9N78jnJUHuVXIACLcBGAs/s1600/subscribe.png';
  </script>
  <style>
  #curl { display: none }
  @media only screen and (min-width: 1200px){
  #curl{ display: block !important; position: absolute; top: 0; right: 0; box-shadow : 0 0 10px rgba(0, 0, 0, .5); transition: all .5s ease; overflow: hidden; z-index: 999; }
  #curl:hover{ width: 307px; height: 307px; }
  #curl img{ width: 100% }
  .curlclosed{ width: 1px; height: 1px; }
  .curlopen{ width: 75px; height: 75px; }
  }
  </style>
  <script type="text/javascript">
  var pagepeelHtml='<div id="curl" class="curlclosed" style="background: url('+imgLargePP+') no-repeat top right fixed #FFFFFF"><a href="'+URLPagePeel+'" target="_blank"><img src="'+imgSmallPP+'" alt="" /></a></div>';
  $('body').append(pagepeelHtml);
  $('document').ready(function(){ document.getElementById('curl').className="curlopen"; });
  </script>
  

  
  KETERANGAN :
  • Kode var URLPagePeel ='http://monozcore.blogspot.com'; merupakan URL link yang akan dituju.
  • Kode var imgSmallPP = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk0O9OdnropTek2OuV2Q1s7IIBDqx9VzLKWk4s7PS3t1Btzp3Wj0UF_rlyaSJITJNKd5jiV7J53S5KtSo9xeHHjo6KFqm7ciWJr3JKsxDIIitAnUQ-T56c9D0ejCmp14hD7uNS7VEd3I4/'; merupakan URL gambar latar ukuran kecil (80x80 px).
  • Kode var imgLargePP = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFFqKFkv_jpabzUNH7rmnxyWy0BS8xywDJE2QdvjFmrZL-mVV8WGw0OLzn9ts8UYWwIcDbpuvNmYWZOA3X4_uORoqepmclwpJ2zMda4hgZS2ZWReB86vJLhL1m5GE5ghg8tYMQwHzAFPc/'; merupakan URL gambar latar ukuran besar (502x480 px).


• Klik "Save" dan lihat hasilnya...

Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.