New changes to template at test Site

A few changes have occurred with this template design over at the Test Site. I've added a coloured navigation menu - each tab is individually coloured and on mouseover the colour changes to a different colour. This has been applied to all the tabs. The dropdown menu section has been colour coded for that particular coloured tab. It does look pretty cool, even if I say so myself.

Another change to the template is there is now a mouseover background colour for the page links in the left hand side column. It is almost identical to Facebook's in that respect.

I have also come up with a more appealing looking photo gallery and video section but at this point in time that effect can only be achieved manually. I really don't know how to add the code into the template itself, so I might have to do some research first before I try adding it to the template's xml file/code.

If curious about all the changes then go on over to the Test Site (see link below) and check out what I've done to date. http://bazaarplaces.blogspot.com/

Original faceblog test site

I have begun testing the xml file for this template on another one of my blogs and so far so good. The url for the test site is http://bazaarplaces.blogspot.com/ I have solved the problem with the missing body background image, and well, the missing content for the recent comments widgets seems to just be tempermental. Sometimes it will show up, other times it is missing. I am trying to relocate the css and javascript code for another recent comments widget to replace the existing Blogger's recent comments widget. I want everything to work properly, all the time.

Go the above-mentioned test site (blog) to see the progress I'm making with the changes to the original faceblog template. It should be ready in a day or two, if I don't get any interruptions.

OH WTF IS WRONG NOW!

I have found an even more serious problem than I ever thought imagineable with this template. I have uploaded this xml template file to another one of my blogs, and whenever I go to the edit HTML tab and just look around, then click on view blog I am taken straight back to this blog. The whole file seems to be corrupted or is malfunctioning and will not connect properly.

The problem I just mentioned is solved, I believed. I realized just then I forgot to change my profile id numbers. Jeez I'm stupid. But it does not solve the problems of the missing recent comments widget contents nor the body background not displaying. Further investigation is needed.

TESTERS NEEDED

This is what this blog (at the top) should look like!

Every now and then I come to this blog and there always seems to be a problem with something not displaying. Currently two things have refused to show up:

