Cara Buat Gambar / Objeck Melayang Di Blog Dengan Tombol Close - Sebenarnya tak hanya gambar yang bisa dijadiin floating atau melayang , seperti iklan atau kode lainnya bisa di buat begitu , tp kali ini saya hanya share yang gambarnya saja
Langsung Saja Berikut Cara Buat Gambar / Objeck Melayang Di Blog Dengan Tombol Close
1. Log in ke akun Blogger
2. Klik Rancangan
3. Klik Tambah Gadget
4. Klik HTML/Javascript
5. Copy kode di bawah ini dan letakkan ke dalam HTML/Javascript
<style type="text/css">
#topbar{
position:absolute;
padding-left:0px;
padding-top:130px;
up:100px;
background-color: transparancy;
width: 200px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
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.left=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.stayTopLeft=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("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="http://2.bp.blogspot.com/-B0EZO_0NcVo/T3bH1dJkQ8I/AAAAAAAABdA/o3IxlpRnRqE/s1600/pelajaran%2Bblog%2Bclose%2Bbutton.png" /></a></div>
<center>
<div style="background: #fff;">
<table width="200" height="130" border="0"><tr><td align="center">
<a href="http://myhafiezers.blogspot.com/"><img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-ash3/599534_271547202960114_1854689171_n.jpg" alt="Myhafiezers Mengucapkan Minal'aidin-walfaizin" width="180" height="120" /></a><br/><br/></td></tr></table>
</div>
</center>
</div>
Keterangan
Warna Merah Adalah Ukuran Background Foto
Warna Hijau Tua Adalah Gambar Buat Tombol Close nya
Warna Biru Muda Adalah Ukuran Border Foto
Warna Ungu Adalah Alamat Yang Akan Dituju Jika Gambar Di Klik
Warna Biru Adalah Url Gambar
Warna Orange Adalah Tambahan ajah :p
Warna Orange Tua Adalah Ukuran Foto
Selamat Mencoba
credit code from pelajaran-blog.blogspot.com
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
