Monday, May 25, 2009

HTML, iframe and Blogger Template Headaches...

I've always been a "do it yourself" kind of guy when it comes to most things that I need. That's why I learned to build my own boats, make my own sails and many other skills that I would have never thought I would learn until the day came when I needed them. I used to hate computers and didn't want anything to do with them. For years my only use for them was for the word processor function, writing my books and articles and occasionally surfing the Net in the course of research. Then the time came a few years ago, when as a newly published author, I realized I had to have a website. Of course I didn't want to pay someone to build it for me. That would be expensive, and I would have to wait on someone else's schedule every time I wanted a simple change. So I started the process sometime back in 2003, and it continues to this day.

Building and updating my website and blogs has been an ongoing project filled with challenges and interesting problems. Since I do not have any formal training in writing code, learning to get the appearance and functionality I want on my various pages has been a hit and miss effort, requiring lots of searching online for instructions and tips. Fortunately, just about anything you need to know is freely available in various forums and on how-to sites and blogs.

Anyone who has been following my blogs or visiting this site for any length of time knows that I've made many changes over the years and have redesigned the whole site more than once. Hopefully, it is now in a form I can live with for awhile, and any changes will be simple additions, rather than major overhauls.

The main purpose of this front page blog, which is embedded in an "iframe" element, for those who may not know how that works, is to allow easy and updates and add dynamic content to an otherwise static page. I'm writing this right now as a post in my Blogger account, but as soon as I finish it and hit the "publish post" button, it will also appear on my main website page where you are likely reading it now in the iframe that starts a third of the way down the page.

I prefer to use Blogger for all my blogs, hosting them each on a separate blogspot address. It's easy to set them up, the templates can be modified as extensively as you require, search engines such as Google readily index new posts, and best of all - it's free. But despite this, I would never use a blogspot address for my main website. Instead, this site is hosted separately under the domain, which allows me to build the pages anyway I like, but requires a site building software program to update it. What I wanted with this homepage blog is to integrate it more or less seamlessly with the main index page of the larger site, having the navigation bars and header that you see at the top of the page the same as on all the pages in the website.

In the previous version of this site, before this past weekend's update, I had my Scott's Boat Pages blog integrated into this home page in the form of a live feed from Feedburner. While that worked okay for displaying the text and posts from recent photos on the blog, the live feed does not include all the extra widgets in the blog like the sidebars you see to the right with links, recent posts, archives and other material. Instead, it converts everything to a basic text, which can be customized, but is real pain using CSS (cascading style sheets) and other advanced techniques.

The iframe option is a simple code element that is easy to install with the sitebuilder program I am using for this site, and it is a simple matter to set it up to display the content of a blog or any website in its own separate window that can be displayed on any webpage. The problem with this, as I discovered late yesterday after publishing all the new changes to my site, is that when you click on links within the site or blog that is displayed in the iframe, the new link opens within the iframe instead of the whole page you are viewing. For example, the links in this post or in the sidebar to the right would try to open the whole new site within this small window. In the case of sites with larger pages, such as SmugMug, where my photos are hosted, the page would expand over the iframe borders, but not allow you to use the "back" button to return back to my home page. I quickly realized this would not work, and so began yet another intensive search through web design forums looking for a solution, because I really wanted to keep the blog in this iframe and retain the colors, sidebars and any future widgets I might want to add later.

My searches turned up many discussions about this topic, with some people saying it couldn't be done and others saying it was easy. Some solutions required adding a tag to each link that would tell it to open in a new window. This would defeat the purpose of a simple and readily updated blog, if I had to go in and manually add HTML tags to every link from now on. At last, after working on this much later than I intended last night, I found a post on The Useful Blog that offered an easy way to make my links here behave the way I wanted them to.

It turned out that all I had to do was go into my template on Blogger and edit the HTML, adding this simple tag: base target="top" into the head section of the template code. This tells every link within the blog to open at the top of the page, breaking it out of the iframe and allowing the back button to function again.

Now that I've overcome that hurdle, I'm content to leave this blog in the iframe to maintain the appearance you see now and allow for full functionality of the sidebar widgets. Since the blog is hosted on its own blogspot address, search engines can still index the posts, even though they can't "see" the content within the iframe on a page. I don't really like having the header you see at the top of this post visible on the main website, but it needs to remain so that visitors who come directly to the blogspot address know what they are reading.

Another simple modification that I feel is necessary to put a blog into an iframe on a page like this is to get rid of the Blogger navigation bar that appears at the top of every blogspot page. This is another simple code addition to the template, which I found online and added as soon as I set this blog up. The code: #navbar-iframe { display: none !important;} placed under the head section of the template magically makes the annoying blue bar go away.

Working with this stuff gives me a headache and eats up an extraordinary amount of time, but it is an interesting learning experience, and it's all part of the process of writing and publishing using the awesome tools and resources available on the Internet.


  1. Thank for the tips! However, it is confusing as to WHERE exactly you are to insert these codes:

    base target="top" into the head section of the template code

    #navbar-iframe { display: none !important;}

    Any way you can specify a little bit more? Thanks!

  2. Iris, I forget exactly just now, but you can view the source code for the page and do a "Ctrl F" search to find the specified codes.


Note: Only a member of this blog may post a comment.