Blogger Templates

Photoshop Brushes & Brusheezy

2007-05-21T16:59:00.000-07:00

Ever saw illustrations like the following?

These has been all the range in today media from website, poster, and even commercials. Usually targeting the younger generation who like all the swirls, bold lines, circles and bubbles etc.

Every wonder how they are created? The amazing things about these illustration is that although everything is popping up everywhere, everything is so precise, the lines are all of the same thickness and their is certain pattern to the randomness. Needless to say these illustration look like they take forever to make.

The truth is though, these drawing are in fact quite easy to make with the right tools of course, namingly adobe photoshop. You see in adobe photoshop and other adobe software there is a brush tool to create illustration like those. All you have to do is download brush and let the creativity begin.

Two website that has especially large and fantastic collection of brushes are Brusheezy and Deviant Art. Brusheezy is a simple web2.0 specifically devoted to photoshop brushes. There are currently over 250 brushes and counting. Deviant Art of course is open source site for all things art, just browse through the brush section, the sheer quantity and quality is amazing!

Alright now you have brushes start designing and feel free to send us some artwork to showcase!

Monetizing Customization

2007-05-18T13:05:00.000-07:00

I switched to Green Marinee weeks ago, but I'm still not quite down with customizations. Today I tweak the template a bit to monetize this blog and integrate Google Adsense. I won't go through all the technical details and how to, its all already documented under hacks and Google Adsense. Basically you need to run the Adsense code through our HTML Parser.

You can see I have a 468px ad running across the top. At first I was going for a square ad floated left of the content for better exposure like at my other blog Blogging2.0. However the square no matter what the size always cause some issues with the design of the blog. I rather have no ads at all rather than ad that 'break' my template. This brings me to another point, for better click through rates its advised to have the ads as much like normal content as possible. Having the link the same color as normal link and background color with no border like normal background are very important.

This ad thing is really demands lots of changes doesn't it? To accommodate the horizontal ad, I had to move my meta information like labels, authors, etc to the body of each post when the coment was. I increased the font size and added a green boarder running across the top to seperate the meta info from the body of each blog entry. Overall I'm pretty pleased with this change as it blend in with Green Marinee's design characteristics.

Finally, I also added a Adsense Referral ink at botom on each page. Don't see it? That's because I only added to the subpages that shows individual post? How did I do that? Well, just wrap whatever you want in subpages inside

<b:if cond='data:blog.pageType == "item"'></b:if>

So, you can see in the May the 4th be with you post that we recommend you to use Google Adsense

That's it for this customization, undoubtedly I will tweak this template a lot more but that's all for now. Good night!

Template Building Block

2007-05-16T20:00:00.000-07:00

In the dawn of time
There was a nothingness
That shroud over blogs, there
Were no decent templates, just rigid
border to wrap around you posts, sidebars,
widgets and whatever else. Needless to say it was
A time of great blandness and spartan designs. Until
three came and changed things, taking a giant leap for blogs
changing the look of blogs forever ----- K2, Kubrick, Hemingway
[ok, I will end my peculiar star war intro before I creep you out more]

Like all websites almost a decade ago, blog designs were extremely bland and boring compared to blogs today. The first template that was exceptionally new and fresh design-wise was Wordpress based because of its easy HTML, coding integration; Which still remain one of the reason why there are tons of Wordpress theme and only a dozen Blogger templates.

That very first template was Kubrick which remained the default template that comes pre-installed with Wordpress till this day. Then K2 became more popular followed by Hemingway. These three templates are not special just because they are the 'first' templates but also all three templates are very customizable and many other templates are based on them. Some templtes just swapped the graphics used while leaving the coding framework, yet the customized template look different enough to go under another name.

Kubrick
Kubrick is designed by the good people at Binary Bonsai, you can get a little history of Kubrick from the site. You can see that Kubrick uses rounder corners that are popular in the new web2.0 age of the internet and web design. The general color and clean feel also fits the web2.0 style.

In terms of coding, Kubrick started the cornerstone of blog template coding with organized CSS, clean divs, and excellent element tagging with class and id to identify each distinct element of a blog and their purpose. ie. a header post title would be clearly classed "post-title". This way designer who aren't as strong in coding could simple replace old graphics to have everything fit in place.

Kubrick is very widely customized with widgets, coloumns [2,3,4 columns], and ported into other blog publishing system.

K2
K2 is a second theme designed again by the good people at Binary Bonsai, it has its own site at http://getk2.com/. K2 is somewhat a heir of Kubrick, continue the web2.0 theme. K2 did away with the round corners and added the tab navigation. The meta information for each is moved up under the blog title with some nifty FAMFAMFAM icons added. Again K2 retains Kubrick's clean layout that's easy on the eye. K2 and Kubrick share very similar sidebars. In fact, one of the tricks to identifying a modified K2 or Kubrick theme is by the sidebar, a streamline blue list with a gray title at top.

Similar to Kubrick, K2 is very well coded and heavily modified into many different versions.

Overall I think K2 provides a great alternative for those who aren't into round corners but more so for angular designs.

Hemingway

Hemingway is designed by Kyle Neath at Warpspire. Although it is not as popular as Kubrick and K2 it is very widely used by thousands of blogger and one of the first choices as the skeleton for customization. Hemingway features a minimalistic desgin white on black that leaves a lot of rooms for extra graphics and tweaks. Designs with Hemingway as the skeleton usually have excellent readability featureing clear text, large line spacing, and distinct level identification in content and lists.

