Membuat floating widget

Sebelumnya saya pernah menulis tentang cara membuat ini (membuat menu floating) tapi dengan tips hanya menggunkan modifikasi CSS saja, nah berikut ini sedikit modifikasi dengan menggunakan kode javascript dan tampilan pun akan lebih dinamis, di dalamnya sobat dapat tempatkan apapun juga mis : Iklan adsense, Gambar, ataupun chat box. untuk preview coba sobat klik widget bertuliskan sponsor sebelah kanan.

cara memasang widget

Buka Layout Page Element dan Klik add gadget, kemudian pilih HTML/javaScript

view plainprint?

Tempatkan Semua Kode CSS, JavaScript dan HTML berikut :    

<style type="text/css">  

  .gb_fixed{ 
      position:fixed; 
      top:80px; 
      right:0px; 
      z-index:+10; 
  } 
 
  * html .gb_fixed {position:relative;} 
  #hidden_gb2 { 
      display:none; 
      border:2px solid gray; 
      background:#111; 
      padding:10px; 
      padding-top:0px; 
  } 
</style> 
<div class="gb_fixed"> 
  <table id="hidden_gb2" cellpadding="0" cellspacing="0"> 
    <tr><td> 
      <div> <a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://www.bookonthenet.net/east/RKEres/Images/CloseButtonHot.bmp" /></a> </div> 
 
   tempatkan apa saja disini  
 
<p>       
<span style="font-size: 80%;">   
 <a href="http://www.ordinaryblog.info">Ordinary</a></span></p> 
  </td></tr></table> 
</div> 
 
<script src="http://marewainfo.googlecode.com/files/ordinaryhack-floating.js"></script> 
<div style="z-index:+5" class="gb_fixed"> 
<a href="javascript:void(0)" onclick="gb_showHideGB()"> 
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIFgWqkoOHgdVfgLMo0KJwUdJZYGUTsFE927nZHhkAEH5nl1RKTVVikDYGQ7iFBa3Z9MnGoMK5lt8lebblNwAk_iJc4D4EQiLBE2cb9hdK4sqAcmMbP7qwozAruhFm5uQ6-xigPM5idh8/sponsored.png" style="filter: alpha(opacity=60);    
opacity: 0.6;" 
 /> 
</a> 
</div>  

SAVE TEMPLATE Dan lihat hasilnya.

Penulis : ALSYA ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Membuat floating widget ini dipublish oleh ALSYA pada hari . Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Membuat floating widget