Quotiki - Tools - Random Popular Quote

You can easily add random quotes from Quotiki to your own website. Each time your page loads, it will automatically display a different random quote right on your own site. Follow the instructions to add the appropriate code to your site.

The Code

Just cut and paste one of the text blocks below into your HTML where you want the quotes to be displayed on your site.

Style 1 - White Box, Black Border

<link href="http://www.quotiki.com/css/api1.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.quotiki.com/api/RandomPopularQuote.ashx"></script>

Style 2 - Author Left Aligned

<link href="http://www.quotiki.com/css/api2.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.quotiki.com/api/RandomPopularQuote.ashx"></script>

Style 3 - Author Right Aligned

<link href="http://www.quotiki.com/css/api3.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.quotiki.com/api/RandomPopularQuote.ashx"></script>

What It Does

Take a look at the boxes on the right side of this page. Each random quote uses the exact code contained in each of the text boxes above. Just select the style you like the best. The quote should stretch to fit wherever you place it on your page.

Advanced Formatting

If you want to customize the appearance of the random quote for your web page, you can use CSS with the class names to customize the display. Simply customize the CSS styles contained within the text box below.

<!-- style, can be customized -->
<style type="text/css">
/* overall container */
.quotiki {
    padding: 5px;
    background-color: white;
    border-color: black;
    border-style: solid;
    border-width: 1px;
}
/* quote text */
.quotiki_quote { 
    font-size: 105%;
    font-weight: bold;
    font-family: ; 
    color: black;
    text-align: left;
    text-decoration: none;
}
/* quote text on mouse rollover */
A.quotiki_quote:hover {
    COLOR: red; 
    TEXT-DECORATION: underline;
}    
/* author text */
.quotiki_author { 
    font-size:  95%;
    font-weight: bold;
    font-family: ;
    color: black;
    text-align: right;
    text-decoration: none;
}
/* author text on mouse rollover */
A.quotiki_author:hover {
    COLOR: red; 
    TEXT-DECORATION: underline;
}
</style>   
             
<!-- script, do not change -->             
<script type="text/javascript" src="http://www.quotiki.com/api/RandomPopularQuote.ashx"></script>

How the code text above will display if code is left unchanged:

padding: set padding in pixels
background-color: set background of quote box to blank or a color such as white
border-color: set font-size to any percentage you like
border-style: set style to none or solid
border-width: set width of border in pixels
font-size: set font-size to any percentage you like
font-weight: set font-weight to normal or bold
font-family: only set font-family if you want to override your web site's existing fonts
color: set color that text should appear in
text-align: set text to appear left aligned or right aligned
text-decoration: set text decoration to none or underline

Quotiki Tools - Random Popular Quote