Hemingway is also one of the first blog that has the option to have the links at the foot and post occupy the entire top section of the design. Another bit of trivia is that the name of the template came from the designer's favorite author.

Of these three template, you can find K2 at Blogcrowds in new Blogger XML Template supporting labels and widgets. I'm pretty sure Kubrick is converted to Blogger XML as well somewhere on the web. Hemingway is yet to be moved to new Blogger.

Frustration

2007-05-15T17:29:00.000-07:00

Baaaahhh, almost another week with no new template entries, I'm really kicking myself in the umm behind.

Lately I have been bogged down with the number of new posts we have at blogcrowds forums since we imposed the three post till you get your template rule. Well, of course, as a result we got a boatload more posts and I personally would like to respond to every single one. There goes an hour more of my spare time. Should have saw that one coming, I actually did but just as well prepared as I thought. I know all of the above sound like a lot of excuses when there should be none... Oh well, guess I have to be more efficient in the future.

In any case I do have one new template to showcase:

Here it is for all the die hard baseball fans, The Road To October is designed especially for you!

And if anyone's kind enough, feel free to post a reply with something like

Get to work, lazy umm behind, there better be a design magnified for this template!

Thanks a million times.

Green Marinee Released!

2007-05-10T20:06:00.000-07:00

Alright, I finally went through the entire Green Marinee Template and everything seem to be fine. So here it is, in response to popular demand (well at least from the request I have gotten), Green Marinee - converted to blogger xml template is released for public download:

Demo | Download

Above is a screenshot, a demo (not that I need another one) and a link to the download page. Hope you enjoy this one.

To see other full Blogger XML Template with labels and all other new blogger features visit Blogcrowds.com and there are many more to come! Now its easy than ever for bloggers to download Blogger XML Templates at Blogger Templates. Good luck blogging everyone.

Green Marinee

2007-05-06T18:35:00.000-07:00

Great, our first serious template review / template magnified. We'll start off with the latest template I have been working on that's used on this very blog, Green Marinee.

Green Marinee is a WordPress based theme designed by Australian web designer Ian Main. Visit his website/portofolio at http://e-lusion.com/ for other excellent examples of web design.

DESIGN
From top down, Green Marinee has the site name offset with the solid black. Although a logo is not present, the blackground should very well with your own custom logo.

Next, like one of Ian's nonpublic WordPress theme, BrettPro, Green Marinee uses the single strip trend with the lime green strip going across the background. The strip certainly make the background more interesting and further enhancing the drop shadow from the main body. Coninuing with the strip pattern you can see many broad green line going across the template, below the site name, for each sidebar module, even in the links.

The content area of the template is given a large area with good size font and improtant information emphasized with font weight and coloring. Overall very clean and comfortable on the eye. One thing about the main content is that it might get a bit boring as you scroll down leaving with plain white and some drop shadows as the case on this blog. This could might be remedied with fixing the background black and green to the background so when you scroll they don't move.

Unlike some designers who embellish the content the area but neglect the sidebars, it looks like Ian spent some extra time on the sidebars. The sidebar has excellent list icons and lime green module seperators that perfect blend with the template. Green Marinee even has second level list icons.

Finally the footer, which is text transformed into all uppercase with a list for special styling aligned horizontally.

CODING
Overall, I won't say Green Marinee is very difficult to code, the hardest part is probably the background and drop shadows. Ian could have done two things to achieve the sidebar shadow at the sides.

Have the background as a single thin horizontal slice and repeat it vertically using one div container

Append the left and right drop shadow to each side using two div container

Of the two, it looks like Ian used both, he appended the drop shadows to the left and right as well as included a background image for the center. This explains the number of div wrappers around the container. One thing I'm puzzled about is why use an image for the center, why not just set the background color to white?

The advantages of the technique is that he made things a lot easier for me to resize to change the dimension of the template and add a third sidebar. Which also make Green Marinee ideal for a fluid design.

One thing I don't get in Green Marinee's coding is that while the design is excellent, the coding is terrible in terms of SEO. Search engines read the HTML code top down and identify the top content as more important than the lower ones. However, in Green Marinee the main column is place at the very end of the HTML code while the sidebar is above it meaning search engine will see sidebar linking more important than the actual content. Most people read from left to right so the main content comes first so why not code it above first?

In conclusion, Green Marinee is an excellent template, very clean with extra touches that really stands out. Overall 8.5/10. You can find Green Marinee with the extra sidebar shown here soon, sometimes in the next few days at Blogcrowds Blogger Template page.

...and that it people, our first design review or as the label says design magnified.

Housekeeping

2007-05-05T18:38:00.000-07:00

Before we start on our critique of numerous Blogger XML Template Blogcrowds has converted, there is still a bit of housekeeping to do.

The appearance of the blog is improved with the new template based from Green Marinee (which will be available for everyone to download in a few days); Now the content itself needs to be organized. For example, the labels are in major disarray, the cases don't match and there are many places two labels are used when one could have done the job. For some nameless reason this bothers me very much, so I set out to relabel all the previous entries.