1. The dark blue background colour which is visible in the screenshot above, that is at the very top of the image (behind the word "faceblog" - top left hand corner is refusing to display.

2. The "Blogger's own recent comments" widget, which is in the left hand column, is not showing any comments or any kind of contents.

If any visitors to this blog can check to see if these two items are displayed on their computer's browser - and leave a comment attached to this post. I need to know if there is something wrong with my computer, or if this problem is occurring with other people's web browsers too. I have tested this on 3 different computers and they are not showing up on any of the three computers.

Someone please help.

A new version coming soon

Over the passed few days I have come up with a better way for the photo albums to be displayed which will mean that anybody who uses the new version of this template design will have less hassles and it will be a lot simpler to use. As a result I will be redesigning this template to accommodate these new changes. I am hoping to also improve upon the general look of this design and perhaps add a "read more" function to all the posts.

I am also going to redesign the "My Blogger.com Friends" list widget, so users of this template don't have to do so much hard work. I probably should have done all this beforehand, before I made this template available to download. Its too late for regrets now!

Soon I will make a live-demo available for the new version of this template design.

Blogger keeps crashing on me.

I wish I knew what was going on with Blogger. It keeps logging me off every time I do something. I can't even edit the Faceblog Help section or add any comments on someone else's blog. It is really peeving me off right now, and this has been happening for more than a week. So, how am I supposed to do anything on Blogger when it keeps crashing on me? I may never know. Only a few things work on blogger at the moment, and adding a new post seems to be one of them, but there's a 50-50 chance this post may refuse to publish as well.

Please read the faceblog Help page

If you decide to add this template to your own blog the first thing you must remember is when you upload it to your blog it will look nothing like this live-demo. My brother was very disappointed when he uploaded this template to his blog last night but he didn't understand at the time that he needed to do a bit of hard work in order to make it look like the live-demo. I gave him a helping hand because I could but I cannot do that with everyone, as much as I would love to.

As such it is important that you read the faceblog Help page in order to understand what you need to do to your blog to make it look like this live-demo. Without that knowledge you will probably delete the template and replace it with something else. But I ask you, if you really want this template on your blog, are you willing to put in the time to work on your blog to make it look like this blog? I hope you say yes because it will be worth it in the end.

Now you may be asking yourself how much time needs to be spent working on your blog to make it look like the live-demo version? That entirely depends upon how good you are at following instructions and able to keep focused on the tasks at hand. It should not take you any more than a few days, in reality, to get your blog looking like this one. But that is not a guarantee because we all make mistakes, and some of us may not have a lot of time on their hands all the time to do this. But persistance is the key here.

The very first thing you must remember with uploading this template is you need to add your blog's id number into the template in order to access the "Design" and "New Post" tabs/links. You need to do this by accessing the Design page and getting your blog's id number which is located in the web browser's address bar. If you don't do this and you click on either tab you will be asked to log into blogger every single time.

The work you need to do to your blog is really not all that hard. In fact it is quite easy actually. There are just little tasks to be done here and there. The tasks to be done first are the most important ones, which I will lay out here:

1. You need to add your blog's id number in two different links.
2. You then need to rearrange your widgets in your "Design" page and delete any broken or empty widgets.
3. You need to add your own profile image/s into a HTML/Javascript widget then link your "View my complete profile" page to the onmouseover image of that widget.
4. Then you delete your "About me" widget because you no longer need it and because it will look messy and unreadable.
5. Next you need to add your profile image (or a image) to be displayed next to each post to the template.
6. Then you begin to change my urls to your urls in the template, just below the header.
7. Now you can add the "Pages widget" to your blog and add your url's to it, keeping the list simple if that is your desire.
8. Next you add a Blogroll widget to your blog if you do not already have one. If you have one uncheck the "icons" option and check the option for having a snippet of information about the posts.
9. Now you begin to add the "My Blogger.com Friends" widget and content in the left hand column.

By the time you have done all of this your blog will be looking fantastic. I guarantee it! You will be really proud of yourself too because it will mean your blog is starting to look like your own with all your own stuff on it and not mine. There is nothing worse than having downloaded a template only to have someone else's stuff on your blog. But I intentionally leave my stuff on some of it so you can easily find the urls in the template itself. I believe it is easier to see a url that has http://originalfaceblog.blogspot.com/ in it than trying to look for a # symbol. A complete url is much more noticeable than a # symbol, don't you think?

So, what happens next? Well, the next two steps are easy.

10. Now add the "Recent Comments" widget in the basic list in Blogger.
11. Then add the "Facebook Comments app".

This will then have your homepage looking almost complete. And now for the harder work - the photo album page and the individual photo albums.

12. Create a static page for your "Photos" (or photo albums) page. This page will display only one image from each album that you create. No images need to be added at this point. Then publish the page with a bit of text added (like for example "add albums images here").

13. Then create a New Post and predate it, and add some images to it. Then publish the page.

Once you have begun creating individual Photo albums you then have to add one of the photos from each album and add it to the photo albums page (which is the page simply called "Photos"). You also have to get the url of each album page and also add it to the corresponding image of the photo you added in the photo album page.

Then you select one image from one album and replace one of my five images (below the header) with your own - repeating the entire thing again with the corresponding url to be added to the image below the header.

The whole process repeats itself when you create new albums. You need select only five albums to be displayed below your header, and these can be changed (manually) at any given time if that is your desire.

There are only three more steps to go...

14. When you add photos to an individual album that is when you add the Lightbox image viewer code to each photo.

15. Create a page to display all your videos in the same manner as the photos. It is better not to create a video gallery page (or a video albums page) for them because videos are not clickable like images are. However you can a video albums page if you take a screenshot of a video from each album and link each screenshot image to each video album.

16. Lastly, you create an "Info" page.

And there you have it. A completely unique looking original faceblog template that is your own in 16 steps. Adding videos and photos to albums will be an ongoing process so you will need to remember how to link everything and how to align the images, etc. This must become a long term memory skill for you but if you have a poor memory the information will always be readily available in the faceblog help page on this live-demo.

Each and every step of these 16 steps will be covered in great detail in the faceblog Help page on this blog. You will find all the information you need on that page to achieve every single step and to make you blog look identical to the live-demo. So, what are you waiting for?

Original faceblog template design finished

The main task of completing this template design is over, for this template is now finished. Now I have the huge task of writing up tutorials for adding all the widgets, editing links on this template, etc. It is a huge task and one that will take about a week to complete. So please check out the faceblog help page for all the tutorials on how to customize this template for your own use.

family and friends

UFOs

This template looks fine to me

After much consideration I am quite happy with the look of this template. A lot of the problems have now been sorted out with it and it is available for transfering to my brother's blog, with the exception of the hover link in the pages navigation menu above the posts. I should fix that first though, and get it back in alignment. I have no idea how this template looks on someone else's computer. Can someone please tell me what it looks like or if anything is out of alignment so I can fix it?

Wrench and edit post icons hidden - Don't ask me how I did it.

In trying to improve the overall look of this template I managed to hide the wrench icon and the edit post icon without knowing how I did it. It started when I was trying to manually move the post footer codes for the timestamp and date to be displayed next to each other in the template code itself. This has got me stumped because I was not trying to hide those icons. Actually, I had completely forgotten about the section in the "Design" tab where you can quickly move the post footer functions about (in the "edit post" section on that page). If you are logged into your Blogger account you will not see and wrench icons or any edit post icons at all.

Because the wrench and edit post icons are not displayed it does not seem to interfere with the actual ability to edit the widgets and posts. In order to edit them you have to either go to the "Design" tab or the "Edit posts" tab and edit the widgets or post/s from there.

Vertical image alignment problems

I am so peeved off at the moment with creating these damned "Friends" list. Nothing I do seems to align each image underneath each other. I've tried various different codes and nothing is working. I need to get this problem fixed so I can impliment it in the right hand column for the "Blogs I'm following" section I want to add as a widget. This template is becoming a nightmare!

Double profile images

Adding two images for the profile icon in the top left hand column. Need the urls first but you will see what I do with them soon enough. I had to resize these two images to be the exact same size for the effect to be just right.

This is just weird

Now how weird is this? I just added the standard "Recent Comments" widget and the translate widget showed up!

Damned translate widget!!!

After everything I've done the f***ing translate widget won't display (in Internet Explorer). What the hell is wrong with this stupid template? I've deleted everything possible that I think was interferring with the translate code but still it won't display. I've even cleaned my registry, cache, cookies, etc, twice but it still won't display. I'm about ready to terminate this stupid template. The widget displays in Google Chrome which really shits me off, as it should be displaying in Internet Explorer as well.

I think I need a break from this template.

Today's alterations to this blog template.

It doesn't look like anything has been done to this blog at all, really. But if you take a closer look there have been some minor changes made. The "Share" link in the post footer that was identical to the one at the top of the blog, is now altered so it only posts straight to Facebook once you click on it. I got rid of the accordion widget which turned out was interferring with the Lightbox window codes preventing the Lightbox windows from displaying.  

By doing that the preview badge now displays and everything seems to be back to normal. I mostly have altered some of the links and tidied up the look of the posts' footer section. I also added some code for two headings, heading 5 and heading 6, which is visible on my "Info" page.

Currently I'm coming up with new ideas, with the help of my brother, Daniel, on what to shove in the right hand column. I still need to work on the post footer, add some line spacing to the side column widgets, find a better way to add pictures to this blog without having to add table codes all the time, and then do some more tidying up of the blog, etc. Now I need sleep.

499 posts to display

I've altered the number of posts to be displayed on the hompage to 499. Its the largest number I can go up to. As long as long posts are not written the number of posts to be displayed should be used up rather quickly. Hopefully!

Well, it'll be a challenge anyway.

Too many problems with this template

Oh dear, it looks like more and more problems are arising within this template the more I attempt to do anything with it. The post footer section is a big concern for me at the moment, as I have just discovered that if you hover the mouse arrow over the comments link nothing happens. However, when you hover over the share link, which is to the left of the comments link the comments link is underlined. So, it looks like all the links in the post footer section are out of alignmnet, and the edit post icon has also disappeared along with the wrench icon for all the widgets. This was not intentional but it is annoying me because now I have to fix the problem somehow.

Other current problems with this template are when I preview a post or a page the preview badge that is displayed in the top left hand corner has permanently disappeared. That problem may have something to do with the table codes added for all the photo albums (page) and individual photo albums. But then again it might have something to do with the accordion widget section in the right hand sidebar.

I do know that Blogger does not seem to like tables because the moment you add a table to a post (to create a photo album for example) the "Compose" tab instantly malfunctions and refuses to work. But the preview mode and the publish post (or page) function works fine. You can still add photos in the "edit html" section of the edit posts or edit page section, so that might be a small sacrifice one has to pay for using tables on Blogger.

I found that by using a table to align all the photos is the best solution that I could come up with. Using the image aligner within the edit post or edit page section does not always align the images to how you want them to be displayed. And after two years of trying to figure out how to align images in Blogger I still cannot figure out how to align images (without using other codes) in vertical columns and rows. Its just not that easy for me to figure it out.

Profile image now added to posts

After much dilema I now have the profile image added to each post. It was not easy to add it but I found a location in the template where it fitted in nicely and then just moved the posts' margin up to match the top of the profile image. The image is 50px wide by 50px high.

This template has become the most worked on template by me, and the most complicated one I've ever worked on. But so far it looks great even though it still needs a lot more work done to it, and the FAQ section still needs writing up.

I do not believe I can create a template that looks exactly like Facebook's layout. But this template will be something very similiar to it. How much more time will be spent on this template is uncertain but one day it will get finished. Until then I'd better get back to work and do some more to this template.

Faceblog albums difficult to impliment here

I never thought I would have so much trouble aligning photos into rows and columns until I tried doing it here. It is a frigging nightmare trying to get 3 photos lined up in a row, let alone make 3 columns for additional photos to be added. I am about sick to death of doing this for no-one to really appreciate what I am trying to do here.

Yes, I am whinging but I have every right
to do so. I have visitors coming to my http://ufodesigns.blogspot.com blog and sure they download a UFO template or two, but no-one has ever said thank you or you are doing a great job, or anything at all for that matter. What is a girl supposed to do when there is no feedback?

I think I might have a break from the photo album sections for the time being and work on something else for now. I might try and somehow realign the top of this template so it looks the same on Internet Explorer, Google Chrome, and Firefox web browsers. This screwed up look has been bothering me for weeks, and there still is no solution to the problem.

Photo album and individual album pages now added to this blog

Being left to my own devices I have had a ball today creating a near identical (to Facebook) photos section for this blog. However, there still are a few issues that I still need to work out, and to delete all the existing photos except for one, because they are too large even for my computer's screen resolution size.

In order to create a Facebook look alike photo gallery section some manual work needs to be done to each photo added and to each new page added. I have been working on this template for the last 8 hours almost and finally showed my brother, Daniel, the end result of my hard work. He is, to say the least, impressed with what I've achieved so far with the photos section. I tried explaining how it all works to him but he said he needs a tutorial for it to help him understand what I told him.

What do I look like? A walking encyclopedia or something? Daniel apparently thinks so! The good thing about all of this is I will be adding the Lightbox Window Overlay, if that is what it is called, to most future UFO templates I make for Blogger users. That should be a load of fun to do actually.

This template, despite the nightmare of the alignment of the top most part of this blog on other web browsers, has become for me nothing but a fun thing to do. I am enjoying every single moment of this template's creation and have been excited when things work out perfectly for me. I will have to wonder now what tomorrow will bring because now I have to go to bed.

Multitabbed widget removed but Light Box problem now arisen

In an unfortunate decision I have removed the multi-tabbed widget from the right side column because the Light Box Image Viewer code interferes with that widget and prevents it from functioning. I had to decide which feature I wanted the most, although I would prefer to have both. But I can't, not at this point in time anyway. Well, not until I become more familiar with both lots of code and become more experienced with them both.

So, I am keeping the Light Box Image Viewer feature on this blog / template. I have checked out this blog in Google Chrome, and to my horror the image of myself in my previous post will not close when clicked on. I had to go back a page to close the Light Box Image Viewer down. So, it looks like the problem here is, the size of the image in the Image Viewer determines whether the close function will work or not. The other two images, from the previous post, had no problems with closing in Google Chrome, which is a good sign. I only need to set a maximum width and height for all photos/images in the Image Viewer and it should work perfectly again. I did not have this problem with Firefox at all.

When doing things like adding new features to any of my blogs' templates, I spend more time trying to get it to work on all 3 web browsers (Internet Explorer 7, Google Chrome, and Firefox) than anything else. It is so time consuming but it is worth it in the end. And depending upon the nature of the problem it could take me an hour or several days to fix the problem. As I've said elsewhere, I am not a computer geek, and not very educated with HTML, javascript, or css codes. But I know enough to make things work on Blogger and I can usually solve most problems that arise.

As I have labelled my own career - if I had to pick one - I'm a Blogger template designer. It is my speciality, so it seems. I spend probably too much time creating new templates, and it isn't an easy thing to do really. I especially love making UFO templates, and already have made 4 different looking ones, and anyone can download them for free and use them on their own blog/s. Its funny but people have decided to download my templates but whether they have used them or not on their own blog is another story. No-one has said anything to me about having used them on their own blog/s. I guess I will never know really.

Anyway, I'm hoping to sort out this problem with the larger images in Google Chrome in the next 24 hours. It shouldn't take that long really.

Testing Light Box Image Viewer function

This is a photo of myself. I have read that you first add the javascript code to your template, save it, then add the appropriate code to each image you want displayed in a Light Box Image Viewer. So, I will be adding the code to this image of myself whilst still editing this blog post. You add the code in the "Edit HTML" section to the photo's code that you just uploaded.

So, here goes nothing!

Well, it works. This photo when clicked on is a pretty huge photo - you actually have to scroll to view it all. All the code I added to the photo was

rel="lightbox" title="Your image Caption" and I added it just before the image border code and had to add a space after the previous lot of code. The important thing to remember is to not delete any code in the code for the image itself. I'll add a pic below which I copied off the original website to show where the code goes.

In Image 1 (left image) I followed the instructions as per required but I did not do the instructions for image 2 because that particular code was not visible in my "Edit HTML" section of the photo I uploaded.

Faceblog's newest feature

I just added a multi-tabbed widget in the right sidebar for displaying videos, labels and the blog archive. I always wanted to try and do this and I have finally succeeded at adding this neat little function. Now I can rest knowing I have actually achieved something worthwhile.

These posts are getting as short as Facebook's posts. I guess there isn't much to talk about these days.

The Original faceblog template

This Blogger template design is created entirely by me but was originally for my brother, Daniel. He decided on some changes for how he wanted the template to look but I decided to place the original design that I was working on, on one of my other blogs (this blog). I like this original design over the changes that Daniel wanted. I will be working on both design styles to see which one will look better.

I really want to do a lot of things to this template, and I just want to be left to create  my own faceblog theme, even though my brother does have some really good ideas. I want this template design to be my own idea with my own suggestions for features and its layout.

The other faceblog template design is over at http://faceblogtemplate.blogspot.com/