Bloggiesta Challenge: Tips & Tricks for Personalizing Your Blog Theme

Posted September 14, 2016 in Blog Design: It Matters, Design / Leave a comment!

Hey guys! I’m really exciting to be taking part in another Bloggiesta! It’s always a great time to update your blog and I love to share my tips and tricks I’ve been learning along my blogging journey.

I get a lot of people asking me how I got my blog to look the way it does. I put some money into it plus I’m a designer and web developer so it’s a little easier for me. You don’t have to have a ton of knowledge to update your theme a little so I’m going to be sharing some easy ways you can personalize your blog theme. It’s the little things that make it feel more like yours.

Tips

These are some tips to helping you update your theme and keep it updated!

1. Learn CSS

This may seem challenging but even if you learn the basics your blog will look so much better! CSS is a programming language that styles a web page. Learning basic HTML is a good idea as well because they work together. I recommend checking out W3 Schools and just go through some of their lessons. This will help with the structure and styling of your blog posts even because when you’re writing a post there’s a Visual and Text option. The text option is where you use HTML and CSS to write your post.

On WordPress you can also got to Appearance -> Editor and find your styles.css page and change the styles for your whole blog!

2. Use featured images

When you have something visual assigned to a post it attracts more attention. People like to see more than they like to read (even though a lot of us are readers)! Even on your social media sites, using an image will normally generate more likes and views. People love pretty things! If you don’t have Photoshop (which can be difficult to use and expensive) you can use free websites like Pic Monkey and Canva. Both work just as good! If you’re already great at using Photoshop then I know CS2 is free (maybe CS3). You can make pretty things without spending all your money!

*In WordPress there’s a Featured Image section on your sidebar when writing a post! I know Blogger has one but I’m not 100% where but Google is your friend!

3. Get to know your theme!

I’m sure a lot of you use free themes. Just because they’re free it doesn’t mean you have to keep the default settings! I hoe you’ve all seen the customize button that allows you to change some things about your theme. It all depends on what theme your using but generally you can change most of your colours. I highly suggest that you just take some time to go through all those options because you might find something doesn’t do what you thought it did!

4. Clean out your sidebar!

Your sidebar isn’t the place to thrown in all those awards, buttons, and general clutter. Your sidebar is there to make things easier for the people visiting your blog!

Things you absolutely have on your sidebar: social media buttons, search bar, archives.

These things make is so that people can easily contact you and search through your blog psots!

Other helpful/fun things that can be on there: currently reading, link to your store, your picture and short bio, currently reading (for book bloggers or not!), a small upcoming posts teaser.

These are some other helpful things to have on your sidebar. Not necessary but make sure to keep it clean!

5. Some quick design tips:

Use only 3-4 colours max, ranging from something light to something darker. Don’t use too many fonts. Keep everything clean and easy to read. Use pictures and headings in your posts to break up the text and make your blog post more visually appealing. Invest in a good blog header and logo. This is the part of your blog people will remember the most! Keep your content and design well organized. Nobody likes a messy blog. Make sure to design to your reader, not you. Get advice from other friends and bloggers! They’re the ones who be reading it!

Tricks

Custom CSS could have a whole series on its own. These are a few fun things that I sometimes do on my blog that other people have been asking me how to do. Don’t get carried away with theme changes because you can break them sometimes. Make small changes at a time so nothing goes too crazy!

Change the bullets on your lists:

ul { list-style-image: url(‘link to image‘); }

This will use an image of your choice as the bullets! Remember that this will change all your lists on all of your pages and posts. If you want to do it on one list then you need to go into the text editor of your post and put it in your html like this:

<ul style=”list-style-image: url(‘link to image‘);”>

<li>Option 1</li>

<li>Option 2</li>

</ul>

Use custom social media buttons in your sidebar:

This is something I use on my blog. If you look over there –> You’ll see my social media buttons under my about me section. You could use a plugin but they can be bulky and they don’t always let you use your own images. This is the code I use (in a simple text widget on my sidebar) to put my own social media links in:

<a href=”Link when you click on the image“><img src=”Link to your Image” alt=”Image Title Here“></a>

You put one of these for each icon. I put mine right after each other so they line up and add a center style like this:

<div style=”text-align:center;”>

<a href=”Link when you click on the image“><img src=”Link to your Image” alt=”Image Title Here“></a>

<a href=”Link when you click on the image“><img src=”Link to your Image” alt=”Image Title Here“></a>