During this experience, I found out the hard way that Blogger Labels are very difficult to edit. Contrary to what I hoped, you cannot simply correct the labels and the entries would following suit; you have to actually go through every single post and relabel each. Furthermore, you cannot correct a post until you delete every post with the same label. Otherwise when you alter a label, it will simply take the form/casing of the previous labels.

So, there I was blasting the label from every single entry and reentering them. I don't have many post compared to what I should have considering this blog has been around since July 30, 2006, but 40 is still quite a workload. Instead of the five minutes I thought I would spend over twon reorganizing the content and lables, I spent a good solid 20 minutes. In the end, I now have a very clean straightforward labels section that is far easier for visitors to browse through and find exactly what they need.

Here organized into different categories is a look at different entries and template I wrote about. They'll make a good read on a rainy day:

Templates - Blogger 3 Column Mods: Rounders, Herbert Jellyfish Sand Dollar Tekka, 565 897, Harbor Scribe, Denim, Dots, Tic Tac, Minima, Moto, Snapshot, Thisaway

Hack/Mods:
Remove Blogger Navbar
Insert Google Adsense into Blogger XML Part I
Insert Google Adsense into Blogger XML Part II

Design/CSS:
The Common Sidebay Slipping Problem & Solution
Cross Browser Coding Part I - Part II - Part III

These are just some general excerpts, feel free to look around as well.

May The 4th Be With You

2007-05-04T18:31:00.000-07:00

When was the last post man? March 12th? and what, that entry was a random plug into this other blog? Does that even count?

Ok, let's see What's today? May 4th? Whew, almost two month, this blog must be abandoned and the blogger dead...

Fortunately in the blogosphere, resurrection does not require the will of God and death is just a minor glitch in the grand scheme of far greater things. Hallelujah Chorus...Crescendo...Hallelujah Chorus

Anways, throw away the theatric, you get the idea. WE ARE BACK. Blogger Template at http://customtemplates.blogspot.com/ IS ALIVE AND KICKING!!

We have been preparing the Rebirth for a while. Those who visited before may noticed we have changed our template from Field of Dreams to a stunning black and green template modified from Green Marinee. Its about time for the blog that showcases new Blogger XML Templates to upgrade from a classic template.

On top of design changes, we are also going to take a new approach to our content. If you look around you'll see the majority of the post are regarding new releases of Blogger XML Template and write now the content is pretty generic nothing really 'worth' reading. Well we're going to change that. Following each template and download links we may include paragraphed covering the design style of the template, room for improvement, or coding style. There may still occasionally be a couple of entry just showing a list of new template it just means "no comment as of right now".

To wrap things up, I hope you are excited to see some amazing templates in the days to come. For those who can't wait, Blogcrowds has dozens of new blogger templates added feel free to browse through them.

p.s. about the title of this entry, I couldn't help it although it has nothing to do with the content.

A Blog About Blogging

2007-03-12T14:33:00.000-07:00

A blog about blogging - Sometimes it seems like every other blog in the entire blogosphere is on this topic. Well, I guess every blogger want to share with others about his/her experience. So, it looks like high time for me to start my own :D

Before, I used http://blogcrowds.blogspot.com mainly to test out and learn about Blogger Beta XML coding, now its time to put it to a better use.

I'll be offering tips and advice I learned from running my blogs and my website Blogcrowds. Like many other blogs, these tips will probably focus on managing, promoting, monetizing your blog or website. However, what will be different is that I don't claim I am good at this or tremendously successful at all. In fact I'm not exactly satisfied with the progress of Blogcrowds.

I'll share with the readers what I think works well, if it worked or not through trial, error and everything in between.

I hope you will enjoy reading Blogging2.0 and find the entries useful. I look forward to seeing you again soon :)

Thisaway, Thisaway Blue, Thisaway Green, Thisaway Rose

2007-02-27T17:44:00.000-08:00

Now its easy than ever for bloggers to download Blogger XML Templates at Blogcrowds Resource section. Here are a couple of our templates, Thisaway, Thisaway Blue, Thisaway Green, Thisaway Rose in full Blogger XML with labels and all other new blogger features! Click the images to download the template. There are more template on Blogcrowds.com and many more to come!

Thisaway

Thisaway Blue

Thisaway Green

Thisaway Rose

Snapshot Tequila, Snapshot Madder, Snapshot Sable 3 Columns!

2007-02-27T17:42:00.000-08:00

Now its easy than ever for bloggers to download Blogger XML Templates at Blogcrowds Resource section. Here are a couple of our templates, Snapshot Tequila, Snapshot Madder, Snapshot Sable in full Blogger XML with labels and all other new blogger features! Click the images to download the template. There are more template on Blogcrowds.com and many more to come!

Snapshot Madder

Snapshot Tequila

Snapshot Sable

Mr. Moto, Ms. Moto, Son of Moto 3 Column XML Templates

2007-02-27T17:40:00.000-08:00

Now its easy than ever for bloggers to download Blogger XML Templates at Blogcrowds Resource section. Here are a couple of our templates, Mr. Moto, Ms. Moto, Son of Moto in full Blogger XML with labels and all other new blogger features! Click the images to download the template. There are more template on Blogcrowds.com and many more to come!

Mr. Moto

Ms. Moto

Ms. Moto

Minima, Minima Black, Minima Blue, Minima Ochre

