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
- Masuk ke blogger dengan ID anda
- Pilih tata Letak
- Pilih Edit HTML
- Back up dulu templatenya untuk menjaga jika terjadi kegagalan
- 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} - 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> - 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=''' onmouseover='self.status='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 - Klik tombol Simpan Template
- Lihat Blog anda sekarang
selamat memcoba...