Directory —
Web Design —
Blog Details for "Elque's Blogger Templates"
Elque's Blogger TemplatesElque's Blogger TemplatesFree new Blogger Templates - Great template selections, Adsense-based, and extremely easy customization. Articles
Blogger Template: Pinkd
2008-01-11 09:20:00 Download | DemoThis template is an improvement from the Semipro II template. Most of the background and text colors plus the fonts were changed completely by using the Settings panel - easy! In the default Blogger templates and most of other free templates, you can change only a few things from the Settings - if you want to change a lot more then you have to modify the codes.Like always, I recommend that you use your own header image (check out the demo page) with the optimum size of 860 by 150 pixels. Read more instructions here to help you get the most from this template.This pinkish theme isn't really one of my design forte. Anyway, do you think I did well in combining the colors and the overall design? I suppose I have to do other themes too sooner or later to get more visitors - I can't just expect others to have the same taste of themes as mine, can I?Another thing, if you like the design but not the color themes, simply change all the colors easily from the Settings panel. More About: Template
Blogger Template: Semipro II
2008-01-09 19:57:00 Download | DemoThis template is a variation from the Semipro template. Everything is changed completely by using the Settings panel - easy! I did this just to show that you can change a lot of things just from the Settings. In the default Blogger templates and most of other free templates, you can change only a few things from the Settings - if you want to change a lot more than you have to modify the codes. I doubt most people want to deal with those CSS codes. So I'm making things easier for you guys/gals. All I ask is that you leave the credit to my blog as it is, and promote my Blog if you can :) For the record, there's no way I'm making things free just for the fun of it - it's for the traffic for sure!Like always, I recommend that you use your own header image (check out the demo page) with the optimum size of 860 by 180 pixels. Without that image in the demo, it'll be just empty background. If you write down your own Title and Description on your image, then choose to ... More About: Template
Some quick guides for these templates...
2008-01-05 04:01:00 Here are the links to some important guides that you might want to have a look if you're using my templates...Installing the template in your blogHow to upload your own header imageWhat are Linkbars in my templatesCustomizing the templates easilyTips and problems when installing templatesHaving problems with my templates?Start designing from an existing templateTesting and viewing in other browsers More About: Templates , Guides , Quick
What is a Linkbar?
2008-01-05 03:50:00 Linkbar is just a menu of links at the top of your blog, usually near your Blog Title. Come to think of it, it's better if I just call it Menubar. I don't know why I call it Linkbar in the first place, but I'll just stick to that name because I've used it so many times in my post and my templates.Below are some example pictures of where the Linkbar is in the blog page, and how you can add links to the Linkbar in the Settings page.
Blogger Template: Semipro
2008-01-02 01:23:00 Download | DemoJust made this new one since my last template on July last year. It's an improved version of the Sempoi template. The linkbar looks much better on this one, plus some other changes to make it better. The overall blog look suits the money-making blog style.I also made some modification on the codes to make sure it works on IE6. Can somebody please tell me how it looks on IE6 coz I have no way of testing it on IE6 myself?I recommend that you use your own header image (like what I have in the demo page) with the optimum size of 860 by 180 pixels rather than just use the default Blog Title and Description. Here's instruction on how to upload your image. More About: Blogger , Template
Blogger Template: Sempoi
2007-07-23 23: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. More About: Blogger , Template , Temp
Blogger Template: Bannr
2007-07-23 00: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. More About: Blogger , Template , Temp
Blogger Template: nuDzelque
2007-07-11 22: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. More About: Blogger , Template , Temp
Want to exchange links?
2007-07-11 12:45:00 I've come to the 2nd stage of building a high rank blog - exchanging links.The 1st stage is building long-term sustainable quality contents, which are primarily the templates and tutorials (which is 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.So, in the long term, I'm predicting that the use of my templates and tutorials will grow in time. If you'd like a link to your blog in this site, here's how to do it.How to have a link to your blog here?I'll put a link to your blog on ... More About: Links , Exchange , Chan
Just Pimp'd My Blog ...
2007-07-10 18: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. More About: Blog
How to Embed Images as Background
2007-07-07 19: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 C... More About: Images , Background , Ages
Testing and Viewing in Other Browsers
2007-07-05 16:35:00 (This is a sub-post for Step 6 from Tutorial 11: Starting Your Own Blogger Template)Personally, I don't like the stage of testing in other browsers. 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 tested 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?Personally, I think Firefox is by far above all. If you're not using Firefox, I suggest you download them right now - it's free, ... More About: Browsers , Testing , Viewing , Browse
Tweaking the CSS Code
2007-07-05 16:17:00 (This is a sub-post for Step 5 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 do 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, except the width. You can tweak these containers later (or let the existing code as default, unless you want to tweak them later). If you want to use an image as a background image of the whole template, you can also do this lat... More About: Code , Tweaking
Starting Your Own Blogger Template
2007-07-05 16:05:00 Blogger Temp late Design: Tutorial 11Tutorial 10: Making a 3-Column Template and More ...Tutorial 12: How To Embed Images as BackgroundNow 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 mor... More About: Blogger
Start Designing from an Existing Template
2007-07-05 15:03:00 (This is a sub-post from Tutorial 11: Start ing Your Own Blogger Temp late )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 o... More About: Designing , Signing
Making a 3-Column Template and More ...
2007-07-05 10:54:00 Blogger Temp late 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 s... More About: Column
Blogger Template: DaBluss
2007-07-04 21: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/47 6194157_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 f... More About: Blogger , Template , Temp
More Explanation about the Body Code
2007-06-28 20:20:00 Blogger Template Design: Tutorial 9Tutorial 8: The Body Section of the Blogger Template Code Tutorial 10: Making a 3-Column Template and More ...In 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/p osts/default#main'>skip to main </a> |<a href='http://dzelque.blogspot.com/feeds/p osts/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:sectio n showaddelement='no'><b:widget locked='true' title='Blog Posts' type='Blog'/></b:section></di v><div><b:section preferred='yes'></b:section>< /div&... More About: The Body
The Body Section of the Blogger Template Code
2007-06-27 16:49:00 Blogger Template Design: Tutorial 8Tutorial 7: Setting the Template SizeTutorial 9: More Explanation about the Body Code In 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 kn... More About: Blogger , The Body
Blogger Template: inSydes
2007-06-27 11: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. More About: Blogger , Template , Temp
Blogger Template: Sydes
2007-06-25 23: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. More About: Blogger , Template , Temp
Blogger Template: MidBasyc
2007-06-25 00: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. More About: Blogger , Template , Temp
Blogger Template: FulBasyc
2007-06-23 05: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. More About: Blogger , Template , Temp
Blogger Template: Basyc
2007-06-23 01: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 ... More About: Blogger , Template , Temp
Blogger Templates: Thris
2007-06-15 19: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. More About: Blogger , Templates , Temp
Blogger Templates 1 - 20
2007-06-10 23:41:00 All templates | Temp lates 21 - 40Click below to view the demo page or download the xml file. The order starts from the most recent one.Templates 1 - 20: More About: Blogger
Blogger Template: NuKleen
2007-06-10 23: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 Secti... More About: Blogger , Template , Temp
Blogger Template: NuBordr
2007-06-10 04: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 a... More About: Blogger , Template , Temp
Blogger Template: Bordr
2007-06-08 21: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'... More About: Template , Temp
Setting the Template Size
More articles from this author:2007-06-07 01:13:00 Blogger Temp late Design: Tutorial 7Tutorial 6: Using the Generic Blogger TemplateTutorial 8: The Body Section of the Blogger Template CodeSetting 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-wrapperConten t-wrapperFooter-wrapperMain-wrapperSideba r-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, ... More About: Size 1, 2, 3 |
