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
Customizing the templates easily 2007-05-14 14:20:00 To make customizing the templates easy for everybody (even without HTML background), I added some items in the HTML coding so that you can change the color and font properties of most of the important elements. Below are the things that you can change simply by going to the Layout > Template > Fonts and Colors section in the Dashboard. From there, simply choose any items that you want to change and pick a new color or font from the dashboard on its right.Example: You can see in these two templates, Kleen and KleenGreen, that you can modify a lot simply by using the Fonts and Colors dashboard without tweaking the HTMLs.In most of the templates, the link only changes color when your mouse hovers over it. I use the variable Hover Link Color to control the hovered link colors. But, before 22/5/2007, I used the variable Visited Link Color to control the Hovered Link Colors.In some cases, the fonts or colors won't changed after you've changed them in the Layout page. That's because I've
Blogger Template: Hazy 2007-05-10 17:03:00 Design: HazyTemplate File: Click hereDemo: Click hereDesigner: Elque | 10 May 2007Design Theme: Cool, easily customized, with linkbarRead here for the list of easily customized items.Caution: When you first upload the file into your blogger, the linkbar will be empty and your header image might be cut off. Don't worry! Go to the link list below the header section and fill in the URLs that you want, and everything will be okay. Read more:Blogger
More Explanation about the Body Code 2007-06-28 13:20:00 Blogger Template Design: Tutorial 9Tutorial 8: The Body Section of the Blogger Template CodeIn this tutorial I'll explain a bit more about some special commands that you'll see in the Body section of the code. Here's the sample code again below:<body> <div><div><!-- skip links for text browsers --><span><a href='http://dzelque.blogspot.com/feeds/posts/default#main'>skip to main </a> |<a href='http://dzelque.blogspot.com/feeds/posts/default#sidebar'>skip to sidebar</a></span><div><b:section maxwidgets='1' showaddelement='no'><b:widget locked='true' title='Blog Title' type='Header'/></b:section></div><div><div><b:section showaddelement='no'><b:widget locked='true' title='Blog Posts' type='Blog'/></b:section></div><div><b:section preferred='yes'></b:section></div><!-- spacer for skins that want sidebar and main
The Body Section of the Blogger Template Code 2007-06-27 09:49:00 Blogger Template Design: Tutorial 8Tutorial 7: Setting the Template SizeTutorial 9: More Explanation about the Body CodeIn this tutorial, I'll explain the basic structure of the Body of the code so that you get the idea on how it works with the rest of your code. The code is located in Section
3 of the Blogger Template Code Structure. This is the main part of the Blogger template code that retrieves the data to be displayed on your blog. It's basically the core part that makes your whole blog functions. The code that sets how it appears on your blog is the CSS Styling code.Refering back to the tutorial Blogger Template Code Structure, the Body code is in Section 3 as shown in the image below.Shown below is the Body code copied exactly from the Blogger Edit HTML page with the 'Expand Widget Button' unchecked. I do not want to include the complete code by checking the 'Expand Widget Button' for 2 reasons. First, it's not necessary to do this. You actually don't even have to know Read more:Blogger
Blogger Template: inSydes 2007-06-27 04:11:00 Download | DemoThis is my 30th template, derived from the original template Sydes. When installed, you need to upload a header image with a size 550 x 200 pixels. Don't forget to fill in the Linkbar URLs too. Read more:Blogger
Blogger Template: Sydes 2007-06-25 16:07:00 Download | DemoThe idea for this template came from one of the comments I received in this blog. It was a question on how to make a sidebar that goes up all the way next to the header. My quick thought was that it was an easy thing to do; simply make a new wrapper for the sidebars and boom they go. But making it work is far from easy, if not difficult.Like always in my templates, once installed, you have to upload a header image with a size of 550 x 150 pixels. The name Sydes refers to the focus that I put to make sure that the sidebars work the way they do in this template. Read more:Blogger
Blogger Templates 1 - 20 2007-06-10 16:41:00 All templates | Templates
21 - 40Click below to view the demo page or download the xml file. The order starts from the most recent one.Templates 1 - 20: Read more:Blogger
Tutorials on Blogger Template Design 2007-06-05 20:44:00 Tutorial Contents:Tutorial 1: The Structure of a Blogger
TemplateTutorial 2: The Structure of a Blogger Template CodeTutorial 3: The Structure of CSS Styling SectionTutorial 4: Setting the Properties of a ContainerTutorial 5: Common Containers and Elements in a Blogger TemplateTutorial 6: Using the Generic Blogger TemplateTutorial 7: Setting the Template SizeTutorial 8: The Body Section of the Blogger Template CodeTutorial 9: More Explanation about the Body CodeBlogger Template Design: IntroductionThis tutorial is a very quick guide to teach you how to change or design your own Blogger templates. It's easy to understand and follow, especially to those who has no knowledge in HTML programming.The tutorial is split into a number of sub-tutorial modules that explain specific parts of Blogger template design in detail. The best way to learn is by going through the module sequence one by one. But if you are familiar with the basics, you can jump into the more advanced modules. The earlier Read more:Tutorials
A Generic Blogger Template 2007-06-03 13:06:00 Download | DemoThis is a generic Blogger
template meant to be used as a testing and learning template for bloggers who want to learn more about Blogger template design.Use it together with the tutorial on Blogger Template Design, or click here for explanation on how to use it. Read more:Generic
Testing in Other Browsers 2007-07-05 09:35:00 (This is a sub-post from Tutorial 11: Starting Your Own Blogger Template)Personally, I don't like this stage. It's annoying that other browsers might show your blog differently than the blogs you're designing it in. But if you want all to have access to your blog and see it as nicely as you've designed it, then you have to go through this process. As for my blog and my demo blogs, I designed them in Firefox and testing it in IE7. I've received comments that people using IE6 have some trouble with the templates, but I didn't test them in IE6, and not about to trouble myself downloading IE6 and debugging the codes. The way I see it, if Firefox and IE7 get it right, then it's IE6 that's got the problem (not my templates) and it's IE6 that has to debug itself. Anyway, isn't that why IE7 is made in the first place?I don't really have a tip for debugging. You just have to have patience and solve the problems one by one. The way I avoid problems is by writing a stricter code so the Read more:Testing
Tweaking the CSS Code 2007-07-05 09:17:00 (This is a sub-post from Tutorial 11: Starting Your Own Blogger Template)This is the crucial part of designing - setting how your blog looks like. By this time the widths of all the containers inside the CSS code should have been set. What you need to know about tweaking the CSS code is that it's a recursive process - it's a process of refining that always repeats back and forth until you're 'happy' with the end result.There are so many things to tweak and so many containers to customize. So how do you this and where do you start? The easiest approach is to start from the top. Assuming that you're starting from an existing template, at this point you don't have to worry much about customizing the body, outer-wrapper, and content-wrapper. You can tweak these containers later. If you want to use an image as a background image of the whole template, you can also do this later.Read Tutorial 3: The Structure of CSS Styling Section first if you're not familiar with the basics of the Read more:Tweaking
Starting Your Own Blogger Template 2007-07-05 09:05:00 Blogger Template Design: Tutorial 11Tutorial 10: Making a 3-Column Template and More ...Now that you've gone through all the tutorials, you're pretty much ready to start designing your own template. In this guide, I'll show you the big steps that you have to go through to make a template the fast and easy way.The first thing you need to understand about designing a template is that the technique of designing is unique and different between individuals. In the end, it's entirely up to you how you want to do it - if and only if you're familiar and have made a few templates yourself. But if you're just beginning, it's best to follow a step-by-step guide to expedite the process and so that you won't get lost.Step 1 - choose an already-made template as a starting point:For beginners, the easiest and fastest way to start designing is by starting from an existing template. But don't do it with the intention of plagiarizing it! Read more in the sub-post Start Designing from an Existi Read more:Blogger
Start Designing from an Existing Template 2007-07-05 08:03:00 (This is a sub-post from Tutorial 11: Start
ing Your Own Blogger Template)If you're a beginner in designing a template, I wouldn't advice you to build a template by writing the codes from scratch; the task is doable but will take you a longer time. So, you don't have to reinvent the wheel! The best way to go about this is by starting from something that's already out there. Choose something close to what you have in mind - for example, choose either a 2-column or 3-column template depending on what you want.But, when you do this, I strongly urge you not to make the intention of tweaking the code just a little bit and then claiming that the final version is your own design. That is just plain WRONG and UNETHICAL. The starting template is just a starting point, an empty canvas if you will, for you to 'draw' your own template. Use the starting template with the intention that the only thing 'useful' to you are just the Body section (which sets the overall layout and the number of c Read more:Designing
Making a 3-Column Template and More ... 2007-07-05 03:54:00 Blogger Template Design: Tutorial 10Tutorial 9: More Explanation about the Body CodeTutorial 11: Starting Your Own Blogger TemplateOne of the most basic desires after becoming a Blogger's blogger and using the standard template for a while is having the urge to find a 3-column template. So, here's a simple and straight-forward tutorial on how to do this yourself without going through too much of code tweaking.This tutorial is prepared assuming you understand the stuff covered in Tutorial 8 and Tutorial 9, which explain the basics of the Body section of the code.What we'll be doing to change or add sidebars is simply tweaking the XML code directly from the Blogger Edit HTML page WITHOUT turning the Expand Widget Templates on. This means that the Body section at the end of the code won't be shown cluttered with detailed algorithms for widgets and post data. It'll be as simple as it can be, which is definitely a good thing :).Adding a sidebar to make a 3-column template:When you scro Read more:Column
Blogger Template: DaBluss 2007-07-04 14:21:00 Download | DemoThis template is an upgraded version of the original template DaBluzz. The improvements are that some of the bugs in DaBluzz have been cleaned out, much more customization, a Linkbar is included at the top, and the header can be replaced with a header image with a size of 830 x 100 pixels.If you want to use the background image used by the original template DaBluzz, simply write the following code:background: URL(http://farm1.static.flickr.com/192/476194157_6bc03ffd65_m.jpg) repeat left top;and paste it inside the body {...} container of the CSS Style in your template, replacing the original "background: ..." code. This URL points to the image stored in Flickr. Refer to the tutorial Subsection 2 of your CSS Styling code to locate where the body {...} code is located.Or, another option is you can download the image below and store it in an image storage site (e.g. Flickr). Then, point the background URL to the image location that you've just stored by writing the foll Read more:Blogger
How to Embed Images as Background 2007-07-07 12:25:00 Blogger Template Design: Tutorial 12Tutorial 11: Starting Your Own Blogger TemplateIf you look at these templates - Lasik, JournallRed, and Minimalizt - you'd notice that the background is not of a plain color, but made from a repeating pattern of an image. This image is called a background image. It can be a single large image that fills up the screen or a small image (say 50 x 50 pixels) that repeats horizontally and/or vertically. The neat thing about using, or embedding, a background image is that you can create any image you like and use it in your blog to make it unique and different from other blogs.A background image can be placed in any container - either inside the Body container (which fills up the entire screen), inside the Post, Sidebar, Comment, or even on a header container (say, a Comment Header). For example, if you look at the Minimalizt template, you'll see that the Comment Header below the post is a rounded green button - which is an image embedded inside the Comm Read more:Images
Blogger Template: nuDzelque 2007-07-11 15:15:00 Download | DemoThis is my 32nd template. It's based on my latest (3rd version) Dzelque blog template - hence nuDzelque. I made some minor adjustment though to make it not look exactly like my blog.It's based on a simple 2 color combination. The default is black and white, but you can easily change it to any other color combination.In the demo page, the header is based on simple text titles. But you can upload a header image (size: 800 x 100 pixels) replacing these default titles to make it more personalized.Some care:The date header block is meant for the short version of date (as in my blog). If you want a longer version, then you have to change the code in the h2.date-header {...} container: decrease the value 400 to make the date header block longer. Read more:Blogger
Do you want a link to your blog here? 2007-07-11 05:45:00 I've come to the 2nd stage of my strategy to build a high rank blog - the 'blunt' promotion.The 1st stage is building long-term sustainable quality contents, which are primarily the templates and tutorials (it's still an ongoing stage). There are millions of Blogger's bloggers out there; and judging from what I've seen statistically - most of their blogs are in dire need of getting pimp'd. What I'm offering here are templates that they can use for a long term - because they're massively customizable to individual styles and likings. Plus, I've build a complete and well structured template tutorials - because the best template that anybody can have is their own-designed templates! Nothing beats the satisfaction of using something that you build yourself. And I'll surely add much more to my template collections and tutorials for all of you out there and just to get ideas unclogged in my brain cells (for other things to occupy).So, in the long term, I'm predicting that the use
Just Pimp'd My Blog ... 2007-07-10 11:23:00 I just finished putting a new template (the 3rd version) for this blog - the basic color combination of black and white. I'm thinking of adding a bit more touching up on it, something subtle like some background images. Here's a look back on my old template:and here's how it looks now:It would've been much nicer if I had taken a snapshot of my 1st template version just to put them side by side and see the evolution of my blog's templates. Just didn't think back then it'll evolve into something else. A sample of what the 1st template looks like (which was based on my Emptinest template) was captured by Technorati. Which one looks better is sorta an open question, but I'm liking this new look - simple - just plain B&W.
Blogger Template: Sempoi 2007-07-23 16:25:00 Download | DemoThis one is pretty neat, I think. Neat and simple. You can put up a large horizontal banner as you can see in the demo page. And like the previous template I've just made, Bannr, there're flexible number of columns - either 3 or 4 columns - and you can customize each one of them easily.If you want to upload a header image of your own, the size is 860 x 120 pixels.Overall, i think this one is really one of the nicest one I've made, in terms of its simplicity. If you've used one of my templates before, you'll know how darn easy it is to change the whole thing into how you want it to look like. Read more:Blogger
Blogger Template: Bannr 2007-07-22 17:59:00 Download | DemoThe main features of this template are its large horizontal ad banner at the top and the 3 side columns. The side columns can be made into just 2 columns by not filling up the page elements for the top sidebar. So, it's kinda more like a flexible column template than just a 3 or 4 column template. All the sidebars can be customized separately: you can make the borders visible or blend with the backgrounds, and have the sidebars in different color sets.The header is made thin to put more focus on the banner. You can use the default plain header, or use your own header with an image size of 1000 x 60 pixels. Read more:Blogger
Blogger Templates Compatible With All Browsers, Including IE6 2008-02-20 13:19:00 Many have noticed that some of the templates here are not compatible with IE6. I didn't have a way before to test with IE6. Now I use Browsershots.org to do the testing. And I've tested all my templates to see which ones are compatible with IE6 and all other browsers.Most of my new templates, plus some old ones, are compatible with all browsers including IE6. They are all tagged with IE6-ok. But if you prefer to use other templates here that are not compatible with IE6, I'm sure less and less people will be using IE6 anyway.Go Firefox! Read more:Blogger
, Templates
Blogger Templates: CleanBox 2008-01-30 23:16:00 Download | DemoUpdate: I've fixed the header misalignment in IE6. The template should be okay now with all browsers.The theme of this template is neat and simple. The color combinations are light and the columns are structured in neat/clean boxes. There are lots of popular web designs out there that are based on simplicity and cleanliness, rather than clogged design.Don't be misjudged by the simplicity. If you want to revamp the whole look, you can change them easily in the Layout Panels.The added functionality of this template is the Menubar (as usual), the flexible number of side columns (either 1, 2, or 3), and the Google Search Box (at the top-right corner). To add the Google Search Box, follow the instruction in this previous template. Read more:Blogger
, Templates
Blogger Templates 21 - 40 2008-01-30 22:49:00 All templates | Templates
1 - 20 | Templates 41 - 60Click below to view the demo page or download the XML file. The order starts from the most recent one.Read the Help Links below for more installation guides:Installing the templates.Using your own header image.Customizing the templates easily.Tips and problems when installing the templates.Table of Contents (complete list of template guides): Read more:Blogger
How to get rid of the Blogger navigation bar? 2008-01-26 20:02:00 Here's a snapshot of a Blogger
blog and the navigation bar (navbar) is at the top shown by the green arrow.So, how do you get rid of it if you don't want it hanging on top of your blog?Easy.Just copy the Navbar1 code below and paste it anywhere inside your blog XML file as a CSS code after the /* Variable definitions section. If you're not sure what this means, follow these steps:#Navbar1 {margin: 0;padding: 0;display: none;visibility: hidden;}1. Login to your blog and click the Edit HTML tab inside the Template tab.2. Inside the file, locate the section body { ..... } and paste the Navbar1 code below this section, after the closing bracket.3. Click 'SAVE TEMPLATE'.4. That's it. You're done.************************It's easy to get rid of it. But know that the Navbar serves some purposes. T
Testing in different browsers using Browsershots.org 2008-01-26 18:20:00 If you're a template designer or happen to redesign your blog on your own, you must want to know how it looks in other browsers
than the one you're using.It's easy enough to open up the few browsers you have installed in your computer and test your newly designed blog in it. But to know for sure that it works ok in all the browsers out there is next to impossible. Just to test in 2 different
version of browsers, IE6 and IE7, are tough enough - as I've faced with previously.I have the IE7 and can't have the IE6 installed in the same machine. There are options out there to install a virtual PC in your machine so that I can install IE6. But it requires quite a large space for the virtual PC alone, and there are some other things to get out of the way to get everything in place. So, thanks but Read more:Testing
How to add META tags into your blog? 2008-01-25 23:24:00 Do you want to improve your blog value, get more hits, and ranked high on search engines? Then you must optimize how your blog is indexed in a search engine.While there are lots of factors involved in building quality blogs that can draw huge traffic in, having simple things right in the beginning is as important. One of this simple thing is getting your blog indexed properly with the right description & keywords to optimize search engine rankings (known as Search Engine Optimization or SEO).To get information, search engines use automated software agents called spiders, crawlers, robots, or bots to collect the a few words from a site or blog (typically the URLs, blog name, and blog description, and maybe some words in the early part of sentences or paragraphs) that will later be used
Blogger Template: ilike 2008-01-25 00:33:00 Download | DemoUpdate: I've fixed the header misalignment in IE6. The template should be okay now with all browsers.This template design is inspired by the simplicity of the popular blogs Problogger by Darren Rowse (Alexa rank 3032) and Digital Inspiration by Amit Agarwal (Alexa rank 11377). Some features of these two blogs are incorporated in this ilike template.The new feature of this template is that there is a special space for a Google Search Box near the blog header. To add the search bar: login to your Adsense account, get the code for the Google search bar, and then paste into the a HTML/Javascript widget that you open up from the Add a Page Element tab (follow the green arrow below). You can customize this space to match the color of the search box by using the Layout panel.Note Read more:Blogger
How to insert Adsense directly into XML code? 2008-01-22 13:59:00 Do you have problems insert
ing Adsense
directly into your Blogger XML
code without using the Page Element? For example, if you want to put it below the Post Title but above the post? Read a good instruction on how to do it here. If you want to put the code in the Post Page only but not in the main page, read how to do that here. Example: click on this post Title and see how the ads appear above this post (if you're not in the Post Page yet).To do either of the above, you have to modify the Adsense code a bit. The modification is called parsing the code. Read more about it here and use this page to automatically parse your code.
Blogger Template: Probloggy 2008-01-21 11:20:00 Download | DemoOk. Here's something different, or common, depending on how you see it. It's different that this template is an imitation, similar but not identical, to a blog that's already out there. It's common that this blog that I tried to copy is already a prominent blog on how to blog, or how to blog to make money.The original template is used on Problogger by Darren Rowse (template designer is Ben Bleikamp). It contains tons of infos on how he makes money, programs to help you make money, tricks to know to help you make money, and what size of money can you expect from blogging. And it goes on and on, in a good way, about the love and hate relationship between blogging and money - more the love relationship I suppose.The reason I try to imitate the blog is not because I want to ma Read more:Blogger
Recommend Site To A Friend
