Langkah Cara Membuat Link Text Melayang dengan Tombol Close [Tutup]
Pertama,pergi ke Dashboard lalu pilih Tata Letak / Rancangan / Design [1] lalu pilih Add a Gadget[2] kemudian pilihlah Html/Javascript [3],lihat gambar:
[1]
[2]
[3]
Dan letakkan kode berikut disana:
<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://beritamuslimsahih-ahlussunnah.blogspot.com/"><img src="http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg" alt="Pelajaran Blog - Ahlussunnah wa Al Jama'ah." width="180" height="120" /></a><br/><br/>
<small><strong>Masih belum mengenal Islam yang Murni?</strong></small>
</td></tr></table>
</div>
</center>
</div>
Lalu Simpan dan lihat hasilnya.
**Ket:
1.Untuk kode yang berwarna merah gantilah sesuai dengan keinginan sampai sobat mendapat posisi yang diinginkan.
2.Untuk kode yang berwarna biru sobat dapat ganti dengan
3.Untuk kode warna hijau gantilah dengan widget HTML yang sobat inginkan,bisa meletakkan HTML widget Facebook Page,Status Twitter,Iklan Text,Gambar / Foto,Info dan lain sebagainya.
2.Untuk kode yang berwarna biru sobat dapat ganti dengan
[x]
,jika sobat tidak menginginkan tombol close.3.Untuk kode warna hijau gantilah dengan widget HTML yang sobat inginkan,bisa meletakkan HTML widget Facebook Page,Status Twitter,Iklan Text,Gambar / Foto,Info dan lain sebagainya.
Selamat mencoba ya
SUMBER
http://pelajaran-blog.blogspot.com/2012/03/membuat-widget-melayang-cara-buat-obyek.html
Tidak ada komentar:
Posting Komentar