2007-02-27T17:34:00.000-08:00

Now its easy than ever for bloggers to download Blogger XML Templates at Blogcrowds Resource section. Here are a couple of our templates, Minima, Minima Black, Minima Blue, Minima Ochre in full Blogger XML with labels and all other new blogger features! Click the images to download the template. There are more template on Blogcrowds.com and many more to come!

Minima

Minima Black

Minima Blue

Minima Ochre

Tic Tac, Tic Tac Blue Column Blogger XML Templates

2007-02-27T17:32:00.000-08:00

Now its easy than ever for bloggers to download Blogger XML Templates at Blogcrowds Resource section. Here are a couple of our templates, Tic Tac, Tic Tac Blue in full Blogger XML with labels and all other new blogger features! Click the images to download the template. There are more template on Blogcrowds.com and many more to come!

Tic Tac

Tic Tac Blue

Dots, Dots Dark 3 Column Blogger XML Templates

2007-02-27T17:30:00.000-08:00

Now its easy than ever for bloggers to download Blogger XML Templates at Blogcrowds Resource section. Here are a couple of our templates, Dots, Dots Dark in full Blogger XML with labels and all other new blogger features! Click the images to download the template. There are more template on Blogcrowds.com and many more to come!

Dots

Dots Dark

Denim, Denim Light, Denim Washed

2007-02-14T16:14:00.000-08:00

Now its easy than ever for bloggers to download Blogger XML Templates at Blogcrowds Resource section. Here are a couple of our templates, Denim, Denim Light, Denim Washed in full Blogger XML with labels and all other new blogger features! Click the images to download the template. There are more template on Blogcrowds.com and many more to come!

Denim

Denim Light

Denim Washed

Harbor, Scribe, 565, 897 3 Column Blogger XML

2007-02-04T12:24:00.000-08:00

Now its easy than ever for bloggers to download Blogger XML Templates at Blogcrowds Resource section. Here are a couple of our templates, Harbor, Scribe, 565, 897 in full Blogger XML with labels and all other new blogger features! Click the images to download the template. There are more template on Blogcrowds.com and many more to come!

Harbor

Scribe

565

897

Andreas02, Andreas04, Andreas08

2007-02-02T18:51:00.000-08:00

Now its easy than ever for bloggers to download Blogger XML Templates at Blogcrowds Resource section. Here are a couple of our templates, Andreas02, Andreas04, Andreas08 in full Blogger XML with labels and all other new blogger features! Click the images to download the template. There are more template on Blogcrowds.com and many more to come!

Andreas02

Andreas04

Andreas08

Herbert, Jellyfish, Tekka, Sand Dollar 3 Column Blogger XML Templates

2007-02-01T17:59:00.000-08:00

Now its easy than ever for bloggers to download Blogger XML Templates at Blogcrowds Resource section. Here are a couple of our templates, Herbert, Jellyfish, Tekka, Sand Dollar in full 3 Column Blogger XML. Click the images to download the template. There are more template on Blogcrowds.com and many more to come!

Herbert

Jellyfish

Sand Dollar

Tekka

New Blogcrowds Template System

2007-01-31T16:19:00.000-08:00

I'm very excited to announce that Blogcrowds.com has a brand new template system, see it here. Now its easy than ever for bloggers to download Blogger XML Templates. Here are a couple of our templates, Rounders in full 3 Blogger XML. Click the images to download the template. There will be many more to come in Feburary.

Rounders - 3 Columns

Rounders 2 - 3 Columns

Rounders 3 - 3 Columns

Rounders 4 - 3 Columns

Google Adsense In Blogger Beta XML Update

2007-01-15T14:57:00.000-08:00

For better formatting see article mirrored.

As previously posted and mirrored here, the only way to insert adsense into the body of the post is to escape the Adsense code; meaning replace all the special characters with HTML entities, for example '<' with < '>' with > So, your Adsense code may look like this in the beginning:

<script type="text/javascript"></script>

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

And end up look like to be accepted by Blogger XML Template:

<script type="text/javascript"></script>

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

I have a special web application specifically designed to do this, see my HTML Parser here.

There are some concerns though both from other bloggers as well as myself as to if the above would be violation of tempering Adsense code as state in the TOS. So, I contacted Google Adsense Team through several emails and here they are in chronological order:

Hello Adsense Team:

This question is regarding putting Google Adsense code in new Blogger(owned by Google) into new XML templates. In order for Blogger to parse the Adsense Code in XML template, the Javascript has to be escaped, meaning replacing all the '<' with '<', '>' with '>' etc. After you publish you blog, and view the HTML code produced by the blogger, it would be the exactly the same as given from the Adsense generator. Would this be tampering of code even if the final displayed Adsense code is the same?

Thank you,
Regards

Initial email, stating the issue

Hi,

You are permitted to make minor edits in Blogger Beta. However, please keep in mind that in general publishers are not allowed to alter the AdSense ad code for any reason. Once you've generated the ad code in your AdSense account pages, you may not alter any portion of the code or manually change the layout of the ads.

Thanks for your understanding.
Sincerely,

The Google AdSense Team

mmm, kind of ambiguous, what exactly are the minor edits? So here is the follow up email

Hello:

