Apa yang anda cari ?


CSS

Rabu, 17 Oktober 2012

Cara Membuat Gambar Melayang Di BLOG Dengan Tombol Close (X)

·
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="130" height="600" border="0"><tr><td align="center">
<a href="http://situsalfi.blogspot.com/"><img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-ash3/599534_271547202960114_1854689171_n.jpg" alt="Alfi Syahrin 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
Semoga Artikel Cara Buat Gambar / Objeck Melayang Di Blog Dengan Tombol Close Bermanfaat Bagi Anda.


Comments
1 Comments

1 komentar:

galih n gumilar mengatakan...

mantap dah.. Artikelnya

Poskan Komentar

Mari berpartisipasi dalam berkomentar,dengan diberikannya hak untuk menyatakan pendapat dan berbicara ,mari nyatakanlah pendapatmu tentang artikel diatas asalkan tidak berunsur SPAM/Penipuan,tidak berbau pornografi dan menggunakan bahasa yang ramah.

handapeunpost