Step by step blog tutorial

Hello angels!

When I first started creating my blog I remember how difficult it was to navigate the "Blogger" tools. After a lot of trial and error, as well as using guides/resources from other bloggers, I now have a pretty good understanding of how to use them. Hopefully this tutorial can make building your own blog much easier, so you don't have to struggle as much as I did. 

As always, feedback is much appreciated! If I left anything out or you would like me to elaborate, please leave a comment and let me know! xx

Step one: Picking a template 

Every blog you make will start with a basic, "bare-bones" template that you can customize as much as you like! If you go to the theme tab, you will find a bunch of different options to pick from. For reference, my blog uses Awesome Inc. (which I like because it has a very y2k vibe). Once you decide which theme to start with, click customize and you can begin editing it!

Step two: Editing your theme

This step is when you can begin editing design features, such as layout, colors, fonts, and so on! I'd recommend starting with picking a background, which can be a kind of tricky process. Because every added post extends the length of your blog, it causes the background to stretch/duplicate to accommodate that. So, this means that you need to choose a background that can be repeated without looking messy. Some options that work great are: 

• Solid colors 
• Certain repeating patterns (such as stripes, *some* polkadots, plaid...)
• Patterns that would not obviously show line/page breaks (such as very maximalist/crowded designs). 

Unfortunately, picking a background does require some trial and error :( I reccomend using Pinterest to find something cute!

Once you have your background you can begin choosing other design elements! The most useful section is the advanced section, which has a wide range of blog elements you can change (such as the background colors of posts, font size/color, etc). I'd recommend choosing a consistent color scheme and using it for all fonts/backgrounds. 

In the layout and adjust widths sections you can play around with the orientation and size of columns/side bars. There are multiple layout options to choose from, all of which can be customized in the adjust widths tab. When you are done editing your theme, DO NOT FORGET TO SAVE! This is very important, as blogger does not autosave. Click the save icon on the bottom right-hand side. 

Step three: Adjusting your layout and adding gadgets 

This part is what lets you really customize and spice up your blog! Navigate to the layout tab on the main page. This will show you a simplified view of your blog, and allows you to move/reorder elements if need be. 

It may look a little overwhelming at first, but I promise it's not that difficult to use! At the top of the layout you will see your heading/title section. Here you can add a background image, change title names, etc. Further down is where you can edit your sidebars and add gadgets! Gadgets are incredibly useful, and allow you to add unique elements to your blog beyond simple posts (which are shown in the main section). Blogger itself has a wide range of gadgets you can add, such as images, follower count, lists, and so on. Think of them kind of like widgets: They are additional elements that complement your posts and allow users to interact more with your blog! 

You can add as many gadgets as you want, and you can reorder or move them around your layout to adjust the placement of them. For images specifically (which are the easiest and most versatile gadgets to add) I'd suggest finding photos on Pinterest (or using your own!). Once you have downloaded and uploaded your image, be sure to click the "shrink to fit" setting at the bottom. This makes sure your images don't mistakenly take up the whole page! 

Step four: CSS and HTML

Ok, I'm going to be honest and let you know that I don't know a lot about coding. Actually I know practically nothing... But luckily, you don't need to have much (or any) coding experience to use these features! 

Starting with CSS, this can be found under the advanced section in the theme tab. Here you can add custom code to customize features that blogger is unable to. For instance, I was able to create a custom cursor trail, add floating animations to my images, and make bubbles fly around my blog! While finding specific codes to paste in can be difficult, I'd start with making a quick Google search (e.g. "CSS code for a custom cursor"), looking for resources in other blogs, or even using AI to help get you started (although I'd refrain from using AI if you actually want to understand the coding process!). 

Similarly, HTML features work kind of in the same way! Like CSS, you need to find the appropriate code which enables custom features. However, unlike CSS, HTML can be used for gadgets directly, which allows you to place interactive features in the sidebars (again, gadgets are created in the layout tab of the home screen, not to be confused with the layout section in the theme tab). This is how I added my tamagotchi pet, wheel spins, and drawing pad on the sides of my blog! Like CSS, finding codes for the resources you want can take a little time, but Google is always a good place to start. 

When you click on the HTML option, this is what it will look like! Remember, whenever you are adding to your blog—whether it be changing the theme, layout, or adding gadgets—be sure to SAVE each step and check the preview of your blog as you work! 

I know the process might feel tedious, but I promise that the end result is so worth it! Getting to create something that is a true reflection of what you like, and being able to express yourself creatively is so gratifying. I hope this tutorial was helpful in getting you started. Good luck angels! xx