Thank you for your reply, however I find your answer ambiguous. First you
mentioned minor edits for BLOGGER BETA is allowed and then GENERAL PUBLISHERS are not allowed to alter the generated Adsense code.

Is the 'minor' edits of escaping HTML entities for XML parsing allowed as long as when displayed in HTML the adsense code is exactly the same as given from the Adsense generator?

Sorry for asking again, I just don't want to violate the Google Adsense TOS. Thanks for you consideration and all your help.

Thank you
Regards

And this is the answer

Hi,

To clarify, while you are permitted to make minor edits in Blogger Beta, to allow the ad implementations to function properly, you are not permitted to alter the code for the purposes of changing size, font or hiding the Ads by Google logo.

Thanks for your understanding.
Sincerely,

The Google AdSense Team

There you go, AdSense does not clearly state anything however from these email I conclude that replacing special characters with HTML entity are allowed. Since Adsense won't give a clear rule, here is my own:

Minor edits on Google Adsense Code for Blogger Beta/XML are allowed as long as the resulting Adsense Code generated by Blogger is exactly the same as given from Google Adsense Code Generator.

This means if you goto your blog, eg. http://customtemplates.blogspot.com/
and click View --> Page Source (Firefox) or View --> Source (IE), the Adsense Code there should be exactly the same as given from Google Adsense Code regardless of what you put in your Edit HTML section in Blogger.

To parse your Adsense click here and for information on adsense placement see this article. More information & placement positions are coming.

Insert Google Adsense Into Blogger XML Post Body

2007-01-05T14:43:00.000-08:00

Have you ever tried to insert the Google Adsense code directly into your Blogger XML Template and get this error?

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching "[xX][mM][lL]" is not allowed.

So, you resolve to insert the Adsense code using blogger widgets. However that means your widgets can not appear within each post, the best spots to place your ads. Don't worry, there is a way of inserting Adsense code straight into your XML templates.

Since Blogger started using XML everything is more strict and standardized. The above error simply mean the Adsense code is not standized XML and solve it we need to replace all the html character such as '<' with '>' '"' with '"' please read this article.

You can use your text editor to replace all the HTML, but Blogcrowds also has an HTML parse that takes care of everything for you. Now with the code you can paste it anywhere in your HTML code with no error at all.

For further tips for where in the XML Template you should paste the parsed HTML code please read this article.

Templates Complete

2006-12-24T13:44:00.000-08:00

Today, 4 more templates are converted to 3 column Beta xml templates:

TicTac
TicTac Blueberry
Tekka
Sand Dollar

To temporarily view TicTac visit my test blog. As always you can download all the code for these template at Blogcrowds.com registeration required.

This is it people, now Blogcrowds has all Blogger Templates variation and all in 3 column, get them today.

Merry Christmas & Happy Holidays!

Moto & Snapshot

2006-12-23T14:57:00.000-08:00

Blogger Beta XML templates Moto & Snapshot series converted to 3 Column!.

They include:

Moto-
Son Of Moto
Mr. Moto
Ms. Moto

Snapshot-
Snapshot: Madder
Snapshot: Sable
Snapshot: Tequila

To temporarily view Snapshot: Tequila visit my test blog. As always you can download all the code for these template at Blogcrowds.com registeration required.

I'm on my last stretch, just 4-5 template before I complete the entire blogger series! Hopefully done before Christmas :D.

Happy Holidays Everyone!

Rawk! & Thisaway

2006-12-16T15:54:00.000-08:00

Rawk! and three column Thisaway added to our collection of of Blogger Beta Templates!

K2 Beta-fied

2006-11-29T15:12:00.000-08:00

I took sometimes and betafied another template!

This is the K2 template, as most people probably know, distributed by Geck & Fly; now it supports blogger widgets & labels as well! This template is quite beautiful, so hopefully as soon as I hear back from the Geckofly people, everyone will be able to get the code from Blogcrowds :D

Scribe Font

2006-11-26T16:40:00.000-08:00

In beta, blogger replaced the once elegant Scribe font used for labels with a more generic font. However, not to worry, find out more about the font used in original blogger here at Blogcrowds

Templates

2006-11-21T16:59:00.001-08:00

Blogcrowds.com has been offering free blog templates, notably 3 column blogger beta templates, to many bloggers out there. Today, we have decide to implement a new way to distribute these template.

Before, bloggers had to post requests under Customize Template forum and recieve the templates via email. Now, most of the available templates are posted under Template Code where, if you are registered, you can simply view or copy and paste these templates. However if you need more customization, please still post requests under Customize Template forum.

Thanks

Save Your Blogger Widgets

2006-11-21T16:57:00.000-08:00

The new Blogger is built around their new widgets. Widgets makes managing long list of links, profile, layout of your template etc easier with no HTML knowledge required. Widgets also make the template code much cleaner by saving all the necessary code on Blogger servers. However, this does present a problem if you constantly change your template like I do as simply backing up your template won't work if the widgets are deleted on the Blogger server. Many people re-populate their entire link list manually, fortunately, there is a way of saving your Widgets.

What Not To Do
The trick of course to saving your Widgets of course is never delete them, which means do not use the upload button in your Beta Template section and if you ever see the scary warning that Widget are about to be deleted, cancel whatever you did immediately.

The Correct Way
So, if you can't upload your template straight into Beta what should you do?

1) Make sure you template is in Expanded Widget mode.

