Design Basics for Bloggers: A Brief Guide to HTML

 Does blog design baffle you? Does the concept of HTML sound terrifying and confusing? What do all those letters stand for anyway? Fear not! You're not alone. I put together this short guide to act as a little directory of "how-tos" for making your blog a pretty place. Because let's face it, we all want a pretty blog. The good news is that it doesn't have to be difficult or scary. I'm certainly no expert with this stuff, but I've found a lot of good sources and thought it might be helpful to new bloggers to have access to everything in one place.

When I started my blog this past summer I didn't know jack about blog design, but I wanted to learn. I'm grateful to live in a time where the information I seek is seconds away. It makes learning and expanding my skills that much easier. Google is a beautiful thing.

Below you'll find easy to apply directions for some blog design basics that are frequently used and can do a world of good in beautifying your blog space. I should probably specify that this is specific to blogger. I'm not positive how these would interact with Wordpress. Sorry kids. Let's get started!

BLOG BUTTONS

You know those bloggers with the cool interactive sidebars? You have the basic social media buttons, but you can also create buttons that link to internal content and increase the functionality of your blog or link to whatever else your little heart desires. It's a pretty simple process and it eliminates the required heading of using the built in photo feature in blogger's layout. It involves uploading pictures to a graphic hosting service (like Photobucket) and then inputting the generated html into this lovely code:

For detailed instructions, visit A Typical English Home.

BUTTON DESIGN/FREE PHOTO EDITING

 I don't know about you, but photoshop is a little out of my budget so I have to get creative with photo editing. For collages and various shapes I use a free site called Pizap. For adding text, I like the variety provided by Photobucket. Photobucket is really useful because it has a variety of editing tools built in and it generates the html you'll need to create buttons or embed images. As of late, I've been experimenting with Inkscape which is a free downloadable tool with a lot of design power. I'm sure photoshop is great, but it's good to know that there are quality free options out there.

ORGANIZING SIMILAR CONTENT WITH PAGES

Maybe this is obvious, but it took me a bit of time to figure out how to add pages that categorized my content so I figured I'd share in case you happen to be having trouble too. If you find that you are doing a lot of posts on, let's say, crafts and you want them to all be grouped together to make it easier for readers to find then this is for you. This process shows the importance of using labels on your content. Every time you write a blog post about crafts, use the same label. This will be important later.  In the dropdown menu on your blogger homepage, go to Pages. Choose whether you want your page to be a top tab or in the sidebar. Click on the 'new page' tab. You'll see two options: blank page or web address. To create a page that groups your craft tutorials, open up your blog in a new tab and click on the label link (ex. crafts) under one of your posts. Look at the web address. It should show yourblogname.blogspot.com/search/label/crafts. Or whatever label you happen to use. If you scroll down you'll notice that all of your posts using that label will be at your fingertips. Right click and copy this web address. Go back to the pages tab and select web address under new page. Choose a title for your page and paste your web address into the box below then click save. That's all there is to it! Repeat for as many pages as you like.

FONT, COLOR, AND LOCATION OF PAGE TABS

To play with the appearance of your page tabs, in the dropdown menu of your blogger homepage select Template. It's recommended before ever making changes like this that you backup your blog, just in case something goes wrong. Click Customize. This will bring you to the Blogger Template Designer. Click on the Advanced tab, then Add CSS. To see what font names and colors you have available to your layout click on the header bar tab. You'll see six digit numbers assigned to each color and a variety of font names. You can see below that my color is 797979 which is a light gray and my font is Indie Flower. Input the color and font you like in the code below in the Add CSS box. When happy with the appearance, click "Apply to Blog."

.tabs-inner .widget li a {
   border-left: 1px solid #FFFFFF;
   border-right: 1px solid #EEE0DD;
   color: #797979;
   display: inline-block;
   font: 16px Indie Flower;
   padding: 0.6em 2em;
} 

With this information you can drastically improve the look of your blog's header and sidebar. Drop me a comment if this post was useful or if you have any questions!