Creating a Coupon Box in an iFrame
Ok so you want to put a coupon box in your shop. Something like this:
SPECIAL: Save $5 when you spend $50 or more!
Enter coupon code ONIONCHAIR at check out.
Expires September 16, 2008
You'd also like to use a coupon box in your blog and on your web site. How do you create a coupon box? And how can you do this without having to update the box in multiple locations?
The box itself is created using a "div" tag to put borders and a background around your coupon code text. You can insert the code directly into any page you want the box to appear. But you can also save it as a file. Then at the places you want the coupon box to appear you insert an iFrame and load the coupon box file into the iFrame. Then you only need to update that one file.
The Coupon Box
Here is the code for the Coupon Box (See the video demo on How to Create a Coupon Box ):
<div
style=
"background-color: #DFF3DE; border-style:dotted; margin: 1px; padding: 2px;
text-align: center;
width: 425px;
">
<strong style="FONT-SIZE: 16px">
<span style="COLOR: #660000">SPECIAL:</span> Save $5 when you spend $20 or more! <br>
Enter coupon code <span style="color: #990000">SUBTLYVISION</span> at check out.<br>
</strong>Expires September 16, 2006
</div>
The bold text is what creates the box. You can change the background-color, border-style, margin, padding, text-align, and width. (The non-bold text is what is inside the box., you can make that whatever you want). To experiment with the look do this:
Open Notepad (or other plain text editor)
Create a "web page" by pasting in this code
<html>
<head>
<title>Coupon Box Demo</title>
</head>
<body>
<div style= "background-color: #DFF3DE; border-style:dotted; margin: 5px; padding: 2px; text-align: center; width: 425px;"><strong style="FONT-SIZE: 16px"> <span style="COLOR: #660000">SPECIAL:</span> Save $5 when you spend $20 or more! <br>
Enter coupon code <span style="color: #990000">SUBTLYVISION</span> at check out.<br> </strong>Expires September 16, 2006</div>
</body>
</html>
Save the file as something like "TestCoupon.htm" When you are typing in the file name in Notepad include the quotes to be sure it is saved as an htm file. Otherwise it might save the file as TestCoupon.htm.txt. Do not close the file. Leave it open in your plain text editor.
Now open the saved file in your web browser (yes, you can edit it in Notepad and look at it in your web browser at the same time). To do this open your web browser, then either click File, then Open and navigate to where you saved the file, Or show the file in your file explorer and drag it into your web browser.
You should see something like this:
SPECIAL: Save $5 when you spend $20 or more!
Enter coupon code SUBTLYVISION at check out.
Expires September 16, 2006
You can experiment with modifying the background-color, border-style, margin, padding, text-align, or width. Make a change, save the file, then refresh your browser. For example, change the width to 250 to make the box shorter, as in the example at the top of the page. Just experiment.
Now that you have your coupon box code you can paste it any place HTML code is allowed. But these coupons change frequently. And if you have put this code in several places then you have to go and update it in each of those places. You can solve this problem with an iFrame if you have a web site, or just a place to put a plain simple web page. Most internet access accounts come with a small amount of free web space and that is all you will need. But you can test it and experiment with it on you machine even if you don't have a web site.
Creating an iFrame
An iFrame is some code that can be put in your shop, your blog or other HTML place. The iFrame creates a special kind of link to another file (like your TestCoupon.htm) so that it shows that page inside another page.
It will be easier to understand if you just do it. So let's create another web page that will be your example. This one could just as easily be your shop, or blog or whatever but we will put it on your machine to make experimenting easier.
Open Notepad or another plain text editor.
Paste the following:
<Html>
<head>
<title>Test to show iFrame Use</title>
</head>
<body>
Then paste the code for the iFrame
<iframe
src ="TestCoupon.htm"
width="440"
marginheight="1"
marginwidth="1"
frameborder="0"
align="top"
name="cpcoupon"
scrolling="no"
title="Current Coupon Code for CafePress">
<a href="TestCoupon.htm">
Current CafePress Coupon</a>
</iframe>
And finish the web page by typing
</body>
</html>
Save this file in the same place you saved TestCoupon.htm - maybe name it "TestiFrame.htm" - remember that for NotePad you may need the quotes to save it as the correct file type.
Now open the saved file in your web browser. In your open web browser either click File, then Open and navigate to where you saved the file, Or show the file in your file explorer and drag it into your web browser. You should see your coupon box.
The next step is to find a web site to store your TestCoupon.htm. Then you have to get the whole address for that page. It will look something like: http://www.yourwebsitename.com/TestCoupon.htm Next change the URL (address) for the coupon box [src ="TestCoupon.htm"] and <a href="TestCoupon.htm"> to use the address on the web site. Save the TestiFrame.htm file, and refresh your browser to make sure it is working. Finally you can copy the iframe code to you shop, blog or other place you want the coupon codes to appear. Here is a demo TestiFrame.htm
Update your coupon box file with new information as needed. The changes will appear on all the pages with the iFrame.
See the video demo on How to Create an iFrame for your Coupon Box
To learn more about the div tag, and how to use it explore the HTML resources.
|
Tutor Tanith