2) Find your widgets and copy them from the to the very next , put it in your text editor or something for use later. Make sure you get all your widgets, you don't need to copy your header or body widgets as they are suppose to be universal across all templates

3) Open the template you want to switch to and delete your old template (back it up first if needed) and paste your new template into the edit HTML section

4) Find where you want to put the widgets, most commonly sidebars, and paste the widget code you had earlier between the and , this is very important.

5) Preview your template to make sure everything look good, save it and you are done!

I know this is probably a lot more work than you would do otherwise, but it save a lot of time if you have to type all your links over again.

Thanks, hope its helpful, article also mirrored here

Sidebar Bar Slipping Solutions

2006-11-19T13:42:00.000-08:00

Sidebar sliding to the bottom of the page is probably the biggest problem bloggers have with layout coding. This problem usually occur when an image or link is taking up more room than its suppose to; without enough space, the sidebar slide down the page. So, to solve this problem, usually people would recommend finding out which image or link is causing the problem and
remove it. However, there are two CSS methods that could solve this problem and they may be easier than going through a huge amount of content to find an image or a link.

Method One: Word Break

word-wrap: break-word;

add the above to the container, usually main content and sidebar column

This method is used in all blogger beta templates, as it suggests and as commented in the templates it "fix for long text breaking sidebar float in IE". It will break long text and links, but it won't work on images.

Method Two: Overflow

overflow:auto;

or

overflow:hidden;

add the above using either option auto or hidden to the container, usually main content and sidebar column

This property controls how overflows are rendered in a web browser for all overflowing content, link, images, and anything else. With first option auto, if anything is larger than its container, the container itself won't expand, however a scroll will appear in the container so if want to see the
entire image or link, you can scroll across as you can see in the second post at Blogcrowds Forum. The second option hidden, will tell the browser not render anything overflowing its container so part of the image or link will be cut off.

Cross-Browser CSS Tips - IE 7 Part III

2006-10-31T15:55:00.000-08:00

As I continue to code CSS & HTML for multiple browsers, I find that if you follow two 'simple' rules, your design will most of the time come out pretty much the same in all browsers.

1.) Never use padding along with width
This is probably the cause of the biggest headaches as IE 6 renders padding incorrectly. To make everything look the same in browsers, you will probably have to do some extra math and use an underscore or star html hack to set the width differently for IE. So it is advisable to never use paddings with width. If you absolutely have to use padding, create another container (div, span, p etc) and set its margins.

2.) Always remember to clear your floats
This is an IE problem that shows up most commonly in Firefox or Opera. Confused? Now let me explain. In IE 6 even when you don't clear your floats, the parent container will still rap around the inner content. However rendered correctly, the parent container would only appear for maybe five pixel at the top of the page and your child container seems to break out of its parent container and extend to the bottom of the page. So in Firefox when you see your parent container appearing only at the top of the page for a few pixel, remember to check if you cleared your floats or not.

Please keep in mind that these are tips for rendering designs the same in different browsers and not tips for how to code CSS. For example with tip number one, if you put a div that is 800 pixels wide with 10 pixels margin all around in a div that is only 800 pixels you will still get an expanded parent div, but at least it shows up the same in all browsers; whereas if you put a div that is 800 pixels wide in a div that is 800 pixels with 10 pixels padding, who knows what's gonna show up.

IE 6 Standalone - IE 7 Part II

2006-10-31T15:51:00.000-08:00

Now that I have upgraded to Internet Explorer 7, it of course removed Internet Explorer 6. This present yet another problem for browser testing for IE 6. It is not possible to run to versions of Internet Explorer...now wait a minute, here's something interesting, you can download the standalone version of Interenet Explorer 6 here. Simply download the last file, unzip the file and put everything in a folder somewhere and you're good to go.

Because of the standalone IE probably use some functions from the shell, which is integrated with Internet Explorer 7, you can see some of the feature from IE 7 in the standalone such as the little icon for some sites in the address bar. Don't worry though, the standalone still renders webpages incorrectly just as IE 6 does...in this case, that is a good thing.

Internet Explorer 7.0

2006-10-30T14:15:00.000-08:00

Like many others, I upgraded to Internet Explorer 7.0 from Internet 7.0 Beta sometimes last week. I didn't give a second thought about it since Firefox (version 2.0 was release a week later), not Internet Explorer was my native browser. Not until yesterday did I get a huge wake up call to do some browser testing to see my sites show up ok in 7.0.

Internet Explorer 6.0 and below are notorious for not conforming at all to the CSS/HTML coding conventions and your webpage show up in a mad jumbo. Why I don't know, all I know is how to implement some inconvenient but absolutely necessary CSS hack to make sure everything shows up at least close to how it is suppose to look in Firefox and Opera (I mostly use the underscore '_' hack and star html '* html' hack for IE 6.0).

To my great relief, when I typed in http://www.blogcrowds.com in the IE 7.0 address bar, my site Blogcrowds.com showed up fine if not better in IE 7.0. That, I give my thanks Bill Gates :).

