Recently someone sent a request (shoutout Olivia) that I explain how I built my blog, so I figured I would turn it into a little series!! I'm going to share my thought process through all the parts of this process, and I can be a bit of an overthinker. Hopefully this is going to be thorough enough to answer any questions you might have, but if there's something I missed let me know in a comment and I'll do my best to respond, or include it in blogging 201!
Once you've got a good idea for what sort of thing you want on your blog, it's time to pick a template! There's lots of options. My blog's theme is Awesome Inc. because I like the solid color for my tabs and widgets. When you're looking at themes, it's important to remember that the colors, fonts, backgrounds and things like that are all customizable.
Once you've selected a theme, you're going to click customize to get to this screen. 
We're going to work top-down through the dropdown. This first menu is for the background. And, oh, boy, do I have a bone to pick with the background feature of blogger. It's going to try and zoom in on whatever image you chose, or you can chose to tile it. This feature gave me some grief when I was first setting up my blog, so I recommend finding a picture that is either going to form a seamless pattern or making one on Canva by making a repeating pattern. Make sure you save after every change you make, because there's no auto save and you don't want your blog to crash in the middle of editing.
We're going to work top-down through the dropdown. This first menu is for the background. And, oh, boy, do I have a bone to pick with the background feature of blogger. It's going to try and zoom in on whatever image you chose, or you can chose to tile it. This feature gave me some grief when I was first setting up my blog, so I recommend finding a picture that is either going to form a seamless pattern or making one on Canva by making a repeating pattern. Make sure you save after every change you make, because there's no auto save and you don't want your blog to crash in the middle of editing.
The second option in that dropdown to adjust the width of your main blog text and widget bar. 
I like to mess with this setting and check how it looks, because it's also going to affect how your blog looks on different browsers and how much of your background is visible. The next dropdown is to change the layout of your widgets and footer, which is another thing I recommend looking at a variety of examples for.
When you click add gadget, the most important option there is the 'add HTML'. This is where you're gonna get to add all the fun stuff, like the interactive gadgets on my page. I'll do an in-depth guide on some widget tips in blogging 201, but the basic of it is to paste in your HTML code into the text box and hit save. Some widgets will need an additional CSS code that you can put into that CSS box in the Theme editor.
I like to mess with this setting and check how it looks, because it's also going to affect how your blog looks on different browsers and how much of your background is visible. The next dropdown is to change the layout of your widgets and footer, which is another thing I recommend looking at a variety of examples for.
This dropdown is just for the layout, you edit the widgets on a different setting we'll get to later. For now, this is just how they'll be laid out. The next menu is the most important one of all: Advanced settings.
Here is where it starts to pay to be organized. I wrote down the fonts I wanted to use on a piece of paper so I could keep track, and I used this website to keep track of my color palette. This website lets you generate palettes, but I used it to store the hex codes I used for my palette as well as adjust saturation and brightness. I had my two main shades of purple and lime, then a lighter version of each shade for highlights and shadows. This just helped me to keep everything cohesive. You're going to go down this list and adjust the colors and fonts for all the different options and versions of text. This is where having your hex codes accessible comes in handy.
We're not gonna use this last option, but 'Add CSS' is important for coding widgets and other aesthetic elements of a blog. On my blog, CSS is used for the lined paper background and a couple other fine-tuning elements.
Once you've changed your blogs colors and fonts, exit the Theme edit menu and navigate to the layout option on the side menu. This is where we're gonna edit all the widgets and heading for your blog. The way this page looks is gonna vary depending on the layout you picked, but it'll look something like this.
When you click add gadget, the most important option there is the 'add HTML'. This is where you're gonna get to add all the fun stuff, like the interactive gadgets on my page. I'll do an in-depth guide on some widget tips in blogging 201, but the basic of it is to paste in your HTML code into the text box and hit save. Some widgets will need an additional CSS code that you can put into that CSS box in the Theme editor.
Thanks for attending blogging 101! I hope I answered some questions, but if you have any more let me know in the comments!
Love Always, Ellie
No comments:
Post a Comment