The one I will demonstrate to you is a simple JavaScript which stores quotes and authors in a format called “arrays”. We all know a month has got 31 days (well more or less but we stick to 31 days) so within this javascript you can store 31 quotes which will display a new quote every day of the month.
Here we go:
Navigate to Template -> Page Elements , click Add a Page Element to the place you want your Quote of the Day to appear and then click on HTML/JavaScript.
Give it a Title Name and paste the following code into the content box:
<div style="border:1px solid #333; background-color: #fff; padding: 4px; margin-top: 5px; font-weight: bold;">
<script language="javascript" type="text/javascript">
var d=new Date();
var quotes=new Array(31);
var authors=new Array(31);
quotes[0]="If a man watches three football games in a row, he should be declared legally dead.";
quotes[1]="Friendship is far more tragic than love. It lasts longer.";
quotes[2]="Advice is like castor oil, easy enough to give but dreadful uneasy to take.";
quotes[3]="";
quotes[4]="";
quotes[5]="";
quotes[6]="";
quotes[7]="";
quotes[8]="";
quotes[9]="";
quotes[10]="";
quotes[11]="";
quotes[12]="";
quotes[13]="";
quotes[14]="";
quotes[15]="";
quotes[16]="";
quotes[17]="";
quotes[18]="";
quotes[19]="";
quotes[20]="";
quotes[21]="";
quotes[22]="";
quotes[23]="";
quotes[24]="";
quotes[25]="";
quotes[26]="";
quotes[27]="";
quotes[28]="";
quotes[29]="";
quotes[30]="";
authors[0]="Erma Bombeck";
authors[1]="Oscar Wilde";
authors[2]="Josh Billings";
authors[3]="";
authors[4]="";
authors[5]="";
authors[6]="";
authors[7]="";
authors[8]="";
authors[9]="";
authors[10]="";
authors[11]="";
authors[12]="";
authors[13]="";
authors[14]="";
authors[15]="";
authors[16]="";
authors[17]="";
authors[18]="";
authors[19]="";
authors[20]="";
authors[21]="";
authors[22]="";
authors[23]="";
authors[24]="";
authors[25]="";
authors[26]="";
authors[27]="";
authors[28]="";
authors[29]="";
authors[30]="";
document.write(quotes[d.getDate()-1] + '<div style="text-align: right; margin-top:5px; font-style: italic;' + authors[d.getDate()-1] + '</div>');
</script>
<noscript>You need to enable JavaScript to read this.</noscript>
</div>
A small explanation about the whole script & code:
I have defined a div table for the Quote of the Day to be displayed in with following atributes: 1px solid dark colour border, white background and 5 px spacing. If you do not want the table border to be displayed then there is a way of hidding it by simply replacing border:1px with border:0px and this will not show the border anymore.
Anyhow, you can of course change the border color, background color, spacing and even add other elements/atributes as you wish. If you need a list of color values, then visit the HTML Color Code Chart.
Note: When you type the quotations and names, do not use characters like " or ; and do not press “Enter” within the quotation marks as these are special characters which are used by JavaScript.
0 comments:
Post a Comment