I guess the reason that I forgot about testing my site for IE 7.0 and not testing when I got IE 7.0 Beta was because I thought most users will still be using IE 6. My initial thought, perhaps influenced by some 'internet browser trend analyst', was that IE 7.0 will be shipped with Windows Vista sometimes in early 2007 but most users who does not switch to Vista will still be stuck with IE 6.0 for another couple of years and still taking up most of browser population. Now it looks like IE 6.0 will be obsolete sooner than I expected (hopefully), which is a very good thing and I could stop worrying about hacks :D. Something else I will be looking forward to is the 'new' age of online images with .PNG for better qualities and transparency (which isn't really recommended because IE 6.0 does not render transparent .PNG properly). And again, thanks to Bill Gates.

Blogcrowds Directory Launched!

2006-10-27T15:36:00.000-07:00

I am happy to announce that Blogcrowds.com has launched its own directory at http://www.blogcrowds.com/directory/. Feel free to add your blogs to our directory, it however does require a recipical link as our directory is not a 'no-follow' one like many other directories and every link included in the directory goes toward Page Rank as well. Thanks.

Over the next period of time we will also look for some feedback on the directory, categories etc. So please post your comments about the directory in the feedback forum. Thanks again

4 Column Blogger Beta Template

2006-10-22T12:29:00.000-07:00

I have a request for a four blogger template (see it here). So I sat down today and tried my hands at his. You can go to http://blogcrowds.blogspot.com/ to see my progress so far.

If you have any similar request/changes feel free to visit Blogcrowds forums and get in touch :)

3 Column Blogger Beta Templates

2006-10-02T15:44:00.000-07:00

I have finally had time to sit down and modify some Blogger Beta Templates. Today, I did all the Rounders template so all the new blogger features are included with labels and everything. You can also see the Rounders 2 template at work at http://point23.blogspot.com/ and Rounders 4 template at http://blogcrowds.blogspot.com/. If you wish to use this and other templates free please click here.

Tommorrow I will probably modify the 565 and 897 templates than maybe the rest of the Blogger Templates or finally converting my own templates. Thanks :)

565 3 Column Template

2006-09-03T14:07:00.000-07:00

I have modified the 565 blogger template into 3 column liquid

Click the image to see it at work. To use this and other templates free please click here. In the mean time, I'm also interested to exchange links with someone who will use this template on my template section.

Icons Icons Icons!!!

2006-08-29T17:04:00.000-07:00

IconBuffet is addicting. Sign up and be prepared to get caught in the icon mania.
— Traci Knoppe

The above quote is taken from IconBuffet and it quite literally describe the site. Once you signup for the site you are instantly addicted to the nifty icons offered. This addiction will probably only be rememdied when you collect all the icons on site and every decent icon on the web. So go to IconBuffet right now and check out the icons!

If you wish to obtain some icons from me for free just leave your email address here, enjoy.

Scribe 3 Column

2006-08-27T15:52:00.000-07:00

I have modified the blogger template Scribe into a three column liquid template.

Click the image to see it at work. To use this and other templates free please click here.

Font

2006-08-26T15:20:00.000-07:00

Most people are probably satisfied with the fonts pre installed into their home computer. However for the rest of us and the typophiles (not sure that's a real word) there is never more than one font that satiifies the task at hand. Fortunately there are many font site out there that allows you to buy or download a font for free.

Today, I'm going to introduce one of my favorite font site, daFont.com. Like many other font sites, daFont.com has a huge collection of fonts, at the time of this writing 6932 fonts of which : 1769 has accents, 1062 has the Euro symbol. Unlike other font sites, daFont.com layout is extremely clean but more importantly, the fonts are organized into specific groups and categories. This makes its a lot easier to choose the exact font (if there is such a thing) you need in minutes. For example, if I want gothic fonts and download any that suits my purpose and a few more that I really like. Some of us will of course take hours to browse all the font available several times over :)

To conclude I will show some fonts I used in my templates:

Neuschwantein:Street Sign

Blogger Beta: Editting HTML with Label

2006-08-20T15:25:00.000-07:00

Everyone probably know by now to use new Labels in Blogger Beta means you cannot edit the HTML/CSS.

From editing my MySpace profile, I'm use to this kind of thing. So to add html or css to the Blogger Beta WITH the new feature such as labels you can create a post, in the Edit HTML section add your CSS and HTML make sure there is no unwanted HTML markup such as Blogger adds automatically, double check this, even when you think there is none left, blogger may add one at the end, so its advisable to enter everything in a line. Here's a sample.

Of course, this makes editing template a bit difficult (not as hard as myspace though), by only changing the stylesheet. Those of us who just editted the CSS & left the HTML alone in the original Blogger would be very lucky indeed!

Blogger Beta Nav Bar Update

2006-08-18T16:30:00.000-07:00

This is completely outdated, there is a far more efficient technique available just insert

#navbar-iframe{
visibility: hidden;
display: none;
}

Somewhere in your css styling.

Update for the previous Blogger Beta nav Bar hack step #3. Instead of of step #3, you should change whatever the container of the entire page is to its original. Then add this to the styling css:

#center{
position:absolute;
z-index:20000 !important;
top:0px;
left:0px;
}

then in the html add the following to the beggining of all your content <div id="center"> and </div> to the end of all your content.

For more information and tips & tricks please visit again soon or sign up at Blogcrowds.com.

Blogger Beta Nav Bar Hack!

2006-08-17T12:54:00.000-07:00

This is completely outdated, there is a far more efficient technique available just insert

