Edit Profile
This has to be the most complicated template design I have ever created. It has taken me a few months to get it looking like it does, and at this point in time, only I know how I achieved that effect. Every aspect of this template is a piece of art, and is detailed in what it will display. As a request by my brother Daniel I have decided to create a "Faceblog Help" page, because he does not have a very good memory when it comes to remembering css, html, and javascript codes. He has very little experience and knowledge of this area on Blogger. Doing any kind of alterations is a big ordeal for him, as it would be for other people on Blogger too. And there are going to be lots of people who do not know how to do any editing with this template, should they choose to use this template on their own blog.
I hope that I can make it perfectly clear what one must do to customize this template. There are a lot of areas that need to be covered in this Help section, which you will need to edit yourself. Editing this template will probably be an ongoing thing so one must never forget how to edit anything on this template. I will also add some video tutorials wherever I can in the appropriate sections which will make it easier to understand how to edit something.
Below I will discuss the 16 steps to complete the overall look of your new design to make it look identical to this live-demo. At the end I will answer other questions that may arise.
THE 16 STEPS:
1. You need to add your blog's id number in two different links.
2. You 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. Delete your "About me" widget.
5. Next you need to add your profile image (or a image) to be displayed next to each post to the template.
6. Then 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. Add a Blogroll widget to your blog if you do not already have one.
9. Add the "My Blogger.com Friends" widget and content in the left hand column.
10. Add the "Recent Comments" widget in the basic list in Blogger.
11. Add the "Facebook Comments app".
12. Create a static page for your "Photos" (or photo albums) page.
13. Create a New Post, predate it and add some images to it.
14. Adding the Lightbox image viewer code to each photo.
15. Create a page to display all your videos in the same manner as the photos.
16. Creating an "Info" (or Information) page.
STEP 1. Editing the "Design" and "New Post" tabs.
One of the very first things you will need to do is to add your unique Blogger id number to the "Design" and "New Post" tabs in the navigation menu. Without adding your Blogger id number you will not be able to access the pages that the "Design" tab and "New Post" tabs are on, well not in a hurry anyway. Don't worry, it is not that difficult at all.
Below is a video tutorial I created using another blog as an example. The video tutorial is a bit long but explains everything you need to do. In the video, the "Design" and "New Post" tabs are identified by a different name, but in the faceblog template the location of the "Design" and "New Post" tabs are basically in the same location - above the header. When editing your faceblog template look for the same links in the HTML section of the faceblog template. There is only ONE "Design" link and ONE "New Post" link in the entire faceblog template, in the HTML section of the template so you really can't miss locating them.
Back to top
STEP 2. Rearranging your widgets and deleting any broken or empty widgets.
It is extremely important that you tidy up your blog after uploading this template to your blog. When it is first uploaded to your blog you will find all your widgets are scattered everywhere in a random manner. Having widgets placed anywhere on your blog will make your blog look messy and unorganized. Like Facebook, this blog has special places for each widget to be added afterward and to keep your blog looking like Facebook's site you need to place widgets in certain locations on your blog. For example, the Pages, the Page List, recent comments, link lists, My Blogger.com Friends, Labels, and Blog Archive widgets and anything similiar must (or should) go in the left hand sidebar. On the right hand side should be the Blogroll, Facebook Comments and any Advertising widgets that you care to add there.
There will be some widgets, initially, that fail to work after uploading this template to your blog. I don't know why this happens but the only solution I know of is to completely remove those widgets and replace them with fresh copies from wherever you got them from.
Back to top
STEP 3. How to I add your own profile images into a HTML/Javascript widget then link your "View my complete profile" page to the onmouseover image of that widget.With this template the profile image, which on mouseover displays a second image, is in fact a widget. For some strange reason the profile images on mouseover code will not display if you put the code into the template itself. So this code must be added to a HTML/Javascript widget and placed at the top of the left hand side sidebar column. So, go to the design page and click on "add a gadget" then select the "HTML/Javascript" widget in the basic list. Then add the code below to that widget.
In the code above there are 2 images but one of the image's urls is displayed twice (I've highlighted it in blue). The image url that is repeated twice is for the image that will be displayed on your blog when the blog first loads. Meaning = the very first image to be displayed and viewed on your blog is at the bottom of all the code. The image that will appear only on mouseover is placed at the top of all the code, and the url for that image only appears once in the code. It took me a while to figure this out but if you remember it this way (the urls go in order from bottom to top in the code as oppossed to visually on your blog it goes from top to bottom) you should understand it better.
The downfall to this widget is you need two images for your profile image to be of the exact size. The width for each image must be exactly 135px. However, you can make the image to be of any height. Mine are 80px in height but as I said you do not have to have the exact same height as mine.
To resize your profile images online go to http://www.resize.it/ then click on the "Advanced tools" icon on the right side of the page. Select the profile image you want by clicking on the browse button, then type in the height and width of the image you want it converted to. Then tick the "Convert the image to" box and select "jpg" then click on "okay". Once the next page loads save the image to your computer. Don't forget though, in order to save it successfully right click on the image on the outside of the faded area (the cropping tool square that is on the left hand side of the image). Then click on the "here" link to go back and repeat the process with a new image. I use that website all the time and I thoroughly recommend it. It is free to use and you do not need to register to use their website and it only takes a few moments of your time.
Once you have two images that you want to add to your profile image widget you can do one of two things. Firstly you can either host the images on a site like Flickr, Imageshack, etc then copy the url for each image and place them in the code above in your HTML/Javascript widget, or you can upload them straight to Blogger as images for a new post. If you add them to Blogger in a new post you need to publish the post before you can grab the urls.
However, if you only want one image as a profile image then please scroll down and read the information I have provided in the question: I only want one profile image. How can I do that? Please refer to OTHER PROFILE IMAGE OPTIONS SECTION
Back to top
STEP 4. Delete your "About me" widget.
Back to top
STEP 5. Next you need to add your profile image (or a image) to be displayed next to each post to the template.Back to top
STEP 6. Then change my urls to your urls in the template, just below the header.Back to top
STEP 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.
The Pages widget is designed to contain your most important links to your blog. A lot of people may only have a few main pages but others may have 10 or more main pages and not all of those main pages will be static pages.
The Pages widget, which goes directly below your profile image in the left hand sidebar column, is made by using a table, some images and some urls. The table itself has been split into two columns in order to host an image on the left and a url on the right. There are 7 different image icons within the Pages widget, which I have displayed in blue. This Pages widget can be customized to your own needs and even more icons and urls can be added to the list, if needed.
Below is the code for the entire Pages widget, which is simply placed into a HTML/Javascript widget in your blogger's Design page. It is to be placed at the second to top on the left hand side of your template layout, as displayed on the live-demo - your profile image widget being the very top widget in the list..
Copy and paste the entire code above into a HTML/Javascript widget and save it.
So, let's edit the code to customize it to your own needs.... Firstly, I have placed all my own urls in this code rather than adding a # symbol. This is so you will know what the entire urls will look like once placed within the table code. Each one of my urls must be changed to your own urls. You must create a page for each link within the Page widget, in order to add it to the list. It is that simple. Once you have created your own page (whether it be a static page or a New Post page, publish it and then view it. Then at the top of your web browser will be a url displayed for that web page. Highlight that url then copy it. Then go to your Pages widget, click on the edit function for that widget, and paste the url into the appropriate area of the table. But don't forget to delete my url before you save it.
What does one row look like in the table code above? I'm glad you asked. One row of code looks like this:
<tr><td align="left"><img src="http://img151.imageshack.us/img151/815/notesicon.gif" width="16" height="18" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/notes.html">Notes</a></td></tr>
Each and every row within the table (or the code for the widget itself) starts with <tr> and ends with </tr>. And each row has two columns with each one starting with a <td align="left"> and ends with a </td>. So, in the left column of each row is an image, and in the right column of each row is a url. That's basically all you have to remember.
If you want to add more rows to the table (more urls with matching image icons) you simply add a new row of code for every url you want to add to the Page widget. Each new url you add to the list, the entire individual row of code (starting with <tr> and ending with </tr>) must be placed just after a closing tr code = </tr>. To give you an example, three newly added rows (of code) which are in red will look like this:
NOTE FOR ABOVE CODE: THIS IS ONLY THE BOTTOM HALF OF THE ENTIRE CODE. IT IS NOT THE COMPLETE CODE FOR THE ENTIRE WIDGET. Now because the three new pages have not been created yet, in reality, you simply delete the entire url for each link and replace it with a hash symbol ( # ). Once you have created a page for each new page on your list, you replace the hash symbol ( # ) with the url of the page after it has been published. The text for each link can be altered (reworded) to display anything. Therefore, you are not limited to what links you can add in the Pages widget. You can also add links not only to static pages but to normal blog post pages as well.
If you want to add your own image icons feel free to do so. All that you do is find an image that you like on the internet, then right click on it. A computer pop-up window will open and near the bottom the words "URL Address" will be displayed along with an actual url of the image. In most cases this will work but it entirely depends upon the website itself, as to whether this function has been blocked or not. Simply highlight the url. You might need to scroll down a bit to highlight the entire url for the image. Then right click on the highlighted url and select "copy". Paste the url into the appropriate row of the table between the two " " of the img src code. They are written in blue in the entire code for the Pages widget at the top of this section.
NOTE: To delete my urls simply replace my urls with a hash symbol ( # ) making sure you do not delete the " " symbols. By replacing my urls with the hash # symbol you are just making the link inactive. Don't forget to save your changes afterward.
FOOTNOTE: Make sure the > symbols are next to the </tr> so that it doesn't look like this: </tr > There must be no spaces displayed with the opening or closing elements of the code. If there is a space simply delete the space, otherwise the entire Page widget alignment may not display properly.
Back to top
STEP 8. Add a Blogroll widget to your blog if you do not already have one.
Back to top
STEP 9. Add the "My Blogger.com Friends" widget and content in the left hand column.
Back to top
STEP 10. Add the "Recent Comments" widget in the basic list in Blogger.
Back to top
STEP 11. Add the "Facebook Comments app".
Back to top
STEP 12. Create a static page for your "Photos" (or photo albums) page.
Creating a photo album page was not the easiest thing for me to do as there were a lot of problems surrounding it's creation. I began using a standard table along with its code and everything was going okay until the table code eventually crashed the "edit post" and "edit page" sections. It eventually refused to load the edit page with close to 100 images on it. This meant I could not even edit the damned page let alone add any new images to it. I had to start all over again. So I had to invent a new way of displaying more than 100 images on a page, that gave it the same look and feel as a table, that also didn't interfere with Blogger's ability to load the "edit post" or "edit page" functions. Eventually I rediscovered a simple solution, and it does not involve any table code whatsoever. So, what was the solution?HERE
I simply added these few lines of code into the "edit page" tab, in the "Edit HTML" section:
Simple enough, isn't it? But, the above code needs more added to it that just these few lines of code. The images need to be added too. And this is where the hard work begins!
Create a page for you photo albumsThe first thing you need to do is go to the "Edit pages" section and click on the button that says "New Page". Give your new page a title and then copy and paste the following code into the "Edit HTML" section:
Now put the closing div ( </div> ) on a new line with a gap in between them and move the mouse cursor back up to that empty line. The idea is to create a blank line between the opening and closing div codes. Then click on the "Photos" icon and select an image from your computer or from somewhere else (e.g. your blog's web album). When the image has been uploaded click on the "Add" button.
Now, with the image now added to your page it will contain it's own opening and closing divs. You need to delete those opening and closing divs which will look like this, which is in pink:
Now repeat this process two more time for two more images, making sure the opening and closing divs that come with each image are deleted. Now for the extra hard part... aligning the images to be displayed in a row.
Once you have added three images to the first lot of code, the final changes will look something like the code below. The code below is taken from the "edit" section of my first row of photo album images that is displayed on this live-demo.
Now, you have to remember something here, that not every image uploaded will contain the exact same code for the image as the next image to be uploaded. Each image will vary slightly with it's code. Sometimes more code will be added, and sometimes less code will be added. If you keep that in mind you will become familiar with how the image codes will be displayed on your computer and your version of Blogger - if there is such a thing.
IMPORTANT:
How to align the images in a row:The next thing you need to do is to make the three images align so they are all in a row, all side by side. This is the really tricky part because it can take some time to achieve when creating your first photo albums page (or additional individual photo albums that are separate to this page for that matter). Basically all that you do is remove any spacing between the closing </a> and the opening <a href=" lots of code. The codes will look like this </a><a href=" with the spacing removed. You need to remove the spacing between the first image's closing </a> tag and the second images opening <a href=" tag. Then you need to remove the spacing between the closing </a> tag of the second image and the opening <a href=" tag of the third image. By removing the spaces the images automatically line up next to each other.
Once you have done that preview the page. Hopefully the images will be in a row, displayed side by side next to each other. Sometimes images will not align properly using this method, so additional code must be added to the codes of each image. In the link below that I have provided as a working example of this code, with over 100 images on it, as some of the images refused to align. So I am going to give an example of the actual code of one image on that blog:
Before you do anything else some changes need to be made to the codes of the images. Firstly you need to check if each image contains a "height" and a "width". If it doesn't then you need to add the code for it. Look at the code above and you will notice that I have written some of the code in red. You need to make 3 lots of changes for every image added. The first change is to it's "height". Change the height of the image to 125px. Then change the width of the image to 130px. Finally, you have to add the title code, which looks like this: title="colourful". If you don't make these changes the images will be too large to be placed in a row, and they will be displayed in a vertical row underneath each other. This has to be done to each and every image you add to your photo album page (as well as to each individual photo album you create).
To make the images align properly I added the code which is displayed in a bold red colour. Once this additional code was added, it also had to be added to the other two images on the same row, and in the same location within the code, for it to work properly. The final result is all the images aligned properly side by side, in columns and rows.
How to add two or more rows of photos:Okay, I have shown you how to add one row of 3 photos all next to each other. Now, to add more rows you simply repeat the process as I just mentioned above.. So, a second row of photos added, the code would look like this:
Every group of three images in a row that you want to add, you simply add after a line space:
<div style="border-bottom: #333333 0px solid; border-left: #333333 0px solid; border-right: #333333 0px solid; border-top: #333333 0px solid;"></div>
place the images within the div opening and closing tags, remove the additional opening and closing div tags, change the height, width, and add the title code and the alignment codes if necessary, then remove the spacing between the opening and closing <a href=" </a> tags and you are done. It couldn't get any easier than that.
As I have said, this simple few lines of code can be repeated multiple times. The only downfall to this method is it takes blogger about 5-10 seconds to preview a post or page with over 100 images on it using this method. That is the only problem I have found to date with the code but it could have something to do with the large number of images to load in the preview mode.
Anyway, if you are interested in seeing a working live-demo of this exact same code, with over 100 images in a photo gallery, it can be viewed here
Back to top
STEP 13. Create a New Post, predate it and add some images to it.
Back to top
STEP 14. Adding the Lightbox image viewer code to each photo.
Back to top
STEP 15. Create a page to display all your videos in the same manner as the photos.
Back to top
STEP 16. Creating an "Info" (or Information) page.
Back to top
How and where do I log out of Blogger?To log out of Blogger you simply click on either the "Design" tab or the "New Post" tabs then click on the "Log out" link that will be displayed in the top right hand corner of the next page that loads.
Sometimes this does not work and you do not get logged out. So, should that happen, simply click on the "My Account" link at the top of your "Dashboard" page and log out via that link.
Back to top
Why is there no Blogger Navigation menu on this template?The Blogger navigation menu bar is absent from this template because it cluttered up the look of the template design. And with the "Log in", "Design" and "New Post" tabs at the top of this template it simply is not needed.
Back to top
What are some things that might go wrong with this template when customizing it?One of the first noticeable differences with this template is Internet Explorer does not display the edit post and wrench icons. However, on Google Chrome these icons are displayed when logged into one's blog. Why this has occurred I do not know. It is worth mentioning here anyway.
The main things that basically will go wrong when customizing your blog to your own needs are some things will stop working. For example, let's say you add some animated gifs to your blog and you also have the "Facebook Comments" app on your blog (within a widget). It seems, with this template, the more animated gifs you have on your blog the less likely the "Facebook Comments" app will refuse to load. So, if you avoid adding animated gifs, or resize them so that they are small, the Facebook Comments app should load properly.
Another thing that will go wrong at some point is the images you add to your photo albums or to a photo gallery page will refuse to align properly. This happens to everyone, and it can be easily fixed. Please refer to the question about adding images in columns and rows to this template, for more information.
There are literally numerous things that could go wrong with this template actually. But it all depends upon how much knowledge you have of css and html and javascript code, as to whether you can fix the problems or not. I have been working on Blogger templates for a few years now, and really, it is not all that difficult to fix a problem on Blogger. With my expertise you should be able to solve any problem that may arise rather quickly.
Back to top
Do I have to leave the "credit links" and the "Faceblog Help link" in the footer?I would prefer that you leave the credit links in the footer because it is helpful to know where you got this template from, and if you need to, you can get the template again if it ever needs deleting.
As to the Faceblog Help link, well, I created that link so that you will have access to this FAQ page at a moment's notice should you ever need help in doing something with your template. No-one knows this template better than me, and with all my knowledge written down of this template, you too can learn how it works. Should you ever forget how to, let's say, add the right code to a photo to make it pop out into the Window overlay, the Faceblog Help link just needs to be clicked on. As time passes we all tend to forget how to do things, unless you have a photographic memory!
Having tutorials of how to add things to this template is something you will need when you first use this template on your own blog. Without the Faceblog Help link (or the tutorials) you will have a hard time figuring out how to change everything to your own links, and will not be able to reproduce the same look of your blog as I have. For example, you will not be able to create a "My Blogger.com Friends" widget of your own, or know how to create your own photo album gallery page or even know how to make your "info" page look like mine. You see, it has taken me quite a few months to figure some thing out, on how to make them work properly on this template. These things may be simple enough to look at (e.g. the blogger.com friends list widget) but a lot of manual work is needed to create that same look. This template is a complicated one to use, and you will need additional help to achieve the same look as this blog.
So, leaving the "Faceblog Help" link in the footer (and in the links section underneath your profile image) will benefit you until you no longer need those links anymore. You are welcome to delete the Faceblog Help links but only after you have your blog looking like mine.
Back to top
How do I change the "RSS Posts", "Post Comments" and "or email" links?
Back to top
How do I edit a blog post or page?
Back to top
Do I need a "Followers" widget with this template?
Back to top
How do I edit the footer links?
Back to top
The windows image overlay tries to load an image but won't display it. What am I doing wrong?
How do I change the "Edit Profile" link that is below the header?
OTHER PROFILE IMAGE OPTIONS SECTION
I only want one profile image. How can I do that?
Back to topIf you have any problems with this template that is not discussed in the above FAQ please leave a comment below and I will do my best to help you.
I hope that I can make it perfectly clear what one must do to customize this template. There are a lot of areas that need to be covered in this Help section, which you will need to edit yourself. Editing this template will probably be an ongoing thing so one must never forget how to edit anything on this template. I will also add some video tutorials wherever I can in the appropriate sections which will make it easier to understand how to edit something.
Below I will discuss the 16 steps to complete the overall look of your new design to make it look identical to this live-demo. At the end I will answer other questions that may arise.
THE 16 STEPS:
1. You need to add your blog's id number in two different links.
2. You 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. Delete your "About me" widget.
5. Next you need to add your profile image (or a image) to be displayed next to each post to the template.
6. Then 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. Add a Blogroll widget to your blog if you do not already have one.
9. Add the "My Blogger.com Friends" widget and content in the left hand column.
10. Add the "Recent Comments" widget in the basic list in Blogger.
11. Add the "Facebook Comments app".
12. Create a static page for your "Photos" (or photo albums) page.
13. Create a New Post, predate it and add some images to it.
14. Adding the Lightbox image viewer code to each photo.
15. Create a page to display all your videos in the same manner as the photos.
16. Creating an "Info" (or Information) page.
STEP 1. Editing the "Design" and "New Post" tabs.
One of the very first things you will need to do is to add your unique Blogger id number to the "Design" and "New Post" tabs in the navigation menu. Without adding your Blogger id number you will not be able to access the pages that the "Design" tab and "New Post" tabs are on, well not in a hurry anyway. Don't worry, it is not that difficult at all.
In the video tutorial below I will show you exactly what you need to do to get the "Design" and "New Post" tabs working, so you can use them all the time or whenever you need to use them. At the beginning of the tutorial I will show you what you already know - of what you will see when you click on the "Design" and "New Post" tabs after uploading this template to your blog. Then I will show you what to do, exactly, to display the correct pages for those two pages. I will show you exactly where you need to go to find your Blog's id number and exactly where to add the id number into the template itself. This will only take a few minutes of your time to add the right code (your blog's id numbers). If you are not exactly sure, then pause the video and reread what I wrote and compare those words with the page that is being displayed.
Below is a video tutorial I created using another blog as an example. The video tutorial is a bit long but explains everything you need to do. In the video, the "Design" and "New Post" tabs are identified by a different name, but in the faceblog template the location of the "Design" and "New Post" tabs are basically in the same location - above the header. When editing your faceblog template look for the same links in the HTML section of the faceblog template. There is only ONE "Design" link and ONE "New Post" link in the entire faceblog template, in the HTML section of the template so you really can't miss locating them.
Back to top
STEP 2. Rearranging your widgets and deleting any broken or empty widgets.
It is extremely important that you tidy up your blog after uploading this template to your blog. When it is first uploaded to your blog you will find all your widgets are scattered everywhere in a random manner. Having widgets placed anywhere on your blog will make your blog look messy and unorganized. Like Facebook, this blog has special places for each widget to be added afterward and to keep your blog looking like Facebook's site you need to place widgets in certain locations on your blog. For example, the Pages, the Page List, recent comments, link lists, My Blogger.com Friends, Labels, and Blog Archive widgets and anything similiar must (or should) go in the left hand sidebar. On the right hand side should be the Blogroll, Facebook Comments and any Advertising widgets that you care to add there.
There will be some widgets, initially, that fail to work after uploading this template to your blog. I don't know why this happens but the only solution I know of is to completely remove those widgets and replace them with fresh copies from wherever you got them from.
Back to top
STEP 3. How to I add your own profile images into a HTML/Javascript widget then link your "View my complete profile" page to the onmouseover image of that widget.With this template the profile image, which on mouseover displays a second image, is in fact a widget. For some strange reason the profile images on mouseover code will not display if you put the code into the template itself. So this code must be added to a HTML/Javascript widget and placed at the top of the left hand side sidebar column. So, go to the design page and click on "add a gadget" then select the "HTML/Javascript" widget in the basic list. Then add the code below to that widget.
<div><a href="http://www.blogger.com/profile/06693223246748297158"><img alt="View my complete profile" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielVov0-xTqnEs5YKe62IXo6BLrXlw08eL70VJGj7KsAhc_2zx9GYKGe7yFwhwIEv4CSkdOKwYjWzv7tBxAJuqb3a09kwWMGSzDTZFmmPU0iN9oEXbCMneFRLU1cSSM57v2GIEzOyx2JQ/s1600/2x135px+x+180px.jpg'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUk2MjRgPNXzklfZsw3fFbDGoG6iaKhFUKeSMGQ5SVfhheejY_AdIrfHPzCi5ER3XhOpXxs9FuDcquM2fds_J9ZWMJwzQbDdafoMYomnHWYd-siG3u5kH3klqoc4w3WKZ9B1jPZVR9SRI/s1600/1x135px+x+80px.jpg'" src='http://4.bp.blogspot.com/-7jpvwcz5abw/tewk3azunei/aaaaaaaadbs/_tfpgxmcia4/s1600/1x135px+x+80px.jpg' style="display: block; float: none; margin-left: auto; margin-right: auto"/></a></div>
In the code above there are 2 images but one of the image's urls is displayed twice (I've highlighted it in blue). The image url that is repeated twice is for the image that will be displayed on your blog when the blog first loads. Meaning = the very first image to be displayed and viewed on your blog is at the bottom of all the code. The image that will appear only on mouseover is placed at the top of all the code, and the url for that image only appears once in the code. It took me a while to figure this out but if you remember it this way (the urls go in order from bottom to top in the code as oppossed to visually on your blog it goes from top to bottom) you should understand it better.
The downfall to this widget is you need two images for your profile image to be of the exact size. The width for each image must be exactly 135px. However, you can make the image to be of any height. Mine are 80px in height but as I said you do not have to have the exact same height as mine.
To resize your profile images online go to http://www.resize.it/ then click on the "Advanced tools" icon on the right side of the page. Select the profile image you want by clicking on the browse button, then type in the height and width of the image you want it converted to. Then tick the "Convert the image to" box and select "jpg" then click on "okay". Once the next page loads save the image to your computer. Don't forget though, in order to save it successfully right click on the image on the outside of the faded area (the cropping tool square that is on the left hand side of the image). Then click on the "here" link to go back and repeat the process with a new image. I use that website all the time and I thoroughly recommend it. It is free to use and you do not need to register to use their website and it only takes a few moments of your time.
Once you have two images that you want to add to your profile image widget you can do one of two things. Firstly you can either host the images on a site like Flickr, Imageshack, etc then copy the url for each image and place them in the code above in your HTML/Javascript widget, or you can upload them straight to Blogger as images for a new post. If you add them to Blogger in a new post you need to publish the post before you can grab the urls.
However, if you only want one image as a profile image then please scroll down and read the information I have provided in the question: I only want one profile image. How can I do that? Please refer to OTHER PROFILE IMAGE OPTIONS SECTION
Back to top
STEP 4. Delete your "About me" widget.
Back to top
STEP 5. Next you need to add your profile image (or a image) to be displayed next to each post to the template.Back to top
STEP 6. Then change my urls to your urls in the template, just below the header.Back to top
STEP 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.
The Pages widget is designed to contain your most important links to your blog. A lot of people may only have a few main pages but others may have 10 or more main pages and not all of those main pages will be static pages.
The Pages widget, which goes directly below your profile image in the left hand sidebar column, is made by using a table, some images and some urls. The table itself has been split into two columns in order to host an image on the left and a url on the right. There are 7 different image icons within the Pages widget, which I have displayed in blue. This Pages widget can be customized to your own needs and even more icons and urls can be added to the list, if needed.
Below is the code for the entire Pages widget, which is simply placed into a HTML/Javascript widget in your blogger's Design page. It is to be placed at the second to top on the left hand side of your template layout, as displayed on the live-demo - your profile image widget being the very top widget in the list..
<table border="0" cellpadding="1" cellspacing-bottom="2" width="100%">
<tr><td align="left" width="4%"><img src="http://img21.imageshack.us/img21/8874/postwallicone967396.png" width="18" height="18" />
</td><td align="left" width="96%"><a href="http://originalfaceblog.blogspot.com">Home</a></td></tr>
<tr><td align="left"><img src="http://img714.imageshack.us/img714/56/infoicon.png" width="20" height="20" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/info.html">Info</a></td></tr>
<tr><td align="left"><img src="http://img151.imageshack.us/img151/815/notesicon.gif" width="16" height="18" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/notes.html">Notes</a></td></tr>
<tr><td align="left"><img src="http://img84.imageshack.us/img84/3446/photosicon.gif" width="16" height="16" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/1970/06/photo-albums.html">Photos</a></td></tr>
<tr><td align="left"><img src="http://img24.imageshack.us/img24/2038/videoicont.jpg" width="21" height="22" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/videos.html">Videos</a></td></tr>
<tr><td align="left"><img src="http://img717.imageshack.us/img717/2828/usersfriendsicone647912.png" width="20" height="20" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/friends.html">Friends</a></td></tr>
<tr><td align="left"><img src="http://img109.imageshack.us/img109/768/imagescaqragca.jpg" height="22" width="26" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/faceblog-help.html">Faceblog Help</a></td></tr>
</table>
<tr><td align="left" width="4%"><img src="http://img21.imageshack.us/img21/8874/postwallicone967396.png" width="18" height="18" />
</td><td align="left" width="96%"><a href="http://originalfaceblog.blogspot.com">Home</a></td></tr>
<tr><td align="left"><img src="http://img714.imageshack.us/img714/56/infoicon.png" width="20" height="20" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/info.html">Info</a></td></tr>
<tr><td align="left"><img src="http://img151.imageshack.us/img151/815/notesicon.gif" width="16" height="18" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/notes.html">Notes</a></td></tr>
<tr><td align="left"><img src="http://img84.imageshack.us/img84/3446/photosicon.gif" width="16" height="16" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/1970/06/photo-albums.html">Photos</a></td></tr>
<tr><td align="left"><img src="http://img24.imageshack.us/img24/2038/videoicont.jpg" width="21" height="22" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/videos.html">Videos</a></td></tr>
<tr><td align="left"><img src="http://img717.imageshack.us/img717/2828/usersfriendsicone647912.png" width="20" height="20" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/friends.html">Friends</a></td></tr>
<tr><td align="left"><img src="http://img109.imageshack.us/img109/768/imagescaqragca.jpg" height="22" width="26" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/faceblog-help.html">Faceblog Help</a></td></tr>
</table>
Copy and paste the entire code above into a HTML/Javascript widget and save it.
So, let's edit the code to customize it to your own needs.... Firstly, I have placed all my own urls in this code rather than adding a # symbol. This is so you will know what the entire urls will look like once placed within the table code. Each one of my urls must be changed to your own urls. You must create a page for each link within the Page widget, in order to add it to the list. It is that simple. Once you have created your own page (whether it be a static page or a New Post page, publish it and then view it. Then at the top of your web browser will be a url displayed for that web page. Highlight that url then copy it. Then go to your Pages widget, click on the edit function for that widget, and paste the url into the appropriate area of the table. But don't forget to delete my url before you save it.
What does one row look like in the table code above? I'm glad you asked. One row of code looks like this:
<tr><td align="left"><img src="http://img151.imageshack.us/img151/815/notesicon.gif" width="16" height="18" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/notes.html">Notes</a></td></tr>
Each and every row within the table (or the code for the widget itself) starts with <tr> and ends with </tr>. And each row has two columns with each one starting with a <td align="left"> and ends with a </td>. So, in the left column of each row is an image, and in the right column of each row is a url. That's basically all you have to remember.
If you want to add more rows to the table (more urls with matching image icons) you simply add a new row of code for every url you want to add to the Page widget. Each new url you add to the list, the entire individual row of code (starting with <tr> and ending with </tr>) must be placed just after a closing tr code = </tr>. To give you an example, three newly added rows (of code) which are in red will look like this:
<tr><td align="left"><img src="http://img84.imageshack.us/img84/3446/photosicon.gif" width="16" height="16" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/1970/06/photo-albums.html">Photos</a></td></tr>
<tr><td align="left"><img src="http://img84.imageshack.us/img84/3446/photosicon.gif" width="16" height="16" /></td><td align="left"><a href="#">Photo gallery</a></td></tr><tr><td align="left"><img src="http://img24.imageshack.us/img24/2038/videoicont.jpg" width="21" height="22" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/videos.html">Videos</a></td></tr>
<tr><td align="left"><img src="http://img24.imageshack.us/img24/2038/videoicont.jpg" width="21" height="22" /></td><td align="left"><a href="#">Video Gallery</a></td></tr>
<tr><td align="left"><img src="http://img717.imageshack.us/img717/2828/usersfriendsicone647912.png" width="20" height="20" /></td><td align="left"><a href="#">Followers</a></td></tr><tr><td align="left"><img src="http://img717.imageshack.us/img717/2828/usersfriendsicone647912.png" width="20" height="20" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/friends.html">Friends</a></td></tr>
<tr><td align="left"><img src="http://img109.imageshack.us/img109/768/imagescaqragca.jpg" height="22" width="26" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/faceblog-help.html">Faceblog Help</a></td></tr>
</table>
<tr><td align="left"><img src="http://img109.imageshack.us/img109/768/imagescaqragca.jpg" height="22" width="26" /></td><td align="left"><a href="http://originalfaceblog.blogspot.com/p/faceblog-help.html">Faceblog Help</a></td></tr>
</table>
NOTE FOR ABOVE CODE: THIS IS ONLY THE BOTTOM HALF OF THE ENTIRE CODE. IT IS NOT THE COMPLETE CODE FOR THE ENTIRE WIDGET. Now because the three new pages have not been created yet, in reality, you simply delete the entire url for each link and replace it with a hash symbol ( # ). Once you have created a page for each new page on your list, you replace the hash symbol ( # ) with the url of the page after it has been published. The text for each link can be altered (reworded) to display anything. Therefore, you are not limited to what links you can add in the Pages widget. You can also add links not only to static pages but to normal blog post pages as well.
If you want to add your own image icons feel free to do so. All that you do is find an image that you like on the internet, then right click on it. A computer pop-up window will open and near the bottom the words "URL Address" will be displayed along with an actual url of the image. In most cases this will work but it entirely depends upon the website itself, as to whether this function has been blocked or not. Simply highlight the url. You might need to scroll down a bit to highlight the entire url for the image. Then right click on the highlighted url and select "copy". Paste the url into the appropriate row of the table between the two " " of the img src code. They are written in blue in the entire code for the Pages widget at the top of this section.
NOTE: To delete my urls simply replace my urls with a hash symbol ( # ) making sure you do not delete the " " symbols. By replacing my urls with the hash # symbol you are just making the link inactive. Don't forget to save your changes afterward.
FOOTNOTE: Make sure the > symbols are next to the </tr> so that it doesn't look like this: </tr > There must be no spaces displayed with the opening or closing elements of the code. If there is a space simply delete the space, otherwise the entire Page widget alignment may not display properly.
Back to top
STEP 8. Add a Blogroll widget to your blog if you do not already have one.
Back to top
STEP 9. Add the "My Blogger.com Friends" widget and content in the left hand column.
Back to top
STEP 10. Add the "Recent Comments" widget in the basic list in Blogger.
Back to top
STEP 11. Add the "Facebook Comments app".
Back to top
STEP 12. Create a static page for your "Photos" (or photo albums) page.
Creating a photo album page was not the easiest thing for me to do as there were a lot of problems surrounding it's creation. I began using a standard table along with its code and everything was going okay until the table code eventually crashed the "edit post" and "edit page" sections. It eventually refused to load the edit page with close to 100 images on it. This meant I could not even edit the damned page let alone add any new images to it. I had to start all over again. So I had to invent a new way of displaying more than 100 images on a page, that gave it the same look and feel as a table, that also didn't interfere with Blogger's ability to load the "edit post" or "edit page" functions. Eventually I rediscovered a simple solution, and it does not involve any table code whatsoever. So, what was the solution?HERE
I simply added these few lines of code into the "edit page" tab, in the "Edit HTML" section:
<div style="border-bottom: #333333 0px solid; border-left: #333333 0px solid; border-right: #333333 0px solid; border-top: #333333 0px solid;">
</div>
Simple enough, isn't it? But, the above code needs more added to it that just these few lines of code. The images need to be added too. And this is where the hard work begins!
Create a page for you photo albumsThe first thing you need to do is go to the "Edit pages" section and click on the button that says "New Page". Give your new page a title and then copy and paste the following code into the "Edit HTML" section:
Now put the closing div ( </div> ) on a new line with a gap in between them and move the mouse cursor back up to that empty line. The idea is to create a blank line between the opening and closing div codes. Then click on the "Photos" icon and select an image from your computer or from somewhere else (e.g. your blog's web album). When the image has been uploaded click on the "Add" button.
Now, with the image now added to your page it will contain it's own opening and closing divs. You need to delete those opening and closing divs which will look like this, which is in pink:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUk2MjRgPNXzklfZsw3fFbDGoG6iaKhFUKeSMGQ5SVfhheejY_AdIrfHPzCi5ER3XhOpXxs9FuDcquM2fds_J9ZWMJwzQbDdafoMYomnHWYd-siG3u5kH3klqoc4w3WKZ9B1jPZVR9SRI/s1600/1x135px+x+80px.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUk2MjRgPNXzklfZsw3fFbDGoG6iaKhFUKeSMGQ5SVfhheejY_AdIrfHPzCi5ER3XhOpXxs9FuDcquM2fds_J9ZWMJwzQbDdafoMYomnHWYd-siG3u5kH3klqoc4w3WKZ9B1jPZVR9SRI/s1600/1x135px+x+80px.jpg" t8="true" /></a></div> </div>
Now repeat this process two more time for two more images, making sure the opening and closing divs that come with each image are deleted. Now for the extra hard part... aligning the images to be displayed in a row.
Once you have added three images to the first lot of code, the final changes will look something like the code below. The code below is taken from the "edit" section of my first row of photo album images that is displayed on this live-demo.
<div style="border-bottom: #333333 0px solid; border-left: #333333 0px solid; border-right: #333333 0px solid; border-top: #333333 0px solid;"><a href="http://originalfaceblog.blogspot.com/2011/06/ufos.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZsWSm6XhVMp5YqkIpk0aHUx44EMS7Ftzee5WSk7WavyqZERCkY_RIzsS8NP_7m8Qzh3wbrwD7sE5lt1Kc22TxI6mXzsAsn669vCVQQNfFDAlV_Aw2RlCmK0Cflb2wum2HtiyS_2WRwI/s200/63758.JPG" title="UFOs" width="130px" /></a>
<a href="http://originalfaceblog.blogspot.com/2000/01/colourful_03.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OtsmDS5_q2H2tcb3eIBQRDsRnX8cQs3cGzet_4OX0B1FsYtFqsCaIpPEkQ3s60Y2PmvKXetFu9QNlho2EZDpY69MNArnLY5X3ZnXG-RAPsN7nrZxaVBKd8ag1Fzz78C7oqtTljdGdoc/s200/01-hubble-celebration-galaxy.jpg" title="colourful" width="130px" /></a>
<a href="http://originalfaceblog.blogspot.com/2000/01/space.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPnyZ4GmAuUVoUwZfuUsH4vVOMfmcd1ulAsqtfPz-TJSAbMVgYbEpInp9yd8JRmlgWSiTDnbiEboFwjKyqhvFLmHQ1N0QuEYUcAv8XbaPN0kWIogolRycqfq9KGyj7xvSuA3CgP-yO_l4/s200/background-space.jpg" title="space" width="130px" /></a></div>
Now, you have to remember something here, that not every image uploaded will contain the exact same code for the image as the next image to be uploaded. Each image will vary slightly with it's code. Sometimes more code will be added, and sometimes less code will be added. If you keep that in mind you will become familiar with how the image codes will be displayed on your computer and your version of Blogger - if there is such a thing.
IMPORTANT:
How to align the images in a row:The next thing you need to do is to make the three images align so they are all in a row, all side by side. This is the really tricky part because it can take some time to achieve when creating your first photo albums page (or additional individual photo albums that are separate to this page for that matter). Basically all that you do is remove any spacing between the closing </a> and the opening <a href=" lots of code. The codes will look like this </a><a href=" with the spacing removed. You need to remove the spacing between the first image's closing </a> tag and the second images opening <a href=" tag. Then you need to remove the spacing between the closing </a> tag of the second image and the opening <a href=" tag of the third image. By removing the spaces the images automatically line up next to each other.
Once you have done that preview the page. Hopefully the images will be in a row, displayed side by side next to each other. Sometimes images will not align properly using this method, so additional code must be added to the codes of each image. In the link below that I have provided as a working example of this code, with over 100 images on it, as some of the images refused to align. So I am going to give an example of the actual code of one image on that blog:
Before you do anything else some changes need to be made to the codes of the images. Firstly you need to check if each image contains a "height" and a "width". If it doesn't then you need to add the code for it. Look at the code above and you will notice that I have written some of the code in red. You need to make 3 lots of changes for every image added. The first change is to it's "height". Change the height of the image to 125px. Then change the width of the image to 130px. Finally, you have to add the title code, which looks like this: title="colourful". If you don't make these changes the images will be too large to be placed in a row, and they will be displayed in a vertical row underneath each other. This has to be done to each and every image you add to your photo album page (as well as to each individual photo album you create).
<a href="http://3.bp.blogspot.com/-iBCu5ULlFaQ/Tdi_InZCJEI/AAAAAAAADMc/Il7gYtPadL0/s1600/Agharian.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img align="center" border="0" height="145" width="135" cssfloat="left" src="http://3.bp.blogspot.com/-iBCu5ULlFaQ/Tdi_InZCJEI/AAAAAAAADMc/Il7gYtPadL0/s200/Agharian.jpg" title="Agharians" /></a>
To make the images align properly I added the code which is displayed in a bold red colour. Once this additional code was added, it also had to be added to the other two images on the same row, and in the same location within the code, for it to work properly. The final result is all the images aligned properly side by side, in columns and rows.
How to add two or more rows of photos:Okay, I have shown you how to add one row of 3 photos all next to each other. Now, to add more rows you simply repeat the process as I just mentioned above.. So, a second row of photos added, the code would look like this:
<div style="border-bottom: #333333 0px solid; border-left: #333333 0px solid; border-right: #333333 0px solid; border-top: #333333 0px solid;"><a href="http://originalfaceblog.blogspot.com/2011/06/ufos.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZsWSm6XhVMp5YqkIpk0aHUx44EMS7Ftzee5WSk7WavyqZERCkY_RIzsS8NP_7m8Qzh3wbrwD7sE5lt1Kc22TxI6mXzsAsn669vCVQQNfFDAlV_Aw2RlCmK0Cflb2wum2HtiyS_2WRwI/s200/63758.JPG" title="UFOs" width="130px" /></a><a href="http://originalfaceblog.blogspot.com/2000/01/colourful_03.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OtsmDS5_q2H2tcb3eIBQRDsRnX8cQs3cGzet_4OX0B1FsYtFqsCaIpPEkQ3s60Y2PmvKXetFu9QNlho2EZDpY69MNArnLY5X3ZnXG-RAPsN7nrZxaVBKd8ag1Fzz78C7oqtTljdGdoc/s200/01-hubble-celebration-galaxy.jpg" title="colourful" width="130px" /></a><a href="http://originalfaceblog.blogspot.com/2000/01/space.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPnyZ4GmAuUVoUwZfuUsH4vVOMfmcd1ulAsqtfPz-TJSAbMVgYbEpInp9yd8JRmlgWSiTDnbiEboFwjKyqhvFLmHQ1N0QuEYUcAv8XbaPN0kWIogolRycqfq9KGyj7xvSuA3CgP-yO_l4/s200/background-space.jpg" title="space" width="130px" /></a></div>
<div style="border-bottom: #333333 0px solid; border-left: #333333 0px solid; border-right: #333333 0px solid; border-top: #333333 0px solid;"><a href="http://originalfaceblog.blogspot.com/2011/06/ufos.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZsWSm6XhVMp5YqkIpk0aHUx44EMS7Ftzee5WSk7WavyqZERCkY_RIzsS8NP_7m8Qzh3wbrwD7sE5lt1Kc22TxI6mXzsAsn669vCVQQNfFDAlV_Aw2RlCmK0Cflb2wum2HtiyS_2WRwI/s200/63758.JPG" title="UFOs" width="130px" /></a><a href="http://originalfaceblog.blogspot.com/2000/01/colourful_03.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OtsmDS5_q2H2tcb3eIBQRDsRnX8cQs3cGzet_4OX0B1FsYtFqsCaIpPEkQ3s60Y2PmvKXetFu9QNlho2EZDpY69MNArnLY5X3ZnXG-RAPsN7nrZxaVBKd8ag1Fzz78C7oqtTljdGdoc/s200/01-hubble-celebration-galaxy.jpg" title="colourful" width="130px" /></a><a href="http://originalfaceblog.blogspot.com/2000/01/space.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPnyZ4GmAuUVoUwZfuUsH4vVOMfmcd1ulAsqtfPz-TJSAbMVgYbEpInp9yd8JRmlgWSiTDnbiEboFwjKyqhvFLmHQ1N0QuEYUcAv8XbaPN0kWIogolRycqfq9KGyj7xvSuA3CgP-yO_l4/s200/background-space.jpg" title="space" width="130px" /></a></div>
Every group of three images in a row that you want to add, you simply add after a line space:
<div style="border-bottom: #333333 0px solid; border-left: #333333 0px solid; border-right: #333333 0px solid; border-top: #333333 0px solid;"></div>
place the images within the div opening and closing tags, remove the additional opening and closing div tags, change the height, width, and add the title code and the alignment codes if necessary, then remove the spacing between the opening and closing <a href=" </a> tags and you are done. It couldn't get any easier than that.
As I have said, this simple few lines of code can be repeated multiple times. The only downfall to this method is it takes blogger about 5-10 seconds to preview a post or page with over 100 images on it using this method. That is the only problem I have found to date with the code but it could have something to do with the large number of images to load in the preview mode.
Anyway, if you are interested in seeing a working live-demo of this exact same code, with over 100 images in a photo gallery, it can be viewed here
Back to top
STEP 13. Create a New Post, predate it and add some images to it.
Back to top
STEP 14. Adding the Lightbox image viewer code to each photo.
Back to top
STEP 15. Create a page to display all your videos in the same manner as the photos.
Back to top
STEP 16. Creating an "Info" (or Information) page.
Back to top
How and where do I log out of Blogger?To log out of Blogger you simply click on either the "Design" tab or the "New Post" tabs then click on the "Log out" link that will be displayed in the top right hand corner of the next page that loads.
Sometimes this does not work and you do not get logged out. So, should that happen, simply click on the "My Account" link at the top of your "Dashboard" page and log out via that link.
Back to top
Why is there no Blogger Navigation menu on this template?The Blogger navigation menu bar is absent from this template because it cluttered up the look of the template design. And with the "Log in", "Design" and "New Post" tabs at the top of this template it simply is not needed.
Back to top
What are some things that might go wrong with this template when customizing it?One of the first noticeable differences with this template is Internet Explorer does not display the edit post and wrench icons. However, on Google Chrome these icons are displayed when logged into one's blog. Why this has occurred I do not know. It is worth mentioning here anyway.
The main things that basically will go wrong when customizing your blog to your own needs are some things will stop working. For example, let's say you add some animated gifs to your blog and you also have the "Facebook Comments" app on your blog (within a widget). It seems, with this template, the more animated gifs you have on your blog the less likely the "Facebook Comments" app will refuse to load. So, if you avoid adding animated gifs, or resize them so that they are small, the Facebook Comments app should load properly.
Another thing that will go wrong at some point is the images you add to your photo albums or to a photo gallery page will refuse to align properly. This happens to everyone, and it can be easily fixed. Please refer to the question about adding images in columns and rows to this template, for more information.
There are literally numerous things that could go wrong with this template actually. But it all depends upon how much knowledge you have of css and html and javascript code, as to whether you can fix the problems or not. I have been working on Blogger templates for a few years now, and really, it is not all that difficult to fix a problem on Blogger. With my expertise you should be able to solve any problem that may arise rather quickly.
Back to top
Do I have to leave the "credit links" and the "Faceblog Help link" in the footer?I would prefer that you leave the credit links in the footer because it is helpful to know where you got this template from, and if you need to, you can get the template again if it ever needs deleting.
As to the Faceblog Help link, well, I created that link so that you will have access to this FAQ page at a moment's notice should you ever need help in doing something with your template. No-one knows this template better than me, and with all my knowledge written down of this template, you too can learn how it works. Should you ever forget how to, let's say, add the right code to a photo to make it pop out into the Window overlay, the Faceblog Help link just needs to be clicked on. As time passes we all tend to forget how to do things, unless you have a photographic memory!
Having tutorials of how to add things to this template is something you will need when you first use this template on your own blog. Without the Faceblog Help link (or the tutorials) you will have a hard time figuring out how to change everything to your own links, and will not be able to reproduce the same look of your blog as I have. For example, you will not be able to create a "My Blogger.com Friends" widget of your own, or know how to create your own photo album gallery page or even know how to make your "info" page look like mine. You see, it has taken me quite a few months to figure some thing out, on how to make them work properly on this template. These things may be simple enough to look at (e.g. the blogger.com friends list widget) but a lot of manual work is needed to create that same look. This template is a complicated one to use, and you will need additional help to achieve the same look as this blog.
So, leaving the "Faceblog Help" link in the footer (and in the links section underneath your profile image) will benefit you until you no longer need those links anymore. You are welcome to delete the Faceblog Help links but only after you have your blog looking like mine.
Back to top
How do I change the "RSS Posts", "Post Comments" and "or email" links?
Back to top
How do I edit a blog post or page?
Back to top
Do I need a "Followers" widget with this template?
Back to top
How do I edit the footer links?
Back to top
The windows image overlay tries to load an image but won't display it. What am I doing wrong?
How do I change the "Edit Profile" link that is below the header?
OTHER PROFILE IMAGE OPTIONS SECTION
I only want one profile image. How can I do that?
Back to topIf you have any problems with this template that is not discussed in the above FAQ please leave a comment below and I will do my best to help you.
<div style="border-bottom: #333333 0px solid; border-left: #333333 0px solid; border-right: #333333 0px solid; border-top: #333333 0px solid;">
<div style="border-bottom: #333333 0px solid; border-left: #333333 0px solid; border-right: #333333 0px solid; border-top: #333333 0px solid;">
</div>
1 comments:
Finish this already, Shirley. This is just a test comment as Blogger keeps logging me off every blog I try to leave a comment on lately.
Post a Comment