<a href=”Link when you click on the image“><img src=”Link to your Image” alt=”Image Title Here“></a>

</div>

You can put these links in your posts too! You can link them to an author after their bio or to a blogger who is guest posting on your blog! Icons are much nicer than plain links!

Style blockquotes

Some blockquotes can be a little boring. With this CSS you can at least liven it up a little bit! This would go in your CSS editor under appearance.

blockquote {
background-color: #f4f4f4;
border: 2px solid #dedede;
border-left: 8px solid #dedede;
border-right: 8px solid #dedede;
border-top: 1px dotted #dedede;
}

This is simple CSS to change the background colour and border for a blockquote area. You can also change the font styles plus lots more!

Add an author photo

This is something that a lot of people will use a plugin for but I don’t have any reason to use one. You can just add some CSS and voila! Here is my code simplified:

<div style=”text-align:center;”>
<img src=”Link to your beautiful self portrait” alt=”Picture of me” style=”width:250px;”>
<p>This is where you write a short blurb about yourself!</p>
</div>

You can change things like the width I have in there to however big you want yours and the alt code to another phrase describing your image. Just play around and see what works! After this code I have my social media links code snippet to make one pretty looking widget!

 

Challenge

I’m challenging all of you to do 2 things during Bloggiesta (or now if you’re reading this in the future!):

  • Go through your sidebar and take out anything that doesn’t belong. Keep it clean and make sure everything is easy to find. You can always put your buttons and awards on their own page!
  • Update your theme! Even if you just change a colour or two, it’s always a great idea to take a good look and make sure everything is working together as it should be!

Bonus challenge:

  • Add some of the custom CSS I gave you! You can always take it out later if you don’t like it but practicing your CSS skills will help you in the future!

That’s all for today! I didn’t want my post to get too long but if you’re looking for more info on something then PLEASE let me know and I’ll write a more detailed post on it!

Happy blogging everyone! If you have ANY questions please don’t hesitate to ask! I’m not an expert but I consider myself really good at using WordPress. Other blogs I can only do so much but I can still help you find something online that could help!

Tags: , , , , , ,


14 responses to “Bloggiesta Challenge: Tips & Tricks for Personalizing Your Blog Theme

    • bftreviews

      Hmm you’re totally right, they have disappeared! I’ll have to see what I can do haha thanks for bringing it up!

  1. Thanks for the tips! This is all so overwhelming to me, haha. I’m definitely bookmarking this post in case I manage to actually get my blog up and running. Considering how much it confuses me and stresses me out, I’m not sure it will ever happen. xD

    • bftreviews

      You can do it! Just keep it simple! Plus you can always start a blog and change it to private so only you can see it. That way you can practice without everyone seeing 😊

      • I actually have a blog (set to private) that someone designed for me on Blogger! BUT I’m having so much trouble figuring out formatting, etc. /o

      • bftreviews

        Awe that sucks! Maybe try making a WordPress blog and see if it’s any easier? I find it is haha

  2. Diana Moran

    I’m a designer too, so I’m always looking at my blog wanting to redesign it, I never do because it’s like falling down a rabbit hole I won’t know when to stop. I try to keep changes simple so when I’m ready for a major change it won’t feel like so much.

    • bftreviews

      That’s why I keep my design fairly simple. When I want to change it all I have to do is make a new header and change some colours. SO much easier that way.

  3. Thank you so much for your post! I am learning new stuff all the time and tweaking my blog (or at least applying then removing) different things to see what I like, etc. I really like your social media buttons. For your widget, if I was linking to Facebook, what would I type in the red areas? I just cut/pasted it but then realized I needed to customize it to my page. Sorry for such a bonehead newbie question. Sandy

    • bftreviews

      Don’t worry about it! All questions are ok! Ok so for the first red part that’s where you would put the link to your FB page. Like what’s up in the address bar when you’re on that page. The second red part is the image that you want to use for your icon. There’s lots of free social media icons out there or you can make your own. It could be a picture of a dog for all it matters. You just have to upload a picture to your blog. Under the media section you should be able to click on the image and there should be a link to image or image URL section with a big long link. That’s the link to your image and that’s what goes in the second red part. It’s the same thing for every icon you want to add. It’s just each icon will go to a different place and probably look a little different.

      Here’s an example!
      ”Image

      Let me know if that made no sense haha!

Leave a Reply

CommentLuv badge