آموزش ساخت 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>

موفق باشید؛
حمید رضا نیرومند

ارسال سؤال یا نظر

---

1- مهدي خورشيدي:
بوسیله: , در: Thursday, 2008 April 10-کد: 573
بابا مرسي
من مدتها بود از اين ايتفو بار (اسمش نمي دونستم) داشتم لذت مي بردم و دنبال روش ساختش بودم
هر چند اين برنامه خودش لقمه كرده ولي بايد كد رو خودم بنويسم به هر حال يه سر بعد عمري به سايتت زدن ارزششو داشت

---

2- نرم افزار:
بوسیله: , در: Wednesday, 2013 March 13-کد: 6409
سلام دستتان درد نکنه ممنون.

---

3- :
بوسیله: , در: Saturday, 2017 April 15-کد: 15078
سلام وقت بخیر برای سایت های تحت وردپرس و زبان پی اچ پی چطور؟