next »

[Gomeza]

This is a thread for discussing the use of blog templates for the old format on Blogit.com. Having left the blogging site known as Blogit just a few months ago, I have some blog templates that can only be used on that site that I am sure I will never use again. . . by collecting and displaying them all here, anyone that can make use of them can have them.

First it should be mentioned that the old format is used on accounts that began before 2006. These templates are useless on the new format.

Next I should mention some of the limitations of the interface where these templates can be used. The CSS (stylesheet code) when used renders in a somewhat unique fashion, some common uses of CSS simply cannot be done on that interface. Subsequently, light colored body backgrounds are the most practical, some compromises are necessary and expectations should be kept in line with the limitations.

Following are a few concept images that can be easily turned into blog templates, or if you have some basic knowledge of image editing, you can create your own concept image. Keep the limitations of the server in mind however. The template code is for an image that is 800 pixels wide, the left margin is 180 pixels wide . . . click on the following images to enlarge (only unused concept images are shown here)

 

 

The basic premise if I've lost you: The blog template code was written and tested, then once a stable left column layout of 800 pixel width was developed, it became the basis for all future templates. The concept image, such as what you see above, is then cut up and the image pieces are dropped into the code. You have to use a bit of imagination to envision what any of these plain looking images will look like when they are in a template with the usual finishing touches and body background.  

[Gomeza]

This is what I understand you are looking for: HERE . . Where you see these types of symbols <$ . . . they are remote call variables. In basic terms: you as a blogger input information when you post a comment or blog which goes to a data base. The remote call variable calls this information from the data base and displays it on the web page where the code for the remote call variable has been placed.

When looking at the template, appreciate that it is an initial draft and will be tweaked and customized further.

[Gomeza]

The finished template is HERE . . . to utilize this template on Blogit is very simple. Go to the text version of this file HERE . . select and copy the code in its entirety, drop it into a blank Notepad type of file and save. Then navigate to your Blogit blog code field box, select and cut the code that is there and drop it into a Notepad type of file for temporary safekeeping. Then drop the blog template code into the now empty fieldbox and save. If all works as intended, you can now delete the temporary file of the original blog code.

You may ask why you bothered to save the original blog code temporarily? Now that you are using a template for your blog, you are entering the next level of computer efficiency and general literacy. Always save any file you are about to completely overwrite to a temp file as a means of restoring it if necessary.

Some blog template use pointers: Templates look nice but there are a few things to remember when using them. The content area is 620 pixels wide, ideally images placed in the content area should be less than this (580 pixels wide is a good number) . . . also avoid blog titles or use of the keyboard that do not have breaks in them such as: ~~~~~~~~~~~~~~~~~~~~ or things like this. Blog titles will wrap left at word breaks and have the same length limit as the Blogit interface. So keep in mind that both an oversized image and an unbroken string of characters will distort the template.

[Blogsam]

Where are they served from and how do I save them? Is there anything else I need to know about these images?

[Gomeza]

The images in your template are served by Imageshack.us . . . there are other sites that do this such as Photobucket but I have come to like Imageshack. I have used them from the day they first started and have watched them grow into a first rate free image host.

There is a small caveate about free image hosts that I must mention however; upon ocassion the links to your images will be broken and they will no longer be served. It is important to go through the following short excercise, because there will come a time when you must replace one or more of the images for your blog template.

The exercise: Open your blog template code file in Notepad or a similar type of text editor (never use a Word processor such as Microsoft Word for code). Find the control key on the bottom left of your keyboard "ctrl" and press ctrl and the "F" letter key at the same time. You will notice a little fieldbox pop up, F in this case stands for find. Copy and past the following characters into the Find fieldbox. http://img . . . . continue to click on the "Next" button of the Find fieldbox, this will take you to every image URL in your template code.

Open a second Notepad page and as you progress through the code finding the URLs to your images, copy and paste each entire URL into the second Notepad page. It is important here to save only the image URL and not any brackets, quotation marks or anything else they may be encapsulated in.
Example: http://img405.imageshack.us/img405/615/sidetitlebg.jpg

Once you have done this, you can now take each image URL, drop them one by one into your browser address bar and save the images right from the image host's web server. To save, simply right click on the image and chose "save picture as" . . . this could be done right from the template on Blogit but the point of the exercise is to demonstrate where the image URL code is, how to find it and how to replace it if you have to down the road.

 

[Gomeza]

One thing I've always enjoyed about making templates for blogs is that like all web pages, nothing is permanent, anything can be changed at any time. With this thought in mind I've taken one of the concept images above and worked it into an initial draft for an old blogging buddy from Blogit. Using only the notion of keeping things subtle as the guideline for the template theme, I stuck to grey tones. This at least will give a good idea of the layout and how the overall presentation will look. It is ready to go at this point but also can be enhanced much further . . . take a quick look: HERE

Colors if desired, can easily be introduced via the blog title font, the website background image, the header city skyline image, side title back ground or just about anywhere for that matter.

[Blogwiley]

Gomeza,

Fantastic is all I can say about it. The only one thing I would ask~but I love it as it is~ would be to ask if the text in Wiley's Wandering Agogablog be changed to the colour red?

Of course I love the Montreal skyline, makes me homesick. LOL

Wowie, I am impressed as heck and I can't believe I've been able to follow your instructions to get this far finding stuff. Now I shall wait for instructions on how to find the code to install it when you're done.

Thanks again my friend.

Blogwiley.

[Gomeza]

I saw the word red and thought that a few quick little tweaks adding shades of red to the template would foster more ideas. This is the result: HERE

Appreciate that a great deal more can be done and by the same token, it does not have to be done right away as it can always be revisited as design ideas develop. The code for the sample page exactly as you see it at the previous link: HERE . . . all images in code file are served from ImageShack.us . . . If you have an interest in editing some of the images, I'll make a file available for download that contains all of the bits and pieces I used.

[Blogwiley]

Gomeza,

Done, wonderful you are 'da man' at this stuff. As far as I'm concerned that was just the right amount of subtle red and I can't imagine anything else to do to it.

Do I have to 'write' anything else on that template like a blod description or can I leave it alone?


Thank you so very much my friend, now what do I do?

Blogwiley

[Gomeza]

At this point it is just a matter of going to the previous post, clicking on the second link in that post and copying the code you will find there. Simply drop the code into your blog template field box on Blogit and everything will be (should be) good to go.

The blog description will be whatever you have for a description now but you may find that a quick edit is in order if the existing description does not look right in the new template.

Additionally, you can download all images and code for your template: HERE in a zipped file format. By doing so you will have all of the images handy in case one or more has to be re-inserted into the template code.

One of the risks of using a free image host is that upon ocassion a link may be broken to one or more of the images. It doesn't happen very often; as an example, in 4 years of using several templates on Blogit, I had to re-insert 2 images in total.