 |
| Klik Gambar Untuk Perbesar |
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 sessionvar startX = 30 //set x offset of bar in pixelsvar startY = 5 //set y offset of bar in pixelsvar 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.lengthend = 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").offsetHeightvar 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://bones-official02.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
Sumber : Myhafiezers
Posting Komentar