How To Design Your BLOGGER Website

I’ve been receiving a number of messages lately, not only here in my website but also even in my personal facebook and twitter account, from people, bloggers/aspiring bloggers I don’t know, requesting me to design a layout for them. In fact, a number of Ella’s fans even asked me to make an entire website for them, so instead of saying no to them one by one, and telling them to check out some online tutorials, I decided to give you a rundown of what I believe can make your Blogger website looks a bit more presentable or rather prettier than your usual/ordinary Blogger template.

So, here’s a much more updated list of what I think you can do so that not only you can enjoy reading your blog, but your visitors as well.

Before anything else though, I just want to say that I am not a professional web and/or graphic designer and I don’t code layouts from scratch, so what you’ll be reading below are just my opinions which I’ve gathered from years of blogging and reading various tutorials, blogs and articles. If you have anything else to say, feel free to comment and I’ll address your concern with the best of my abilities.

Disclaimer : This post/tutorial is for BLOGGER users only. If you’re using other web blogging services, such as WordPress.com, WordPress.org, Tumblr, etc. This is not for you..

The Look

The Look

  Your Blogger Template/Layout 

Layout Design


I am not a pro when it comes to designing/creating a blogger website, but I believe that when it comes to having and maintaining a blogger web blog, a decent layout/template is necessary in order for you to keep your website in order. This also helps you in keeping your visitors come back often. Why? Because a good, orderly and well-maintained layout/web blog means that it is easy for the visitors to navigate around your website. It is easy for them to look around and find what they’re really looking for instead of going through all of your entries, static pages, widgets, etc, then as a result, you’ll end up losing one or two of your potential readers. This may be not much, yet, but these potential readers may end up recommending one or two of their friends, or share your link in their Facebook/Twitter pages which might bringing a lot of ‘visits’ in your page, but because they got confused on your blog, you end up losing more than what you think.

So here are some websites that can help you (and also helped me before, when I was in blogger) modify your Blogger templates according to your liking, or your blog’s theme.

BTemplates
Deluxe Templates
TemplateMo
Premium Blogger Templates
Nymphont
Artisteer

Just a side, personal note, I’ve been in Blogger for more or less a year, and I took layouts on all of those websites, but I’ve customized all of them. However, if you’re not big on CSS3/HTML, then why not take a gander on BTemplates, you might find what you like there. They update their layouts regularly and they feature authors that are already established when it comes to making Blogger layouts.

The advantage of using or installing layouts from these websites is that they are already formatted. All you need to do is read a few instructions/rules from the author then you’re free to install it to your Blogger site. The disadvantage, however, is that it’s a bit too generic. It’s common and you might end up seeing it in another blogger website, so you might want to customize it according to your blog’s theme or liking.

For me, I like using Magazine-styled templates. These layouts are the ones which have jquery sliders in their front page, which features pretty much the author’s first three blog entries. In this case, Premium Blogger Templates is the best in this criteria. However, there are also times when I feel girly, and I like to be really creative and customize every part of my layout and Nymphont allows me to do that.

However, if you’re not big into tweaking, and you really want to make/design your layout YOUR WAY, then I suggest Artisteer. This is a software that helps you create your Blogger/Wordpress layout without suffering the pains of editing html/css. The software is really easy to use and you can see how it looks like with a few clicks. There are a few disadvantages, however. First it costs $49.95 (Standard Edition costs $129.95) and if you have some javascripts that are included in your website (which I’m sure you have), the layout might not load properly, or might not load that quickly. If you want to see a finished product of the Artisteer software, click here.

Just Remember


When it comes to picking a layout, the layout’s (generic – or what’s included) header is not really that important. You can always modify that to fit your blog’s theme, or according to your liking. Or better yet, pick a layout without a header. Minimalism is totally IN these days. What you should consider is how it is formatted, if it includes such features that you can make use of like: ‘Content/JQuery Slider’, ‘Read More’ links, ‘Post Thumbnails’, 4-Column Footers, etc.

  Your Blog’s Overall Look & Presentation 

Presentation

Though a decent layout/template is essential to keep your website alive, I believe that the overall appearance/presentation of your entire blog should be considered as well. I’ve seen a lot of blogs/websites that actually possess a really good template. But what turns me off , unfortunately is when the author/blog owner becomes too creative and decides to implement every decoration or javascript that he/she thinks can make his/her blog look more attractive. Sometimes it helps, but most of the time, IT DOESN’T.

Here’s a few examples or scenarios/advice that I have which might give you an idea of what I’m talking about:

 I. Less Is More

I’ve seen blogs that has a lot of hovering images to the point that you can’t see what’s in their blog anymore. It’s okay if these hovering/flying images are tiny/barely noticeable or used merely to accentuate your blog’s design, like this one. Some hovering images are also used to plug their social networking sites, such as Twitter, Facebook, etc. Usually, those images are powered by javascripts, which also affects the loading time of your site. My point is, you need to think twice before implementing these ‘widgets’ because it’s only either one of two things. One is, you’ll be able to accentuate your website’s design (if it’s decoration) or you’ll be able to utilize the empty spaces of your blog (if you’re referring to social icons) or TWO, you’ll end up having a really messy blog which will make your first time visitors leave within five to ten seconds.

