Go Ahead Take It!
Anyway, I have made some adjustments to the code and I am offering it up to anyone who would like it. First you have to download a basic html editor so you can make adjustments and preview it prior to uploading it to blogger. Again this is a BLOGGER template. All you too cool for school kids who use moveable type, your own, or xanga you're out of luck.
Anyway, if you have Windows XP then you can download this free editor. If you are a MAC OS X user then you can download this free editor. I am a MAC user so I have been using the particular HTML editor that I recommended and it works great! I just googled the XP one so if there is a better one out there for free please link to it in the comments.
After downloading the editor, then you can down the template code from here. Then you open up the txt. file, select all, copy and then open up a blank window in the HTML editor and paste...you're ready to customize.
A few guidelines to customizing.
Top Banner
I went to a iStockphoto.com and looked through hundreds of pictures for my top banner before finding just the right one. Then I downloaded it for $1. Of course you could image steal off other sites, but I wanted a particular look so that's why I went with the pro's. Then I used Photoshop to insert my text and to get my banner proportions to 675 x 150. Then I uploaded it to my flckr account and inserted the image code into the template HTML...BAM I have my top Banner.
Side Container
In photoshop I made each one of those labels (Blogs, Archives, Reading & Music, etc). Their dimensions are 180 x 18. I uploaded them to flckr and inserted the image code into the template HTML...BAM I have my Side Container Labels. It's pretty clear what goes in each section, and feel free to change the order. The code is all there and simply labeled. If you don't have a photo editing program then I am sure you can insert a header, but I don't know how to do it.
The Style Sheet - Colors and Fonts
I have tried to make these as easy to understand as possible. I could never have come up with this code on my own. That's why Eicher Design gets the credit for the design. So basically I can read the foreign language, but not write it! In the template you will see labels for each section of code < ----- Line changes background color ------ > for example.
Colors - when you see a place in the code that looks like this "#ffffff" then that is color. Six f's is white and six 0's is black. There are eternal combinations of letters and numbers that can be used to get just the right color. If you have Photoshop the color number is easy to get. If you don't then Word does have it (at least on MAC), but it's harder to find. However you can use simple colors like red, blue, purple, etc instead of the numbers. So for instance if you wanted to have a black background you would see this code: bg color="#000000" or bg color="black.
Fonts - This template uses a style sheet. I labeled it on the template, where you change the font size, color, and type. A particular text style is determined by a code that looks like this: class="links" That tells the computer what color, size, font, and style the following text should have based on what is in the "Links" style on the style sheet. Change the Links color, fonts, size on the style sheet and it will automatically change in your template. That goes for everything else.
You can preview your progress in the HTML editor and tweak everything just right. Some of you will notice this: http://www.manhattanchurch.org/youngpros/images/clearpix.gif and wonder what it is. It is basically a 1x1 clear pixel block that is used to position the three frames around the template. It's a lot easier to nudge or push things using various heights and widths that way than the other way.
When you are all finished. Log into blogger and go to your template. Select all, copy, and paste it into a new HTML editor page and save it. Once you have done that (it's called "backing up") then you can copy and paste the new template in and...BAM it should all work. Again I am merely a translator and not a native speaker in all of this so I am open to any questions, but I am afraid I will be of little to moderate use.
So blog on my friends, and let the customizing begin!
5 comments:
Speechless... I'm utterly speechless.
I do have to clarify one thing: You keep saying that this is my design. That is a little misleading. I wrote the underlying code that gives your blog it's layout. But I did not design your blog. You chose the imagery, the colors, fonts... this is all a very large part of what most people associate with "design." So, yes, much of your blog is my HTML code and layout, but you designed it. Well done.
You have taught me well my friend!
I knew there must have been a reason...
I love the new look. I read through the instructions. Alls I can say is that the Titanic had a better chance of completing that maiden voyage than I do of trying to do this myself! lol
I applaud you!
Jason - that is amazing. Thanks so much for the detailed instructions. I quite possibly will use all of the info to learn and play with my blog. I've done some very rudimentary HTML coding, but mostly just learning a very little bit about how to keep a site updated with documents and links. Your blog here gives me a lot more substance to work with. Thank you!!
Post a Comment