Memasang Informasi Bar di Blog

Di postingan yang ke seratus ini saya masih akan membagikan kode script yang mungkin akan Anda terapkan di blog Anda sekalian. Dan sesuai judul postingan kali ini yaitu Cara Memasang Informasi bar di blog, script ini berfungsi sebagai pemberitahuan dini bagi pengunjung dan berisi pesan atau informasi mengenai blog. Munculnya bar ini bisa dihilangkan apabila mungkin pengunjung tidak membutuhkannya dengan meng-klik pesan tersebut.
Berikut screen shot contoh informasi bar yang saya maksudkan :







bisa Anda lihat di laboratorium saya disini

Jika Anda tertarik ingin pasang di blog, berikut kode script yang digunakan :

<style type="text/css">
#informationbar{
position: fixed;
left: 0;
width: 100%;
text-indent: 5px;
padding: 3px 0;
background-color: YELLOW;
border-bottom: px solid black;
font: bold 12px Verdana;
}

* html #informationbar{ position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
</style>
<script type="text/javascript">
/***********************************************
* Animated Information Bar on http://www.masbugie.com
***********************************************/
function informationbar(){
    this.displayfreq="always"
    this.content='<a href="javascript:informationbar.close()">'
}

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">
var infobar=new informationbar()
infobar.setContent('SELAMAT DATANG DI HTTP://BLOG-SAYA.BLOGSPOT.COM , JIKA ANDA INGIN BERLANGGANAN ARTIKEL LAINNYA SILAHKAN KLIK <a href="http://www.masbugie.com">DISINI</a>')
infobar.initialize()
</script>

Note :
-Teks yang berwarna kuning adalah warna bar dan dapat disesuaikan dengan warna pilihan Anda.
-Teks yang berwarna merah silahkan sesuaikan dengan yang Anda inginkan.

Cara pasangnya : Login ke blogger > Tata Letak > Tambah Gadget > HTML/ Javascript dan Copy Paste kode diatas.

Semoga Anda tidak menemui kendala dalam mengaplikasikannya, semoga bermanfaat..salam

REPOST !!
Jika Anda lebih tertarik tampilannya berada dibawah, maka berikut kodenya :

<style type="text/css">
#informationbar{
position: fixed;
left: 0;
width: 100%;
text-indent: 5px;
padding: 3px 0;
background-color: YELLOW;
border-bottom: px solid black;
font: bold 12px Verdana;
}

* html #informationbar{ position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
</style>
<script type="text/javascript">
/***********************************************
* Animated Information Bar on http://www.masbugie.com
***********************************************/
function informationbar(){
    this.displayfreq="always"
    this.content='<a href="javascript:informationbar.close()">'
}

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

informationbar.prototype.animatetoview=function(){
    var barinstance=this
    if (parseInt(this.barref.style.bottom)<0){
        this.barref.style.bottom=parseInt(this.barref.style.bottom)+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.scrollbottom+"px"')
    else
        this.barref.style.bottom=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.bottom=this.barheight*(-1)+"px"
        this.animatetoview()
    }
}
window.onunload=function(){
    this.barref=null
}
</script>
<script type="text/javascript">
var infobar=new informationbar()
infobar.setContent('SELAMAT DATANG DI HTTP://BLOG-SAYA.BLOGSPOT.COM , JIKA ANDA INGIN BERLANGGANAN ARTIKEL LAINNYA SILAHKAN KLIK <a href="http://www.masbugie.com">DISINI</a>')
infobar.initialize()
</script>

Apakah artikel ini bermanfaat bagi Anda? Beri penilaian yach, klik disini