Blogging on a Budget: Awesome, Free HTML Design Tools for Blogger and How I Used Them

If you’ve stopped by my wonderland before this previous weekend, you may notice that things look a little different ‘round here now!

Recently, I’ve been really frustrated with the overall design of my blog. I was going for cute when I first put it all together, but that left a lot of messiness. Blogger is a little hard to customize, and so I was feeling really stuck. I’ve been investigating new templates and even been considering switching to WordPress for a couple weeks now, but my lack of spending money (ya know, college student) was making any sort of investment rather daunting. So with a LOT of my weekend, I took to sprucing up the place a little! (Let’s be honest, I was also procrastinating.) I wanted to make everything cleaner without sacrificing the little bit of whimsy that I like to keep around here, and I have to say, I am really pleased with what I accomplished!

Of course, I couldn’t do it alone. I had to do a lot of tweaking to my HTML, and HTML is scary, guys! And unless you were a website designer in another life, you may not be able to figure it all out on your own either! So with much googling, I came across some seriously amazing and free resources for blogger CSS and wanted to share them with you all, in case you are looking to give your blog a face lift too, all without spending a dime. I also did a little tinkering with the some of the codes I found to further customize, so I included that below as well!

Learn How To:

Beautify the Popular Posts Widget In Your Sidebar (this post has beautiful free CSS layouts for the widget too)

Tip: You can change the font and size of the text as well. Where the code reads

font: 10px verdana;

replace “verdana” with your font name and change the number in front of “px” until it is readable. You can also remove

                text-transform: uppercase

if you want the titles below the thumbnails to not be in all caps.

Make Homepage Images Link to your Post

Remove Those Repetitive Titles in Your Blogs “Pages” (I mean, it’s already stated just above!)

Center the Tabs Above/Below Your Header

Install a Search Bar That Actually Matches Your Blog Design

                Again, you can change the font and size within her code. You will see

font-family: verdana;

                                font-size: 11px;

                Change both “verdana” and the number of pixels if desired

Add a Custom “Pin It” Button That Hovers Over Images (This tutorial is also helpful for removing the button from some Images, or if you would just like to use one of the official buttons!)

Hide Lengthy, Pinnable Collages Within a Post (Yes, they will come up as an option when someone tries to pin)

Add a Stylish Link to Your Blog in a Comment on a Friend’s Blog

Create Links that Initiate Free Downloads Using Google Drive (I use this at least once a week!)

Create More Space Between the Sidebar and Post (Increase Margins)

                This code from the post:

                                .blog-posts {margin-right:-30px}

Can be customized by changing “right” to “left”, if your sidebar is left oriented, and by making the px size positive. Also make sure to change your total blog width (a feature found in your “Template Designer”) by the same number of pixels to realign the text and images.

Decrease the Blank Space Above Your Header

This is similar to the previous source, but you may want to do this if you remove the nav bar at the top of the page. Again, you can set the negative px value to less than the specified amount, so that the space will be decreased, rather than completely eliminated, as the tutorial instructs.

                               

As you might find out if you click through, many of the changes I made originated from this list of posts by Bloomin’ Rouge! One of the best ones was how to easily remove the automatic borders on Blogger images, which finally solved alignment issues that I couldn’t find a cause for! Another game-changer was adding text spacing and/or capitalization to my tabs, body text, and gadget titles, which you can see all over—fancy right?! She has so much free, beautiful information, and her gorgeous blog design is proof she knows what she is doing.

Additionally, the Blogger Help Forum is a surprisingly great resource if you can’t find a good a Blogger tutorial by googling. I had a very specific issue with a Watermark on the “Ethereal” Template I was using, and was able to find a CSS code to remove it within minutes! (Here is that post, in case you are having a problem that sounds similar.)

Additional Tricks:
 

ALWAYS Backup Your Template Before Making HTML Changes

As many of the links above will also tell you, you can save a complete backup of the Blogger Template you use, including all your changes, in case something goes horribly wrong. In the dashboard, select “Template” (the same place you will be able to edit HTML). In the upper right hand corner, there is a “Backup/Restore” button. Click that, then “Download full Template,” just to be safe. Even if you aren’t making any big changes soon because you love the layout of your blog, it is probably a good plan to save all your work.

Create Your Own HTML Widgets Within Blogger

To do this, select “New Post” in your Blogger Dashboard, and put together all images and text, including links, in compose mode. Be mindful of the width of your sidebar as you do this (you can find and change it through “Template Designer” on the “Layout Page.”) Then switch over to HTML, and copy everything. (Save and close this post—do not publish!) Go to “Layout” and “Add a Gadget” to your sidebar. You will select “HTML/JavaScript” as your widget, then paste into the “Content” box. (If I’m not making sense, this post may clarify. It was where I got the idea!) I used this method to create my “About” information at the top of the sidebar, because I didn’t like Blogger’s layouts, and wanted to add easy links to my social media. I did get my icons free here, but I’m considering personalizing them further, because the black majorly sticks out now. (There are so many different colors of icons there though!!) You can also quickly center all the widgets you made with this simple trick.

Get Your Posts Read Back to You

This isn’t really coding or a visual switch, but another fantastic trick I read recently on Beka Ellen was to get your computer to read posts back to you in order to edit them! You can find how to do this in Microsoft Office here.

I also want to add customized share links to the end of every post, but I am having a hard time finding a tutorial I can completely personalize, so if you know of one, pass it on! Other than that, it’ll just be little design touches in the coming months to make this little place all my own!

Regardless, after the past weekend, I’m not too disappointed with Blogger after all! It’s a format I’m familiar with, so I am relieved for the time being to not feel forced into switching to WordPress due to Blogger’s weird limits. Thanks to all these little tutorials, and all the others out there, I think I’ll be sticking with it, and can even save money on a template for now! If you have any questions about what I did specifically, I’d be happy to answer them! I am nowhere near an expert, but this stuff is super fun for me to play around with, and I might be able to give you a hand!

What kind of blog design have you done in the past? Feel free to share a link so that I can see your beautiful blog, and guide me to any other helpful posts you know of regarding blog design!

Stay Lovely,