Breaking News

Cara Membuat Float Image Full Screen

Hari ini adalah hari aku Browsing sepuasnya, cari hal yang baru.
Pengen nya sich mau cari Triks dan Tips tentang Photoshop , Malah nemu JS ( Java Script ) di Blog teman saya dan nie aku sharing lagi. Lumayan sich namanya "Float Image Full" ada tuch di Blog aku Preview nya :





Nah hasinya kayak gambar di atas . Mau Nyoba Yuk ikuti langkah-langkahnya :


Copy Script di bawah ini :


<!--
Find out if this theme has the preset mode deactivated. If its not deactivated then lets show off a bit. Party time!
~~~~~~~~~~~~~~~~~~~~~~~~ ~~~ -->


<!--
The High Bar
~~~~~~~~~~~~~~~~~~~~~~~~ ~~~ -->

<div id="high-bar">



<!-- widget_text --><div id="text-445201315" class="widget widget_text"> <div class="textwidget"><style type="text/css">

#informationbar{
position: fixed;
left: 0;
width: 100%;
text-indent: 5px;
padding: 5px 0;
background-color: #F5DEB3;
border-bottom: 3px dotted black;
font: bold 12px Comic Sans MS;
}

* html #informationbar{ /*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}

</style>

<script type="text/javascript">

/***********************************************

* Animated Information Bar- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

function informationbar(){
this.displayfreq="always"
this.content='<a href="javascript:informationbar.close()"><img src="http://www.idekeren.co.cc/files/close.gif" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px" /></a>'
}

informationbar.prototype.setContent=function(data){
this.content=this.content+data
document.write('<div id="informationbar" style="top: -500px">'+this.content+'</div>')
}

informationbar.prototype.animatetoview=function(){
var barinstance=this
if (parseInt(this.barref.style.top)<0){
this.barref.style.top=parseInt(this.barref.style.top)+5+"px"
setTimeout(function(){barinstance.animatetoview()}, 50)
}
else{
if (document.all && !window.XMLHttpRequest)
this.barref.style.setExpression("top", 'document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px"')
else
this.barref.style.top=0
}
}

informationbar.close=function(){
document.getElementById("informationbar").style.display="none"
if (this.displayfreq=="session")
document.cookie="infobarshown=1;path=/"
}

informationbar.prototype.setfrequency=function(type){
this.displayfreq=type
}

informationbar.prototype.initialize=function(){
if (this.displayfreq=="session" && document.cookie.indexOf("infobarshown")==-1 || this.displayfreq=="always"){
this.barref=document.getElementById("informationbar")
this.barheight=parseInt(this.barref.offsetHeight)
this.barref.style.top=this.barheight*(-1)+"px"
this.animatetoview()
}
}

window.onunload=function(){
this.barref=null
}

</script>


<script type="text/javascript">
<!--Invocation code-->

var infobar=new informationbar()
infobar.setContent('<center>Selamat datang di <a href="">www.masrendra.info</a> | Selamat Membaca Artikel dari Mas Rendra , Semoga Bermanfaat!<hr><font size="12" color="#990000">www.masrendra.info</font><hr><img src="http://virusrendra.nab.su/anigif.gif" width="370" height="350"><hr>Selamat datang di <a href="#">www.masrendra.info</a> | Selamat Membaca dan berselancar di Dunia Maya! !<a href="javascript:informationbar.close()"><img src="http://www.idekeren.co.cc/files/close.gif" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px" /></a><br><br></center>')
//infobar.setfrequency('session') //Uncomment this line to set information bar to only display once per browser session!
infobar.initialize()

</script>



nah itu script nya perlu di Ingat Tulisan dapat di Edit sendiri sesuka hati . Contoh "www.masrendra.info" dapat di ganti dengan URL anda sendiri. Mantep kan ?
Selamat Mencoba yak...!

2 komentar: