Owner: Elque's Blogger Templates URL:http://dzelque.blogspot.com/ Join Date: Mon, 18 Jun 2007 09:12:08 -0500 Rating:0 Site Description: Free new Blogger templates - great template selections, Adsense-based, and extremely easy customization Site statistics:Click here
Blogger Templates: Thris 2007-06-15 12:33:00 Download | DemoThis new template has 3 sidebars with one large sidebar at the top. I made it specifically to put your large Adsense box in there (see the demo).When installed, upload your own header image with size 520 x 145 pixels. Also, don't forget to fill in the Linkbar URL box next to your header image. Read more:Blogger
, Templates
Blogger Template: NuKleen 2007-06-10 16:18:00 Download | DemoThis template is an improved version from the Kleen template. More careful tweaking was given to minor details - the outcome is a much cleaner template. I've tweaked almost all parts of the template elements to make sure that everything blends nicely together. As always, you can do major changes simply from the Fonts and Colors tab.When installed, don't forget to upload a header image and fill in the Linkbar URLs. The image size has to be 950 x 200 pixels. Another thing, I've included an option to add banners below the header - this is great for those who'd like to put large horizontal ads there. See my demo blog to check this out. If you don't like this option, you can always leave it empty. It'll work fine.I use an image as a background of the body. If you want to get rid of this and use a plain colored background instead, simply delete the red part of the code below. Then use the Fonts and Colors tab to modify the background color. Locate this code in Section Read more:Blogger
Blogger Template: NuBordr 2007-06-09 21:53:00 Download | DemoThis is a variation of the original Bordr template. Again, you have to upload your own header image (size: 950 x 150 pixels) and fill in the Linkbar URLs when first installing this template.The major difference is that I made the large border thicker than in the Bordr template, plus some minor CSS changes in the layout graphics and positioning. Other than that, I made all the other font and color changes from the Fonts and Colors tab, which you can also do easily.I made this template variation to show that you can do a lot of customization (or damage, however you will) from the Fonts and Colors tab alone. Plus, the thicker border might be more appealing to some other users.I also put my template credit further down to the edge of the screen to 'hide' it from spoiling the beauty of your blog. This is my way of saying 'please don't delete my credit to this template design if you don't change the CSS code much'. To me, giving due credit to the rightful person is an i Read more:Blogger
Blogger Template: Bordr 2007-06-08 14:05:00 Download | DemoThis template is named Bordr for its bordered feature. When first installed, you must put your own header image (size: 950 x 150 pixels) and fill in the Linkbar URLs in the Header section. Otherwise, the Header will be empty. Another new feature on this template is that you can add a large horizontal ad banner just below the Header. This is really neat for those of you who like large ad banners at the top. check out the demo.You can modify this template easily from the Fonts and Colors tab in the Layout page. Among other standard easy customizable items, you can also change the thick and thin border colors.On this 22nd Blogger
templates, I have refined a lot of my techniques creating the templates. The template and the layout page is now much cleaner, and I've solved a lot of small alignment bugs between different browsers. So I'll be using this template to build on newer templates.It'll be good to know what you guys really like or want in a 'monetizing template' in
Setting the Template Size 2007-06-06 18:13:00 Blogger Template Design: Tutorial 7Tutorial 6: Using the Generic Blogger TemplateSetting
the template size is probably one of the first things you need to do when starting to design a new template. The are two ways to set the size (basically the width) of a template:Setting the size to be fixed with a certain width, say 800 pixels.Setting the template to have a fluid size, which means the width changes with the browser or screen size.Setting a fixed template size:To set a template width, you actually have to set the width of a few large containers. The most common containers to set the widths are:BodyOuter-wrapperHeader-wrapperContent-wrapperFooter-wrapperMain-wrapperSidebar-wrapper*Footer-wrapper*Note: You can also just set the widths of sidebar1 and sidebar2 containers without setting the sidebar-wrapper width. Setting the sidebar-wrapper width is convenient if both sidebars have equal widths.In most of my newest templates, I also set the widths in the containers just inside some of
Using the Generic Blogger Template 2007-06-05 19:37:00 Blogger Template Design: Tutorial 6Tutorial 5: Common Containers and Elements in a Blogger TemplateTutorial 7: Setting the Template SizeHere I'll explain how you can use the Generic
Blogger Template to practice on tweaking the codes and modifying your templates. The ultimate goal is surely for you to know how to design your own template, but knowing how to modify the template first (and to get a feel how the template 'react' to your code modification) is an important step that you need to go through before starting to design your own template.Changing your template is not as simple as changing or adding some codes, hitting the "View Blog" button, and thinking that everything will go as perfect as you plan. Lots of the time you'll see things go off differently from what you've expected. Especially if you're not a web programmer. I'm not one and I did go through a lot of going back and forth between the "Edit HTML" page to the "View Blog" page before getting what I really wanted. Read more:Blogger
Common Containers and Elements in a Blogger Template 2007-06-05 09:38:00 Blogger Template Design: Tutorial 5Tutorial 4: Setting the Properties of a ContainerTutorial 6: Using the Generic Blogger TemplateHere's a list of all the common containers and elements in a Blogger template and their funtions (elements are basically any object that make a blog funtions and containers are large elements that contains smaller elements or some other contents).These common elements that I'll show are not necessarily the elements that exist or must exist in all Blogger templates, but are just some common elements that controls a large part of your template style. Knowing these elements will make it a lot easier for you to know where to look for in the template code and how to deal with other new elements that you may find in other templates.I'm not going to list all the elements, but only enough elements so that you get the ideas and can understand all the other elements on your own. I will refer to the images from the CSS Styling Section below to make things easier to Read more:Blogger
, Common
Setting the Properties of a Container 2007-06-04 15:34:00 Blogger Template Design: Tutorial 4Tutorial 3: The Structure of CSS Styling SectionTutorial 5: Common Container
s and Elements in a Blogger TemplateIn this tutorial, you'll know the basics of what code sets the properties of a container. To make things simple, we'll look at 2 container blocks only - Main and Post. Once you know these, the basic ideas for all the other containers are pretty much the same.Here is a sample code for the 2 containers:#main {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;min-width: 400px;max-width: 400px;background: $mainbgColor;color: #111111;font: $textFont;}.post {margin: 0px 20px 10px 0px;padding: 10px 20px 10px 2px;line-height: 1.5em;text-align: left;background: $postbgColor;}The #main and .post are the titles of each containers. Each container codes must be contained within {...}. For the explanation below, we'll focus on the codes inside the post block, especially for the explanation on the margin and padding (the codes colored in red).Margin - se Read more:Setting
, Properties
The structure of CSS Styling Section 2007-06-04 01:36:00 Blogger Template Design: Tutorial 3Tutorial 2: The Structure of a Blogger Template CodeTutorial 4: Setting the Properties of a ContainerIn this tutorial, I'll show you the structure of CSS Styling Section
, which is the 2nd Section in the Blogger Template Code Structure. Again, not all templates have the same structure. It basically comes down to the personal style of a designer. But I've found out the structure that I'll show you is quite logical and makes things a lot easier when coding, debugging, and customizing your template. Once you've understood this tutorial, you can later change the style and structure any way you want. But first you have to understand them and I've put out here a very easy structure to understand and use.I've cut down the CSS Styling Section into 9 smaller subsections. For now, I'll describe the subsections in general. We'll get to the details on the coding inside these subsections later in the following tutorials. Always refer to the Structure of a
The structure of a Blogger template code 2007-06-04 00:56:00 Blogger Template Design: Tutorial 2Tutorial 1: The Structure of a Blogger TemplateTutorial 3: The Structure of CSS Styling SectionHere's what the structure of a Blogger template
code looks like, in a simple way of looking at it. I'm using my Generic Blogger template as a reference, but the idea is the same for other templates also. I've separated the code in 3 sections and show only the top lines of each section so you can look for the starting lines later on.To see more of these codes in detail, download my Generic Blogger Template.Section 1:The 'header' of the code. Basically it contains important information about the template code and the title of your blog. Best of all, you don't have to worry about anything in this section. It's a standard header for all templates. The only time you add some codes here is when you want to put some meta tags (additional information about your blog for SEO).Section 2:This is the CSS Styling Section. CSS stands for Cascading Style Sheets, a w Read more:Blogger
The structure of a Blogger template 2007-05-31 21:43:00 Blogger Template Design: Tutorial 1Introduction: Tutorials on Blogger Template DesignTutorial 2: The Structure of a Blogger Template CodeBefore designing a template
, you must have an idea of what the basic structure of a template is. Generally, the actual structure of any templates are not exactly the same. But, by knowing the basic structure, you can easily get the ideas of how to tweak your existing templates, design a template, and how to change it into a different structure.Some parts of the template structure are obvious from what you can see on most blogs: the headers, footers, and posts sections. But there are some sections (I'll call these sections blocks or containers afterward) that are not visible on the computer screen, but important HTML-wise to build a practical and proper working template.To start off, a template structure basically contains blocks of containers that looks like this:Going from the biggest to the smallest blocks:Body: the outer most block is the Body of Read more:Blogger
Blogger Template: FlexiBlox 2007-05-31 12:53:00 Download | DemoThis is a variation of the original Blox template. This one is more flexible in the way that you can change the body background color and the Linkbar properties from the Layout page.Don't forget to fill in your Linkbar URLs! Read more:Blogger
Blogger Template: Blox 2007-05-29 20:43:00 Download | DemoI gave it the name Blox because the contents are put in blocks. That's why. No biggy. As usual in my latest templates, you have to fill in the Linkbar URLs so that the header is not cut off.I personally think this one is quite neat because I had to be more careful when designing it compared to other templates especially on the spacings. By making the blocks separated away from each other, I'm making the contents drift apart too. So, that's why I had to be a bit more careful when tweaking the blocks, text, and background so they would blend mildly - and I think it works fine.As always, you have a great degree of freedom to customize it to your taste. About the background color, you can only control the Comment background (I'll make a different version later for a changeable body background).Note: For this template, if you want to put ad codes, it's better to give the widget a title; otherwise, the ad block will be cut at the top. Read more:Blogger
Having problems with my templates? 2007-05-29 16:33:00 I've noticed that some people who have been using my templates face some little bugs, mostly with alignment. When creating these templates, I have, at my best, tried to make sure that they're all bugs free and I have the tested version in the demo pages in IE and Firefox. So, carefully check the demo pages. But I surely can't control all the loose bugs flying off here and there in little places.If I do find these bugs, I'll deal with them in two ways. First, I'll correct them by upgrading the template into a newer version and post it as a new template (with maybe some little changes on the template look that you can always change back easily later on). So, if you have these little problems
, do check back in here to see the updated version or tell me about the problem in the comment section.Second, I plan to make a short tutorial on how to go about designing and tweaking your Blogger template. I'll probably have them done in a couple of week or so, so do check on these to start fi Read more:Having
, Having problems
Blogger Template: JournallBlue 2007-05-28 14:34:00 Download | DemoHere's another from the template family Journall. The changes is the bluish (or more like purplish) background, and that the header image is your own header image! Read here on how to upload your own header image. The header image size must be 520 by 150 pixels or otherwise your header will be cut off. Read here to know how to put your own header image. The neat thing about using your own header image is you can just about put anything you want there to your liking and taste - so that's entirely unique to you.Don't forget to fill in your Linkbar URLs too in the header section. Read more:Blogger
Blogger Template: JournallRed 2007-05-27 19:36:00 Download | DemoThis is another template from the Journall family with a redish background. The header has been changed slightly - you can customize the header text and background colors from the Layout page. Linkbar colors can be changed easily too.Don't forget to fill in your Linkbar URLs so that the header is not misaligned. Read more:Blogger
Blogger Template: JournallGreen 2007-05-23 19:30:00 Download | DemoThis template is perfect for text-heavy blogs. It's based on the original template Journall. Read more for uploading instructions. Read more:Blogger
Blogger Template: Journall 2007-05-23 18:19:00 Download | DemoThis template is perfect for text-heavy blogs. The design is made simple and plain with clean white background - great for lots of text. The fonts and colors can be easily customized, but the color combination that's most suitable for a journal type blog is the default one.Note: Fill up the URLs in the Header Linkbar to avoid your header from being misaligned. Read more:Blogger
Blogger Template: KleenGreen 2007-05-22 12:52:00 Download | DemoThis template is similar to the template Kleen. I just changed the header image from the Header Edit button, and changed all the fonts and colors from the Fonts and Colors in the Layout page just to show that you can customize a lot even without tweaking with the HTML code.Note: Remember to upload a header image with 950 by 150 pixel size and fill up the Linkbar when you use the template. Otherwise, your Header will be cut off. Read more:Blogger
Blog 'Table of Contents' 2007-05-21 21:48:00 Aside from designing, I've also posted some guides and instructions related to template design, installation, and use. To make them easier to find, I've compiled all guide-related posts in this 'Table
of Contents
'.Template Guides and Instructions:Installing the template in your blog.How to upload your own header image.Customizing the templates easily.Tips and problems when installing templates.Having problems with my templates?Tutorials:Tutorials on Blogger Template Design Miscelaneous:Compilation of other useful posts.
How to upload your own header image 2007-05-21 20:15:00 It's much better to use your own header
image than the image already defined by the designer or just the simple plain background. For one thing, you can be sure to have a unique header compared to the rest of the blogs. The second reason is that you can write your blog Title and Description with much nicer fonts and color combinations.Before that, you have to make sure that your image size will align well with the rest of the Header section. Turning the Title and Description text on or off can also mess up you alignment. For my templates, I've already given instructions for perfect alignment.So, how to do this? Simple...1. Go to the Layout > Template > Page Element. From there, click the Edit button for your Header. The screen below will pop up.2. Upload an image from your computer. Make sure to that your image size is correct or otherwise your Header will be misaligned! Save your changes. (Don't forget to fill in your Title and Description in the text box above! You can turn the te
Blogger Template: Kleen 2007-05-21 19:48:00 Features:Very clean interface with user-defined header image and well-blended linkbar.Download | DemoWhen installed, you must upload a Header image with size 950 x 150 pixels when giving your blog a Title and Description in the Page Elements section, but turn your Title and Description text off (click here for more details on how to do this). Also, fill in the Linkbar URLs. These two must be done, otherwise the Header will be cut off. I made it this way to allow you the opportunity to use any header image you like with perfect alignment. This will make your blog more unique. Don't forget to write down your blog Title and Description on the header image because you've turned off the actual Title and Description text! Read more:Blogger
Blogger Templates 21 - 40 2007-05-20 14:40:00 All templates | Templates
1 - 20Click below to view the demo page or download the xml file. The order starts from the most recent one.Templates 21 - 25:Read the Help Links below for more installation guides (or see the Table of Contents for a complete list):Installing the templates.Using your own header image.Customizing the templates easily.Tips and problems when installing the templates. Read more:Blogger
Blogger Template: DzelqueMaroon 2007-05-19 21:32:00 Download | DemoThis template is designed to be completely customizable by any bloggers. When installed, you must upload a header image with size 900 x 160 pixels when giving your blog a Title and Description in the Page Elements section, and fill in the Linkbar URLs. Otherwise, the Header will be misaligned. This is made to give you the opportunity to put any header image you like with perfect alignment.The color of the main/header borders and date-header background are all controlled by the Linkbar Background Color. The content background colors, all text colors, and all font types can be modified from the Fonts and Colors tab in the Layout section. Read more:Blogger
Compilation of useful guides 2007-05-15 19:14:00 In the process of creating this blog and producing materials and templates for the posts, I had to go through a lot of readings related to blogging, monetizing, Adsense, HTML coding, template design, ad positioning, and what not. There were lots of tiring hours Googling to fetch the good reading materials among the haystack of so-so ones. Rather than just leave them stacked untouched in my folders, I thought it'll be better if I just put them up here as a Compilation of Useful Guides for others to have them handy. It'll be quite a service for me to put down some of the stuffs that might be valuable. I'm placing them in proper categories (but not in the order of importance):Blogger Template Hacks and Tips:How to put Adsense code into your Blogger post body?How to insert Adsense code into your new Blogger post body?Inserting Adsense inside your post in the post-page only.Adsense code parser by Blogcrowds to put the code inside the post.Adding language translator to your blog.Monetizi
Tips and problems when installing templates 2007-05-19 18:38:00 Here are some tips you can use to improve reliability on using these templates and some problems
you might encounter when installing and how to solve them.Tips on using background images:The background images (images of the header, main background, content background, title bar, list background, etc) are stored in my flickr account. I can't guarantee the reliability on fetching these images all the time. So I suggest that you upload the images for a particular template that you're using and store them somewhere else. Simply get the image URLs from the xml code and change the URLs in the code (in red) to point to the new address of the images.Example of code:background: #000000 URL(http://...........) repeat left top;Check all URLs in the CSS styling section and not just the first one you see in the code.Caution with Header section alignment:If your Header section look misaligned the first time you upload any template into your blog, that's probably because your Header Title and Desc
Blogger Template: MidBasyc 2007-06-24 17:43:00 Download | DemoThis template is another variation of the original template Basyc. The major change is that the Post column is placed in the middle. Plus, I made some minor code tweaking to make it a little bit different from the original template.As usual, you need to upload a header image (900 x 200 pixels) and hide the default Blog Title and Blog Description texts. I saw some blogs that use my templates forgot to hide the Blog Title and Description texts; the header would have been much nicer if they hide these texts and made their own Title and Description texts as part of the header image graphic. Read more:Blogger
Blogger Template: FulBasyc 2007-06-22 22:26:00 Download | Demo This template is a variation from the Basyc template; the changes were made simply by using the Fonts and Colors tab - no XML and CSS tweaking! This is just to show just how much you can modify easily without tweaking the codes. When installed, you need to upload a header image with a size of 900 x 150 pixels and fill in the Linkbar URLs. It's best to hide the Blog Title automatically set in the Header and use your own Blog Title text written on your header image. Read more:Blogger
Blogger Template: Basyc 2007-06-22 18:42:00 Download | DemoThis new template is an improved version of the older template Kleen. It's much more versatile and flexible in that it's so much more customizable in a much neater way compared to all the older templates. There are a total of approximately 55 items that you can customize, including some borders and header underlines. For this template, the customization items are ordered more clearly in the Fonts and Colors list.Once installed, you must upload a header image with a size of 900 x 150 pixels. It's best to hide the Blog Title automatically set in the Header and use your own Blog Title text written on your header image. The header image is bounded within a 3-pixel border with a color that can be set easily. If you don't like the border, simply set the border color to blend with the background color.I made this template with a somewhat 'basic' layout because there's a lot of people that have been using my Kleen template and liking it because of its simplicity. So I f Read more:Blogger
About 2007-05-15 11:28:00 I made these free templates especially for bloggers who'd like to put Adsense or any ad banners on their blog. The template themes are quite general with simple color combinations to make the graphics pleasant and non-intrusive to the readers, which are very important features for a monetizing blog. The main and sidebar layouts are designed to fit Adsense units or other ad banners.Plus, I added extra items in the code so that you can modify lots of fonts and colors easily from the Layout page without knowing anything about HTML programing. You can use these templates freely; but I wish that you leave my link at the bottom of the template, or link a credit to my blog.I'm doing this template design because when I first started a blog to put ads, I couldn't really find templates that blend well when I put Adsense units in it (at least, it didn't feel that way for me). Mostly it was because they only have 2 columns. Some 3-column ones were modification from the basic Blogger templates;
Recommend Site To A Friend