#navbar-iframe{
visibility: hidden;
display: none;
}

Somewhere in your css styling.

By now everyone has probably heard of new Blogger Beta. I personally didn't sign up until someone asked me for Beta assistance. One of his problem is that the usual code (visibility:hidden) used to hide the navigation bar does not work in beta. So,I approached this problem and found out that Blogger Beta linked the nav bar in iframe with external CSS instead of a hude jumbo of javascript and any code you add does no effect the nav bar styling.

So, I took a different approach and decided to block it instead, so here is what I came up with, please do not copy anything in red, they are comments:

1.) Add the following to the css styling

#block{
width:100%;
height:40px;
background-color:rgb(232, 234, 236); change to your own background color
z-index:10000 !important;
position:absolute;
top:0 !important;
left:0 !important;
}

2.) Add the following anywhere in your body tag

<div id="block"></div>

3.) This step is optional and needed to be changed for your own template

#container{ or whatever that wraps around the content
position:absolute;
z-index:20000 !important;
top:5px;
left:110px;
rest of your styling goes here
}

The top and left property may need to be adjusted. Please note, this technique will not center the content in all browser resolutions, I'll come up with a solution shortly(I already have something in mind, just needs to be tested first).

Please credit this hack to me, and for more information and tips & tricks please visit again soon or sign up at Blogcrowds.com.

I want to conclude to say that I came up with this hack merely because someone asked me to solve a problem, I have no problem with the Blogger nav bar, I show the Blogger nav bar in all my blogs and use it quite often :).

Field of Dreams

2006-08-14T16:29:00.000-07:00

The newest edition to our template collection! Yep you are looking at it, Field of Dreams currently used as this blog's template. If you wish to use it please check out the links :)

Background

2006-08-11T17:28:00.000-07:00

This is the first of what I hope to be a series of entries about various important CSS elements essential in blogger templates. So I am going to start with the ever present background element

Why Use Background
There are basically two ways to insert an image into HTML, one by applying the image as foreground using <img> tag or background using background CSS style. Generally you would use background if there will be text on top of the image or the image is very small and part of the decorative element. Otherwise, for the content of your web page use the <img> tag.

Background Properties
There are five basic background properties:

Background Color - color hex / color rgb / color name / transparent
The default property is transparent. The other three choices are different ways to express color on the web. An example of hex is #000000 or #000, rgb is rgb(0,0,0), color name is black. Background color is often used in combination with background image to save image size.

Background Image - url / none
The default value for background image is none. The url property is used to link the background image to an existing picture.

Background Repeat - repeat / repeat-x / repeat-y / no-repeat
As the name suggests background repeat determines if the image applied to the background should repeat or not. This property is also used to save image size and can be seen in Neuschwanstein where the entire background is a repeated tile. The default property is repeat while the three other value are pretty self explainatory repeat-x mean repeat along the x axis (left-right only) repeat-y mean the y axis (up-down only) and no-repeat means no repeat.

Background Attachment - scroll / fixed
The default property is scoll which means the background image will scroll with the scroll bar while with the fixed property the image will always remain on the screen no matter how far down the screen you go.

Background Position - top left / top center / top right / center left / center center / center right / bottom left / bottom center / bottom right / x-% y-% / x-pos y-pos
The background position is used in combination with your background image, it dictates where the image will start. The values it take are listed above and the numerical values goes left-right first then top-bottom.

Finally there is the Background: property is self, it takes all of the above background properties recommended in the order they are listed, saving a lot of precious time :)

3 Column Liquid

2006-08-08T16:47:00.000-07:00

I have just finished modifying blogger templates so that all of them are in three column liquid layout.

So far I have done 565, 897, Dots, Minima, Rounders, Scribe and most of their variations. To use these templates free of charge please click here.

Meanwhile, because of the amount of templates, instead of creating a blog to showcase each like I do with my own templates, I would wish to link to people who uses these templates. Because of the possible potential of this blog, link from this blog maybe very advantageous. For more information please also go to Blogcrowds.

The rest of blogger template modifications are coming soon.

Thanks.

Medieval Templates

2006-08-01T15:49:00.000-07:00

The two templates Neuschwanstein & Abode of Crow I made initially with a castle/medieval theme in mind. These two templates shares many things in common. They are both centerpieced around the theme developed by their header.

Abode of crow features the ancient remains of a tower on an omnious day with crows flying overhead. The brown and purple used enhances this mood to a point that I wish I had sound tracks of crow kaw to add to it.

Neuschwanstein is a Bavarian Castle with an interesting history. Because of this, the template somewhat focuses on a regal, fairy tale theme. To develop this theme an original photo of the castle is enhanced. The photo is recolorized for a monochromatic blue with blue and sharpening applied for a more picturesque appearance.

I found the font English Gothic 17th Century combines very nicely with both template. For more information about the two templates click on the respective links. To find out how to get his template click here.

A Lot Of Work Ahead!

2006-07-30T14:36:00.000-07:00

Alright just finished designing this blog. As you might have read above, this blog is created about Blogger templates and more specifically about design/coding. So feel free to ask me any question here or at Blogcrowds.com.

This blog right now has a modest collection of blog templates (links to the right) however, I hope to change that soon. My first project is to make modifications to all the exisitng default blogger templates. Hopefully this won't take too long so visit again soon!