Articles

How to use a blog to populate portions of a web page.

Using the blog as a way to populate a server side include file, you can easily update portions of your site without ever opening an editor or FTP.

In order to understand this tutorial, it is assumed that you know how to hand code HTML, basic understanding of CSS (not entirely neccessary but helps), FTP, have Internet Explorer 5.0+ or Netscape 6.1+, and have a web server.

Create an account with a blog provider. Blogger is the one that I have used and will be discussing in this tutorial. At the time of writing this, it is free to setup a basic blog with Blogger. Choose any starting template you want (we will be editing it to work seamlessly with your site design.

Log into your blog account. Click on settings. The Basic settings page allows you to put in a title, description, and a choice on whether or not to make the blog public. Since this blog will only be creating a portion of your page, it might be a good idea to make it private. Thus Blogger will not make the page public for people to go view the latest updated blog and find a portion of the page and not the whole thing and become confused. Save the changes on this page and go to the next tab.

Tab- Publishing tab. This one is one of the most important parts of setting up the blog and have it work. Publish via FTP if you have access to FTP on your web server. Next put in your web server address for ftp. They give the example of ftp.example.com. You can also enter the IP address if you have that instead. Next enter the URL of where your include file will be pulled from off your server. Example: http://www.example.com/weblog/include.html Next up is the path on your server to be able to save the file. Example: /home/example/www/weblog/ (this does not need the actual filename just the directories). Note they specifically say the path must already be created on your web server for it to work. Next you need to put in the actual filename for the include. Example: include.html You are next asked for your server login and password to upload something via FTP on your web server (not the blog login but your web server login). Ping weblogs.com likely will want to choose No since you are only updating a portion of a page and not the entire site. Select save changes.

Tab- Formatting. This will mostly be edited to preference. I have 1 post showing since the page is rather long if you add more and if you choose, you can link up an archive and people can access the old information as they wish. Select save once you are finished here.

Tab- Archiving. This is where you choose more detailed information on how to archive and where to put it on your server. The most important part is the path to archive should be filled in properly. Example: /home/example/www/weblog/ Also no archive name in this box but it asks for it in another box. Put in a filename in the filename box. Example: archive.html I selected Archive Index File "Yes" so that I did not have to have a list of archives on the main page where one reads the initial text. Thus I can make a link to an archive page and one can select the date to read from the next page. This keeps the main page clean. Select Save changes.

Tab- Email. You can have your blog emailed to yourself for record keeping if you desire. Just enter your email address for Blogger to send it to you once you publish.

Tab- Members. You can have more than one person entering information into your blog if you desire. Here is where you can set permissions and add team members.

Next step usually involves creating your web site how you want it.

Decide upon a portion of your site that you want to be able to edit the text frequently and not need to edit the html code for it that often. This portion of the site you will use in the blog template page. Place in your html page a call for the include. Example:

<!-- #include virtual="/weblog/include.html" -->

Step three Log into Blogger into your account. Click on Template. You will see a rather large box with some code. Copy the code and save it for later. You will need a few things from this code to have the blog work.

Here is an example of the code used for a template:

Notice that the stylesheet information is actually inside the blog template. this is neccessary as the styles will not be read in from your site and applied to the blog which is generated from a seperate server. Thus the styles used only in the blog portion need to be in the template. Unfortunate but at least you can use CSS in the template.

• <Blogger>
• <BlogDateHeader>
• <$BlogDateHeaderDate$>
• <$BlogItemNumber$>
• <$BlogItemBody$>
• <$BlogItemAuthorNickname$>
• <$BlogItemArchiveFileName$>#<$BlogItemNumber$>
• <$BlogItemDateTime$>

These all need to be used in order for your blog to work properly. You can rearrange some of them so that information is setup how you like. Fortunately the code is readable as to what it does with a little contemplating and playing around with them. In order for Blogger to keep making their product free, you should leave in the "Powered by Blogger" image and have it link to http://www.blogger.com. This part is directly in the html page and not in the blog include portion of the site. It seems to work better for me in that location.

The code you put here is basically the code you would normally have in your html on your site but this way it allows you to use a blog to input a paragraph or two etc without needing to code all the time. Thus your site can become more frequently updated and make it where people might come back later to visit.

Once you get the template the way you want (or to just check your work), save the template. In the new post section, you can type any information you want. Select Post and Publish. Go to your URL in a seperate window to check your work.

If you have any questions, feel free to email. sherri@sherriwyche.com