Σταθερή πλευρική μπάρα με κουμπί κλεισίματος.

Ο παρακάτω κώδικας δημιουργεί μια σταθερή πλευρική μπάρα για τις διαφημίσεις σας ή ότι άλλο νομίζετε.Συνόδευται και από κουμπί κλεισίματος ,ώστε αν κάποιος το βρίσκει ενοχλητικό να το κλείνει.

Τη μπάρα μπορείτε να τη δείτε ζωντανά εδώ.

<script type="text/javascript">
//<![CDATA[
function closeTopAds() {document.getElementById("exebar").style.display = "none";}
//]]>
</script>
<style>
#exebar{
background: #7d7e7d; /* Old browsers */
/* IE9 SVG, needs conditional override of &#39;filter&#39; to &#39;none&#39; */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, transparent 0%, transparent 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,transparent), color-stop(100%,transparent)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, transparent 0%,transparent 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, transparent 0%,transparent 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, transparent 0%,transparent 100%); /* IE10+ */
background: linear-gradient(top, transparent 0%,transparent 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;transparent&#39;, endColorstr=&#39;transparent&#39;,GradientType=0 ); /* IE6-8 */
width:100%;
text-align:center;
top:120px;
left:555px;
right:000px;
border-bottom: 1px solid transparent;
z-index: 999;
height: 890px;
position:fixed;
line-height: 2.2em;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,&quot;Helvetica&quot;,sans-serif;
}
#exebar a{color:#eeff00;text-decoration:none;}
#exebar a:hover{text-decoration:underline;}
 </style>
<!-- This Is A Copyrighted "EXE Top Fixed Bar" Widget, Don't Try To Theft It Otherwise... -->

<div id="exebar">
<!--adsense bar right-->

ο κώδικας της διαφήμισης εδώ

<span onclick="closeTopAds();return false;" style="color: red; padding: 0px;">X</span>

</div>
<!-- This Is A Copyrighted "EXE Top Fixed Bar" Widget, Don't Try To Steal It Otherwise... -->

Τώρα το μόνο που έχετε να κάνετε είναι να ρυθμίσετε τη μπάρα ώστε να εμφανίζεται στο σωστό σημείο.Για ρύθμιση του ύψους που θα εμφανίζεται αυξομειώστε αντίστοιχα το πράσινο .Για ρύθμιση του πλάτους στο οποίο θα εμφανίζεται ρυθμίστε το  κόκκινο .Το κίτρινο ρυθμίζει το πλάτος της μπάρας.Ενώ το γαλάζιο το ύψος της μπάρας.



πηγη