Julai 09, 2011

Tutorial : Membuat iklan terapung dan statik di blog dengan butang Closed

Hai pembaca di ZoOMartis @ Facebook hari ini ZoOM akan bersama anda dalam sesi Tutorial membuat iklan Nuffnang terapung di Blog anda. Mungkin ramai diantara anda tertanya-tanya cara nak membuat iklan terapung yang semakin popular dikalangan blogger.

Jika sebelum ini iklan terapung tidak mempunyai butang CLOSED, namun kini ada cara baru yang membolehkan pelawat blog anda CLOSED ADS/Iklan diblog anda.

Caranya :

  • Langkah Pertama:
    Pergi ke Design > Page elements > Add A Gadget > Pilih HTML/Javascript
  • Langkah Kedua:
    Copy code  BIRU dibawah dan paste kan sahaja kat ruangan HTML/Javascript tu.
   
          <style type='text/css'>
          #topbar{
          position:absolute;
          margin: 0px -23px;
          padding: 0px;
          width: 130px;
          visibility: hidden;
          z-index: 100;
          }
          </style>

          <script type="text/javascript">

          /***********************************************
          * Floating Top Bar script- &#169; Dynamic Drive (www.dynamicdrive.com)
          * Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
          * This notice must stay intact for legal use.
          * Visit http://www.dynamicdrive.com/ for full source code
          ***********************************************/

          var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
          var startX = 30 //set x offset of bar in pixels
          var startY = 5 //set y offset of bar in pixels
          var verticalpos="fromtop" //enter "fromtop" or "frombottom"

          function iecompattest(){
          return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
          }

          function get_cookie(Name) {
          var search = Name + "="
          var returnvalue = "";
          if (document.cookie.length > 0) {
          offset = document.cookie.indexOf(search)
          if (offset != -1) {
          offset += search.length
          end = document.cookie.indexOf(";", offset);
          if (end == -1) end = document.cookie.length;
          returnvalue=unescape(document.cookie.substring(offset, end))
          }
          }
          return returnvalue;
          }

          function closebar(){
          if (persistclose)
          document.cookie="remainclosed=1"
          document.getElementById("topbar").style.visibility="hidden"
          }

          function staticbar(){
          barheight=document.getElementById("topbar").offsetHeight
          var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
          var d = document;
          function ml(id){
          var el=d.getElementById(id);
          if (!persistclose || persistclose && get_cookie("remainclosed")=="")
          el.style.visibility="visible"
          if(d.layers)el.style=el;
          el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
          el.x = startX;
          if (verticalpos=="fromtop")
          el.y = startY;
          else{
          el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
          el.y -= startY;
          }
          return el;
          }
          window.stayTopRight=function(){
          if (verticalpos=="fromtop"){
          var pY = ns ? pageYOffset : iecompattest().scrollTop;
          ftlObj.y += (pY + startY - ftlObj.y)/8;
          }
          else{
          var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
          ftlObj.y += (pY - startY - ftlObj.y)/8;
          }
          ftlObj.sP(ftlObj.x, ftlObj.y);
          setTimeout("stayTopRight()", 10);
          }
          ftlObj = ml("topbar");
          stayTopRight();
          }

          if (window.addEventListener)
          window.addEventListener("load", staticbar, false)
          else if (window.attachEvent)
          window.attachEvent("onload", staticbar)
          else if (document.getElementById)
          window.onload=staticbar
          </script>

          <div id="topbar">
          <a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYLMuElMdomm2F3Aj3c3bTJoEbiHdmrIO_b4XrlgusyO2_dFKYJzxkcBtO0JPIeptBGpA2yMtrg02Jm4GAQpvre8FtvUGFM9wHyFF9ZDXs0DDyo4b09tPTb_k98XeuPEOslRbsB2taJKOa/s320/close.png" border="0" /></a>
          Masukkan kod di sini
          </div>
    
  
    * Langkah Ketiga:
      Cari dan gantikan perkataan "Masukkan kod di sini" dengan kod Nuffnang anda.

    * Langkah Keempat:
      
Preview dulu (Jika dan ok baru)  ----> SAVE


Notes : 

    * Boleh ubah sedikit kedudukan iklan tu kalau tak berapa nak okey margin dia, ubah code berwarna merah dibawah:
      margin: 0px -23px;

    * Image atau gambar butang tutup (closed button) juga boleh ditukar :
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYLMuElMdomm2F3Aj3c3bTJoEbiHdmrIO_b4XrlgusyO2_dFKYJzxkcBtO0JPIeptBGpA2yMtrg02Jm4GAQpvre8FtvUGFM9wHyFF9ZDXs0DDyo4b09tPTb_k98XeuPEOslRbsB2taJKOa/s320/close.png

ZoOM : Selamat Mencuba..

Suka Gossip Ini ClickLah Like @ Share !!