Also, avoid placing too many, unecessary images that are plainly decorative on your website (like blinkies, .gifs, etc). Instead of inviting visitors to stay on your website, you tend to do the opposite. I know what kind of rush it gives you sometimes when you have all of these colorful images/.gifs. It makes you wanna stare at your blog the entire day (and night) but the thing is you’ll end up realizing that you’re the only one who’s ever interested and the people who used to read your stuff are distracted by your really large images, that takes too long to load.

 II. Color Is Key

If you’re going to create a header for your template, let’s say you’re template has a touch of pink, black, and white.. then feel free to color your header whatever you like just make sure that majority of it is pink and that the other colors you use will not contrast your layout’s major color, which is PINK.

However, if you’re editting the colors of your website to pair it with your header, then make sure that you color coordinate it with the color that is mainly used in your header. If it’s pink for instance, then feel free to use at least three variants of pink for your website background/sidebar header/menu links, URL color and post titles, then white for your page background (where your entries are located), then black for your text color.

This way your website will have a much calmer look and it will be a lot more pleasing to look at.

 III. Minimize the ‘Monetizing’

Who wouldn’t want to take advantage of placing ads in their blogs? Right? I mean, you get to write what you care about and at the same time have an opportunity to make money of your passion. But sometimes, monetizing your blog can be an overkill. There are some good blog advertising programs, like Adsense, Nuffnang, and Infolinks, and they can even be better when you know how to place them all throughout your website.

Learn how to scatter them evenly, like if you have 3-columned website (2 sidebars, 1 for the entries) have one or two ads for each sidebar in between your regular sidebar content (Usually, I only have one ad per sidebar, sometimes I have only have one ad and the rest will go to my entries) and adjust their size according to the width of your sidebar/post as well. Google Adsense is perfect for this because all you need to do is add the widget to your side bar and voila! And for your post, all you need to do is set it up at your settings and voila! Adsense activated!

The Formatting

Formatting

  Know The Basics 

Know Your Basics

Back when I was a first time blogger, I really don’t know how to format my own entries, I don’t even know how to upload pictures online and have then appear on my entries. I have 0 knowledge in html/css and 0 knowledge when it comes to posting entries. All I do was pretty much type everything I have in mind and that was it. It took me quite some time to figure out the ropes. I have some friends who taught me the basics like making your fonts appear larger, smaller, changing their colors, setting them to bold, italic or underlining them. But when it comes to formatting my entries, such as aligning uploaded images at the left, or keeping your entries equally aligned at both ends, well, I had to learn them all via online tutorials.

Aside from Google/Googling, you can go to the following websites in order to learn a couple of basics when it comes to CSS/HTML:

Lissa Explains
W3Schools Online
CSS3.Info

There’s nothing wrong with using Blogger’s ‘Rich Text’ mode, when it comes to updating. But personally, I really don’t like it. Trust me, one day, when you already know how to update your blog using html tags, you’ll find the ‘Rich Text’ mode quite inconvenient. But oh well, we all have different opinions.

  Tease them with your Teasers! 

Let Them Read More

By that, I mean learn how to use the Jump feature in your entries. This jump feature/’Read More’ link is a much better way in presenting your entries rather than the usual. This enables the visitor to navigate through your older entries a lot easier and this may also serve as a good teaser to your current/recent entries.

If you’re no longer able to implement the ‘Jump’ feature to your blog because it will take you a really huge amount of effort to edit all of your previous entries one by one, there’s a great hack for Blogger which can help you have your ‘Read More’ link with a much better result.

Automatic Read More Hack For Blogger With Thumbnail
Customize Blogger “Read More” Links With image Buttons

Back when I was in blogger, I use this hack A LOT, and majority of the blogger templates that I used to download also has this feature/hack so I find them really helpful.

  Have Pity On Your Sidebars! 

Your Sidebars

Your sidebar and/or footer should be as clean and as orderly as possible. When placing an image, make sure that it fits the size of your sidebar/footer. I’ve seen a couple of blogs that have sidebars with pictures way larger than their sidebar’s width. As a result, you end up having a messed up layout with a huge scrollbar at the bottom. When I need to place an image which is unfortunately bigger than my sidebar, I edit their size through html. This can be done by adding the width and the height properties. Therefore, by adding the image’s default/pre-determined measurement via the html, your image wont go beyond your sidebar/footer.

Make sure also that the images in your sidebar are always centered or at least following only one alignment, so that it won’t be messy to look at. You can always use the code <div align= "center" style= "padding:10px"></div> or <center></center>. Just make sure that there are also no codes that might contradict this particular code. For example, some images, badges, etc. may already have either the <div align= "left"></div> or the <enter></center> code. Just make sure that you remove those.

