Cari Artikel Blog Ini

Total Tayangan Laman

GAMBAR ALLWAYS ON TOP + TOMBOL CLOSE

Menampilkan sebuah widget dapat anda lakukan dengan berbagai cara dan model. Salah satunya, anda dapat menampilkan image di halaman blog yang ditambah tombol close,  sehingga apabila pengunjung merasa terganggu dengan image itu dapat menutupnya.
Banyak manfaat yang dapat anda rasakan dengan menampilkannya, misalnya untuk pemasangan iklan, menampilkan image yang spesial buat blog anda, atau image-image lain yang menurut anda pantas untuk ditampilkan dibagian sudut.
Keistimewaan tips kali ini yaitu jika anda memainkan scroll keatas maupun kebawah, imagenya tidak mengikuti gerakan dari halaman blog anda atau dalam pengertian lain , image tetap berada di tempat/tidak bergerak.Silahkan anda simak caramenampilkannya.
Menampilkan image allways on top ini terdapat dua tahap

PERTAMA

  • Siapkan dua buah image, satu image utama (yang ingin ditampilkan) dan satunya lagi image untuk tombol close
  • Upload kedua image tersebut pada situs yang anda jadikan untuk penyimpanan image, misalnya : Photobucket atau Picture Trail
  • Setelah proses upload selesai, copy alamat URL dari kedua image tersebut, kemudian simpan pada notepad
  • Siapkan sebuah alamat URL sebagai link target, misalnya http://epg-studio.blogspot.com


KEDUA

  1. Masuk ke blogger dengan ID anda
  2. Pilih tata Letak
  3. Pilih Edit HTML
  4. Back up dulu templatenya untuk menjaga jika terjadi kegagalan
  5. Copy seluruh kode dibawah ini kemudian pste tepat diatas kode ]]></b:skin>


    #mta_bar {
    position:fixed;
    _position:absolute;
    bottom:10px;
    right:10px;
    margin:0;
    padding:0
    }
    * html #mta_bar{
    /*IE6 hack*/
    position: absolute;
    width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
    }
    #mta_bar .right { float:right;width:125px;margin:0;padding:0}
    #mta_bar .ads {margin:0;padding:0}
    #mta_bar .close {margin:0;padding:0}



  6. Copy seluruh kode dibawah ini kemudian paste dibawah kode </head>


    <script type='text/javascript'>
    //<![CDATA[
    var mta_arr = new Array();
    var mta_clear = new Array();
    function mtaFloat(mta) {
    mta_arr[mta_arr.length] = this;
    var mtapointer = eval(mta_arr.length-1);
    this.pagetop = 0;
    this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
    this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
    this.mtasrc.height = this.mtasrc.offsetHeight;
    this.mtaheight = this.cmode.clientHeight;
    this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
    var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
    mtabar = mtabar;
    eval(mtabar);
    }
    function mtaGetOffsetY(mta) {
    var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
    var parentOffset = mta.mtasrc.offsetParent;
    while ( parentOffset != null ) {
    mtaTotOffset += parentOffset.offsetTop;
    parentOffset = parentOffset.offsetParent;
    }
    return mtaTotOffset;
    }
    function mtaFloatInit(mta) {
    mta.pagetop = mta.cmode.scrollTop;
    mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
    }
    function closeAds() {
    document.getElementById("mta_bar").style.visibility = "hidden";
    }
    //]]>

    </script>

  7. Copy seluruh kode dibawah ini kemudian paste tepat diatas kode </body>

    <div id='mta_bar'>
    <div class='right'>
    <span class='ads'>
    <a href='http://epg-studio.blogspot.com.blogspot.com' target='_blank'>
    <img border='0' height='125' src='http://1.bp.blogspot.com/_1j80TgNqd_8/Sh1KMSD4III/AAAAAAAAArY/YR-3AK4YEls/S45/PDVD_207.BMP' width='125'/>
    </a>
    </span>

    <span class='close' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;return true;'>
    <img align='absmiddle' border='0' onClick='closeAds();return false;' src='http://i708.photobucket.com/albums/ww86/andiskapati/tutup.jpg' style='cursor:hand;cursor:pointer;'/>
    </span>

    </div>
    </div>



    Tulisan berwarna merah ganti dengan alamat kepunyan anda

  8. Klik tombol Simpan Template
  9. Lihat Blog anda sekarang

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
6 Comments

6 komentar :

andro_simar mengatakan...

mantep sharenya,, :D

sewa mobil di surabaya mengatakan...

thx buat ilmunya.........:D

Andreas mengatakan...

mas tukeran link ya?
saya udah pasang link/banner anda diblogroll saya
tolong link back ya mas...
thx

bLog>>mR.CooL mengatakan...

thank you boss..

The Hero mengatakan...

Thanxs yaw ilmunya bang . . .

johan wijaya mengatakan...

hmm baguss...boleh ikutin tipsnya nih :)

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!