آموزش ساخت Infobar (نوار پیغام) در بالای وبلاگ و وب​سایت

احتمالاً در حین وبگردی، متوجه شده​اید که در بالای برخی صفحات در برخی سایت​ها، یک نوار زرد رنگ از طرف طراحان سایت نمایش داده می​شود و در آن پیغامی نمایش داده می​شود.

به طور مثال به این نوار دقت کنید:

به این نوار، Infobar گفته می​شود. در مثال بالا، با کلیک روی infobar به بخش ثبت نام هدایت می​شوید...

اگر شما هم قصد دارید برای صفحه​ای از وب​سایت خود این نوار را نمایش دهید، راه حل ساده​ای دارد!

کافی​ست نرم​افزار InfoBar Generator را از اینجا دانلود کنید و طبق دستور زیر چنین نواری ایجاد کنید:

مطابق شکل بالا عمل کنید و در نهایت خواهید دید که بر روی فایل index.htm که در مسیر مشخص شده قرار دارد، کدهایی اضافه شده است.
ضمن اینکه یک پوشه حاوی چند فایل، در کنار فایل index.htm ایجاد شده است که حاوی کدهای Javascript و CSS مربوطه است. این پوشه و فایل index.htm را به مسیر دلخواه در سایت خود منتقل کنید...

توجه: این نوار، یک نوار ثابت در بالای صفحه است. اگر می​خواهید نواری که ساخته می​شود، همراه با اسکرول کردن صفحه، جابه​جا شود، مثل این صفحه:

http://www.javascriptkit.com/script/script2/infobar.shtml

باید قطعه کد زیر را بین دو تگ body در کدهای خود قرار دهید:
<style type="text/css"> #informationbar{ position: fixed; left: 0; width: 100%; text-indent: 5px; padding: 5px 0; background-color: lightyellow; 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 ***********************************************/ function informationbar(){ this.displayfreq="always" this.content='<a href="javascript:informationbar.close()"><img src="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('Welcome to JavaScript Kit! It appears you are not registered yet on our site. Why wait? <a href="#">Register here</a>') //infobar.setfrequency('session') //Uncomment this line to set information bar to only display once per browser session! infobar.initialize() </script>