opop

araccubuk

Arkadaşlar şimdi sitemizin üstünde gördüğünüz gibi bir araç çubuğu yapacağız.

<style type="text/css"> #informationbar{ position: fixed; left: 0; width: 100%; text-indent: 5px; padding: 5px 0; background-color: Black; border-bottom: 1px solid black; font: bold 12px Verdana; } * 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 * Bu kod hackerfriend.ile.biz sitesinin Siteniz İçin bölümünden indirilmiştir. ***********************************************/ function informationbar(){ this.displayfreq="always" this.content='<a href="javascript:informationbar.close()"><img src="https://img.webme.com/pic/p/power-turkiye/closeicon.png" 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('Buraya Bilgi Araç Çubuğu Mesajınız...Power-Turkiye.Tr.GG') //infobar.setfrequency('session') //Uncomment this line to set information bar to only display once per browser session! infobar.initialize() </script>  

             Şimdi yukarıda verdiğim kodu tasarım üstüne veya durmasını istediğiniz sayfanın kaynak kısmına yapıştırın.


Şimdi vereceğim yer kodun en önemli kısımlarından biri

#informationbar{
position: fixed;
left: 0;
width: 100%;
text-indent: 5px;
padding: 5px 0;
background-color: Black;
border-bottom: 1px solid black;
font: bold 12px Verdana;
}

Kırmızı İle Gösterdiğim Yer:Kırmızı ile gösterdiğim yer araç çubuğunun arka plan rengi.Arkaplan rengini değiştirmek istiyorsanız.Kırmızı gösterdiğim yere şunları yazabilirsiniz:

Mavi Yapmak İçin:background-color: Blue;

Beyaz Yapmak İçin:background-color: White;

Kırmızı Yapmak İçin İse:background-color: Red;

Yeşil İle Gösterdiğim Yer:Yeşil ile gösterdiğim yer araç çubuğunun kenar rengidir.Kenar rengini ayarlamak için:

Mavi Yapmak İçin:border-bottom: 1px solid blue;

Beyaz Yapmak İçin:border-bottom: 1px solid white;

Kırmızı Yapmak İçin İse:border-bottom: 1px solid red;


Bunları ayarlayıp kodu yerleştirdikten sonra istediğiniz gibi bilgi araç çubuğunuza bakabilirsiniz =).İsterseniz bilgi araç çubuğuna ziyaretçilere mesaj,yeni bir duyuru veya dikkatinizi çeken bir haber veya yazı koyabilirsiniz.Gerisi zaten size kalmış,karışmaya gerek yok =)


Aa bide unutmadan bilgi araç çubuğunun kapatma işaretini değiştirmek isteyenler:

function informationbar(){ 
 this.displayfreq="always"
 this.content='<a href="javascript:informationbar.close()"><img src="Buraya kapatma resminin urlsi" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px" /></a>' 
}