Blogger Templates

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.

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.

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

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!

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.

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 :).

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 :)

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 :)

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.

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.