Be Sociable!

Be Sociable

  Let Them Subscribe! 

Know Your Basics

Though this post is more on design, of course, I care about your visitors/readers/followers too. A way for you to further get in touch with your readers and also to get them more interested with what you say, is to offer them to subscribe to your blog updates. This can be done through your RSS or through Feedburner.

  Make Yourself Visible! 

Let Them Follow You

Unless you want to be an anonymous blogger live and write under a pseudonym, then you don’t have to do this. But if you don’t, you want to at least make your followers know that you’re active or rather alive. This also helps if you don’t update on a daily basis. Through the use of these social networking sites, and by having them follow you, you can also plug your blog’s newest updates had gain more followers gradually, and effectively.

  Sharing Is Caring! 

Make 'Em Wanna Share Your Posts

Usually, Blogger already has this feature by default, but if you tweak your layout a bit too much, or if you implement certain hacks, it disappears. Besides, their buttons are only limited to only I believe five buttons which is Facebook, Twitter, Google Plus (which is Google’s social networking website), “Email This” and the “Blog This” buttons. For me though, these buttons wont do, because what if you want to “Pin it” to your Pinterest profile, or if you want to recommend it to other websites such as StumbleUpon, Delicious or any other social networking sites that you might have. This is where the tutorials/hack comes in. There are a lot of websites that can give you the code, or even the widget in order for you to have the ability to let your readers share/recommend your posts to their peers through their profile. Well, we’ll get to that later…

Read!

Read, read, read....

Unless you just want to use Blogger’s “Rich Text” as a way of updating your website and their ‘Template Designer’ as a way of customizing or changing your blog’s entire layout, fine, skip this part, you don’t need this. In fact, you wasted your time reading this, because this has nothing to do about being ordinary, and following the rules, when it comes to Blogger.

If you want to learn about Blogger’s latest tutorials, hacks or anything else that you can incorporate to your web blog, then I have the best of the best tutorials/websites here. A really good thing about Blogger is that it’s FREE, hence, those Blogger experts who are really good at CSS, jquery, javascript, HTML, etc. can easily make a Blogger version of WordPress’ latest plugins. And these websites are regularly updated with what they think can make your Blogger site more updated.

Anyway, here they are..

Way2Blogging
All Blog Tools
Blogger Tips & Tricks
Anshul Dudeja
Blogger Buster
Blogger Tutorials

Be Inspired!

Be Inspired

Say you’ve already picked your layout, and you want to tweak it, you know how, but you just don’t know what color combination to use, or perhaps you don’t know what web designs are currently ‘HOT’ these days. Well, you don’t need to worry. If you want to be inspired then I have three websites for you that features really good websites, which will make your jaw drop. In fact, some of these websites include tutorials for Photoshop, Illustrator, etc so you can also incorporate your designs to your website.

Trust me, I love these websites. These are the websites where I pick my ideas.

CSS Beauty
Spoon Graphics
Line25



Thanks for reading my really long post, and I know that some of you either got bored, complained about the length of the post, or probably both. But sorry, I’m not really used to not explaining things especially when I know that I have lots of things to share. So, I still hope that you’ve learned something, and I hope that by now, you’ll have the courage to reinvent your blog. Gheeze, don’t worry, Blogger allows their users to create multiple layouts without ruining the one your currently using, so.. go nuts!

Anyway, gotta go.. If you have questions, feel free to ask, and if you have any suggestions on my next post, comment away! I’d love to hear from you!

Related posts:

  • DeniH

    Perfect timing for this post…just started a blog. Thanks
    DeniH  :)

  • Rosalie B.Tangonan

    Wow! I didn’t know that your host is blogger. After a long time, I thought you are in wordpress too. Great post! Sayang lang naka-wordpress ako… hindi ko mata-try gawin yng mga tips from here. Thanks anyway

    • Nope, I’m using wordpress. That was just something I compiled because I’ve been getting a lot of questions regarding how to design blogger templates back then.

      • Rosalie B.Tangonan

        I hope you can compile for wordpress too.

        • Unfortunately, the only layout I can somehow edit is Thesis. May bayad kase mga layout sa wordpress e.

          • Rosalie B.Tangonan

            yay! ganoon ba? Thanks for the info but I hope you can still do that. Thanks.

  • Whew! Haba I’ll take this one by one. Just last week I used the default template of blogger the “Simple” one. I’ve noticed kasi na ang bagal magloading yung dati kong template.

    This is so very helpful and informative.

  • And additional pala, where are your social share buttons? Mas madali ishare kung meron sana.

  • kevin stark

    Your post is really helpful for people who is going to create their blogger website with nice look and feel and you have beautifully explained everything about creating blogger website. Real Estate Website Design

  • hanna baldomaro

    this is really very helpful and so informative. You explained everything very well. Thanks for your time sharing this,