How To Design Your BLOGGER Website
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.
♥ The Look
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.
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.
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.
Here’s a few examples or scenarios/advice that I have which might give you an idea of what I’m talking about:
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.
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.
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
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:
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.
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.
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.
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!
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.
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.
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…
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.
Anyway, here they are..
♥ 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.
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!