Letak iklan nuffnang terapung (floating) dengan butang tutup (closed button).


Salam,

Sekarang ni ramai yg dah letak iklan nuffnang terapung kat kiri atau kanan blog kan, tapi kesian kat sape2 yg guna notebook cam saya nih kekadang rasa terganggu sikit nak baca entry atau nak tgk kat bahagian sidebar blog, sebab ade sesetengahnya menutup "sedikit" bahagian yg saya sebutkan tadi...

Kalau yg letak iklan 165 x 240 tuh tak de la terasa sgt tapi ade jugak yg letak iklan 336 x 280 tu terapung dan tak de butang tutup, memang terasa mengganggu sesangat la..tu la kan malang bagi yg guna notebook ni, screen kecik..nak buat macam mana hadap jer la...

Okey la, kali ni nak bagi alternatif kepada yg dah letak atau baru nak letak iklan terapung kat tepi tu, pilihan code yg ade butang tutup ( floating ads with closed button bak kata omputih tu )

Caranya :
  • Langkah Pertama:
    Pergi ke Design > Page elements > Add A Gadget > Pilih HTML/Javascript
  • Langkah Kedua:
    Copy code 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="http://2.bp.blogspot.com/_LZtXSNcp76A/TBkBOhhQYwI/AAAAAAAABGg/lW2a6h4cpbo/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:
    Save.


Note : 
  • 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 :
    http://2.bp.blogspot.com/_LZtXSNcp76A/TBkBOhhQYwI/AAAAAAAABGg/lW2a6h4cpbo/s320/close.png

Kalau code kat atas ni broken ker, tak jadi ker, korang boleh refer sumber asal tutorial ni di maribinablog.

Selamat bereksperimentasai!!!

3 comments:

  1. mak aiii.. pjgnya koding nyer... xde yg simple ker... ekkeke..

    btw nak letak jugak la.. sian gak sbb ramai yg komplen, dah agak mesti yg guna netbook...

    ReplyDelete