Re-designed my Blog, XML Note-Taking Tips101

Well, as you can see, I've been busy the past couple of days re-designing my blog site. The dark background and colors made it seem just to 'doom 'n gloom' so I decided to spruce it up a bit by lightening everything up, especially the background color. I've also wanted a 3-column design since the beginning but just now found a site's tip/instructions that actually worked for me. I use Google's 'Denim' template. If you're wondering where I found the instructions for how to change that template from 2 to 3 column, go to Computer Consultant's blog site. I'm trying to think if there are any tips I need to give you before you try it.

[March 23rd: I'm adding this advise a few days later to this post - did not see the sense in putting a whole new 'addendum' post separate from this one - I forgot to mention the most important thing I discovered to make these instructions work! After you follow the instructions Computer Consultant gives you for your 3-column blog and try to preview your blog, you may get a message from blogger like I did, that says something like 'can't load your template, this 'widget' is not loadable' (can't remember the exact wording). I then went back to view the html template, and where Comp. C. had me put in the info for my 'Profile' widget, I removed that from the html. Then blogger allowed me to view my template, but wait! It did not look 3-column - it just looked the same except my 'body content' was shifted to the left of the screen. Well, here's where you need to go to 'Layout' and there you will see that indeed you DO have a left column 'add a gadget' there. Yes! Now go ahead and add a widget using the left-column's 'add a gadget'. It doesn't matter what you add, it can be anything for now. This will get your left-column started. Then you must add your following gadgets BETWEEN the 'add a gadget' widget and your first widget or else it will 'jump' over to the right-column. After you've added a few widgets using that column's 'add a gadget', you can go back and remove the first widget if you want. You have to use the left-column 'gadget adder' because you'll notice that at first, you're not able to move widgets from the right-column to the left. However, after I added a couple of widgets, I was then able to move them from left to right and vice-versa; however, you'll notice that doing so is a bit tricky for the last widget in both L. and R. columns, because of the html coding, they don't want to stay put if you try to add them to the end of either column, so you have to 'lock' them in place by first putting them 'between' widgets on whichever side you want, and then you can move them up or down anywhere within that column. Hope this tip helps - it's key to making these instructions work! My apologies for failing to mention it the first time I posted this.]

Note: These tips are for those of you who are into customizing your blogsite, in this particular case, a 'google' template. However, the tips I give below can be applied to any xml/html file.

Of course you want to be sure:

• To first save your current template using the prompt within your google blogger account before making any changes. Go to 'Layout', 'Edit Html', and click on 'Download Full Template'.
  

• I printed off Computer Consultant's instructions prior to making any changes. Just makes it more convenient, also nice to have in case I forget (senior moments are comin' faster these days) where I got these instructions.

• I keep a notebook of my css/xml/html tips and info for my website and blogsite.I jotted down beside each 'change' on this printed off sheet, what I initially had in my css, so that I would know what my original dimensions were in case I see that I need to tweak it a bit before saving. Of course if you don't like the result or it doesn't work, you have your saved template (I hope!) you can just reload that, but this is a habit I started a long time ago, and it comes in handy sometimes for re-adjusting widths, etc., so I continue to do it.

TIPS: You can also make note of what you are doing within your html editor by preceding your note with a bracket (<) followed by an exclamation (!) and two dashes (--) and ending it with 2 dashes (--) and a closing bracket (>). Do not space between the bracket, exclamation, nor the dashes; however, you can space anywhere between these note tags. As long as you do this within the body of your html document, it will not show up on your site. It's only for you're own benefit or to explain to others what you have done. Sort of like 'note taking'. I use this puppy a lot to remind myself of what I did and why. I'm quickly learning with blogging, there are SO many gadgets that require embedding code into the body of my blog, that there is no way on earth I can remember why I put it there (sometimes I can't tell what it is just by reading it) unless I make note of it, so I use this tag to do so.

For making notes in the 'css' part of your html (that's the listing of 'div' elements or 'styling elements' given above the 'body' part of your html document), you can use /* before your note and end it with */ which is great for noting details of what, why, and where that particular Div element will show on your site.

If you want to see how I use these 'note' tags:

Go to my website (really, I'm NOT trying to plug my site, just want to show an example of how I use this tip, yeah right) and do a 'view page source' by placing your mouse on the site; right-click your mouse and choose 'view page source'. If you can't do it that way, go to your 'view' tab at the top of your browser screen, click on it, and choose 'Page Source' from there.

This shows you the html document for that site (BTW, you can do this on virtually ANY site, a great way to learn mark-up language!) You can see where I have used the beginning (< ! --) and ending (-- >) brackets (I'm only spacing between the dashes, exclamation, and brackets here so you can 'see' them) and /*note tags*/ to serve as a reminder of what I did. (you can only see the /*note tags*/ on this line because they are within the 'body' of this page-that's why I had to put the css note tags in parenthesis, so they would be visible to you - hope this isn't too confusing!).

On the html 'view page source' for my website, look near the top, ABOVE the 'body' tag (the /*tag*/ only works ABOVE the body tag of your html file) along the left side of the page, and you'll see where I noted the end of my meta tags with:

/*end of my meta content*/

You would have to go to my 'style sheet' or css document to see all of my css notes, but if you use Firefox (may I count the ways of how much I love Firefox...)Web Developer, you should have that option when you right-click your mouse.

Let me know if you have any questions, and I'll certainly try to answer them. I only do html/xml/css as a hobby. I learned html back in the 90's when I was designated as the 'web person' for my department. Then I had to learn css on my own while creating my website. I enjoy learning css and web development, so this is just '101' stuff mostly that I'll be giving tips on. Hope it helps you if you're into customizing your site(s). Again, let me know if I can help, if you have tips to add to this post, or if I've mis-informed with incorrect advise/tips by leaving a comment. And please let me know if you like the new design of my blog site. Thanks for reading my rambling mind's post today, and have a great one!