This is a super simple, and often overlooked, solution to putting a blog on your website. In making the decision to host my own blog on my own domain xxiis.com, I decided to instead add my WordPress blog onto my site using an Iframe tag. More like, I added a window to my blog on my own site; it’s really more appropriate to link out to the blog page, but I like to give people a peek at what I am blogging about at least.
The HTML code is very simple:
* * * * *
<h2>My WordPress Blog</h2>
<p>To open the blog in it’s own window, <ahref=”http://xxiis.wordpress.com/” target=”_blank”>click here.</a>
<IFRAME src=”http://xxiis.wordpress.com/” NAME=”right” HEIGHT=”100%” FRAMEBORDER=”0″ width=”100%”>
* * * * * *
Couple things to point out. In the link on top, notice I put xxiis.wordpress.com and not just wordpress.com. I want people to come to my page obviously. You can pick and choose which page people go to of course, maybe you want people to go to a specific page on your blog? Anyways, the actual link would be your subdomain at WordPress.com.
Another thing to point out is the NAME of the Iframe is “right”. That’s just the name I happened to choose for it. You can choose any name you want. As it happens, the iframe in question isn’t on the right, but as you can see, I didn’t hurt it’s feelings at all.
The purpose for naming the iframe is so that you can link from outside the iframe to inside the iframe on a web page.
Let’s say for instance I had a link that said “go to my other wordpress page” or something similar. I’d do the link like this:
<a href=”whatevermylink.is” target=”nameofmyIframe”>
This would tell the link to open the link in the iframe titled “nameofmyIframe”. Easy eh?
A lot of people are goofy with frames, but I personally like Iframes. They are quite powerful actually, work great in Firefox, and I can’t complain. As you can see, it works great for this application especially.
You’ll also notice on xxiis.com in the photography section, that all of the little thumbnails on the left point to the iframe on the right.
With this scenario, what I did is created an extremely simple web page called “album.htm”, which kinda just looks like this:
* * * * * *
<link href=”style.css” rel=”stylesheet” type=”text/css”>
Hover over a picture on the left for the title of that gallery.
Click an image to view a slideshow in this screen!
Please note that this collection of almost 2000 photos is a fraction
of the total amount of photography I’ve done in the past several years.
Coming soon, I’ll put up some Boston and Providence photos too.
* * * * * *
What that does is creates an initial page to have by default, rather than show a slide show by default. I could have done a slideshow too, but I thought I’d rather tell people how to use the site, etc.
Then, I created a simple link scenario like this:
<a href=”picturelink” target=”right”><img src=”picture”></a>
(etc, one for each thumbnail…)
<iframe src=”album.htm” name=”right”></iframe>
Which tells my browser to open album htm in my page, and says that whatever thumbnails I link to, to open the pages in that iframe on the page.
Of course you’d need to create tables and things to make it look happy, but that’s the basic gist of it.
Don’t forget to allow people the option to link out (that target=”_blank”) and view your blog in a new browser window. It’s good manners.
Any questions, view the source of the code on the page (it’s all done by me in notepad2.exe) and play with your own page.
Like this? Digg it!