Last week, I shared 5 lessons I learned while DIYing my new blog design. Today, I tought I'd share my top tips and resources for creating your own blog design on Blogger. A lot of these are applicable on other platforms, too, but since I don't have any first-hand experience with them, I can't really give my word for it. I'm going to talk about the preparation of your elements, and the installment on the blog itself. Of course, everyone's design is different, and you might not find all the answers here, but I've rounded up some of the most used features.
Also, this is not a guide for creating a whole template from scratch, but ways to modify an existing Blogger Template. Most Bloggers will use the Simple template as the base, and I really recommend it. It's the closest you can get to a clean slate on Blogger. My custom template is also built on the Simple template.
My top tips for creating your own template:
1. Map out the layout. After you've done your design homework on colors, fonts, and the feel of the new site, start mapping out the layout. Where do you want the header to be? The top is the most common place, but I've also seen a lot of cool designs with the header on top of the sidebar. Where do you want your menu bar (or navigation bar) to go? One sidebar or two? Which elements to put into the sidebar and so on. Once you're happy with your vision, make a list of all the elements you need to design.
Relevant resources:
2. Size matters. Before designing your elements, you need to kno how wide your blog and columns need to be (mine are: total 1100px, sidebar 360px). One thing to know about blogger is that it has a lot of padding (space around elements) coded into the template, which you need to take into account when you create the custom images for your design elements (like header, sidebar dividers, etc.) This is something that really annoys me about Blogger templates, because you have to figure out how wide a sidebar really needs to be to fit a 300px wide element. My experience says you've got to add about 50 to 60px. So, my blog is 1100px wide, but my header is actually 1050px wide, and my sidebar images are all 300px. And, I now size all my images in the posts to be 650px wide. If you're thinking about offering sidebar ads, the most common size is 300px wide (by 250px), so that's also something to consider.
Relevant resources:
3. Make templates for design elements. When you're working with Photoshop to create your design elements, save a .psd of each item with all the layers, so you can make modifications easily. You won't really get the big picture before you see the element in the whole design, so there might be times you want to change the font size, or color, or you need to make something smaller or bigger. This makes it so much easier. And, keep the psd-file current, meaning save tweaks. I have all my .psd files in a folder, so whenever I need to for example change my navigation bar, or add a sidebar divider, or change up the posts in the favorites category, I can do that easily.
Relevant resources:
4. Learn basic HTML and CSS. I know, you're probably rolling your eyes right now, and it seems super intimidating. But, think of it this way. When you're going to a foreign country, and you know no-one speaks English there, it makes sense to learn the basic phrases in their native language, right? It's the same thing with doing your own blog design. Unless you hire someone to actually install all the design elements, or get a friend to do it, you need to learn the basics of Internet language. All the things that you see in the internet are actually made up of code, called HTML, and a lot of the things are styled using CSS. Think of CSS (Cascading Styling Sheets) as the garnish on top of the HTML pie. First you need to bake the pie, and then you can add some garnish to style it if you'd like.
Relevant resources:
5. Don't be intimidated to alter code. Once you and HTML know each other a little better, changing your template code won't seem like such a big deal anymore. However, always ALWAYS make back-up of your template before applying any changes, so that if anything goes wrong, you can easily fix it. When you add code, you can just delete what you just added and everything goes back to normal.
Adding custom CSS is even easier. You can add all the CSS you need by going to Template -> Customize -> Advanced -> Add custom CSS.
6. Make a test blog. I briefly mentioned this in my previous post as well, but you really need to test all the code and the elements you want to create. And by testing, I mean creating a separate private blog and trying to install the whole template like you want it there. Since Blogger has it's own system of building code, it only makes sense to test your template on another Blogger blog. There is a problem however. So, the way Blogger works is that each sidebar element you create is a separate entity of HTML, and has it's own name in the blog template code (like HTML1, HTML2 and so on) based on the order you added them. The tricky thing is, you can't just download the template (from Template -> Back-up/Restore) and then up-load it to your real blog, since the widgets aka the sidebar elements are not embedded in that code. In the template code, those elements are only referenced with their name. So, when you would up-load the template to your blog which already has a bunch of widgets (like your archive, popular posts, follow buttons and so on) that are also named HTML1, HTML2 and so on, it would replace the element that was already named HTML1 on your blog with the HMTL1 from the test-blog. So, when the HTML1 on your original blog is not in the exact same spot as on your test blog, you're in trouble, because all your elements will be in random places.
There are several options for addressing this issue. You could find out all the names of your blog widgets, and start adding them to the test blog in that order (so that if your archive is named HTML6, the archive would be the sixth element you add to your test-blog). Another way would be to manually overwrite the code in your widgets with the code in you test-blog widgets. This way, you wouldn't be up-loading a whole new template, but rather just updating the old template. This would also mean, you need to take note on which elements you added custom CSS and change those widget names according to the widget names on your original blog. You could also change the widget names manually in the code to correspond to the widget names from the original blog before you make the template switch. This should also eliminate the problem.
Most importantly, make a back-up of the old template before you make any changes.
Other resources:
7. Take a course, if you can. If you have the funds for it, take an e-course about designing your own blog. I made my first custom design following the Blog(Design)Love e-course from A beautiful Mess. I learned all the basic coding from there and a lot of the stuff was already coded for me, so I didn't really have to know a lot, just copy and paste. They now have a new version of this course out called Blog (Design) Love 2.0. I haven't taken it, but I bet it's also very good, or even better than the old version.
I hope some of this will be helpful to some of you. If you have any questions or would like to know more about any other aspects of creating a custom blog design, let me know in the comments.
xo. Hanna
Thank you for sharing these details and tips! so nice of you to share this helpful article :)
ReplyDeleteThanks for sharing the blog design info here. Keep up the good work. All the best.
ReplyDeleteYou're most welcome!
Delete