Membuat Kotak Iklan Dengan Efek Mantul

Banyak cara menuju roma... banyak cara pula menampilkan adsense atau iklan dari sponsor blog sobat dengan cara yang unik dan menarik, salah satunya yaitu dengan cara membuat efek pantul pada saat blog ditampilkan. Cara ini bisa membantu meningkatkan jumlah klik adsense sehingga otomatis penghasilan blog dari adsense juga bertambah.

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 parameter kode tersebut agar sesuai dengan tema blog sobat.

  <script>
  if(typeof(jQuery) == 'undefined'){
  document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");
  }
  </script>
  
  <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
  
  <style>
  #kotak-pesan{
  position:fixed !important;
  position:absolute;
  top:-900px;
  left:50%;
  margin:0px 0px 0px -182px;
  width:250px;
  height:250px;
  padding:10px;
  background:#FFB200;
  border:2px solid #fff;
  border-radius:8px;
  font:normal 1em Cambria,Georgia,Serif;
  color:#111;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  }
  #kotak-pesan a.close{
  position:absolute;
  top:-10px;
  right:-10px;
  background:#FFB200;
  font:bold 16px Arial,Sans-Serif;
  text-decoration:none;
  line-height:22px;
  width:22px;
  text-align:center;
  color:#fff;
  border:2px solid #fff;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:22px;
  -moz-border-radius:22px;
  border-radius:22px;
  cursor:pointer;
  }
  </style>
  
  <div id='kotak-pesan'>
  DISINI KONTEN ADA,
  Bisa Iklan,Dan Lain Lain Sesuai yang sobat inginkan
  <a class='close' href='#'>X</a>
  </div>
  
  <script>
  // animasikan nilai top saat halaman telah selesai dimuat
  $('#kotak-pesan').animate({top:"190px"}, 1000, "easeOutBounce");
  // hilangkan kotak pesan saat tombol (x) diklik
  $('a.close').click(function() {$(this).parent().slideUp(800, "easeOutBounce");return false;});
  </script>

  
  KETERANGAN :
  • Kode yang berwarna merah merupakan kode script jquery jika sobat sudah menggunakan kode script jquery kode ini jangan pasang lagi.
  • Kode yang berwarna biru merupakan settingan ukuran lebar, tinggi dan warna background. Silakan sesuaikan dengan keinginan sobat.
  • Teks yang berwarna ungu merupakan tempat untuk menaruh kode script iklan.


• 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 :.

X