Web design tips by Shabna

In a time when social media rules the internet and blogging is fast becoming the new "it" hobby it's hard to stand out from the crowd! As depressing as it is, appearance is one of the most influential aspects of first impressions and it's the same online as well. There's been a boom in demand for freelance web-designers as more and more people are throwing cash towards making their blogs prettier, classier, more put-together, more professional etc! Whatever your style, the blog layout is now a very important aspect of a blog and sometimes it can be one of the things that makes a reader want to stay on your blog!

As a freelance blog-designer I'm used to the cries of "HTML is scary! It's a whole another language!" but it does not have to be like you're trying to read Chinese. In fact, HTML is written in English so you're pretty much half-way there now! In this post I'm going to show you a few tweaks you can make to your blog yourself, without having to fork out to get someone else to do it.

A pretty Related-Posts widget

Majority of blogs use the infamous LinkWithin widget to show some related posts under your blogpost. While this is perfectly fine, it's not particularly pretty and not very customisable either. Enter nRelate! A very customisable widget with lots of different styles and it's very easy to add to your blog too. Hardly any coding for you really, you just bung in the code that they make into your own code et voila! Below you can see how it looks on my blog. Click here to check nRelate out!

Custom Header Font

While Blogger has expanded their fonts, it's still not as broad as some of us would like. Have you ever come across a font and wished your post titles or sidebar titles could be in that font? It is possible! The process is actually quite long and instead of outlining the whole thing here you can check out this amazing blog post which does the bulk of it for you! An example is below too:

How to make my links pretty?

While blogger lets you change the colour of your links - that's about it. There's quite a lot you can do with your links and the first thing to get familiar with is the code that affects your link. Go to your HTML code and scroll down a bit until you find:

a:link {

text-decoration:none;

color: $(link.color);

font-size:$(body.font);

}

a:visited {

text-decoration:none;

color: $(link.visited.color);

font-size:$(body.font);

}

a:hover {

text-decoration:none;

color: $(link.hover.color);

font-size:$(body.font);

text-decoration: underline;

}

Now your above code might be different but the basic jist is that the a:link is what your links in general will look like, a:visited is what links you've already clicked look like and a:hover is what your link will look like when you place your cursor over it. If you wanted to add an underline you'd add "text-decoration: underline;", if you wanted them to have a background you'd add "background: #000;" (that would give it a black background!), if you wanted it to be all caps you'd add "text-transform: uppercase;" (or lowercase if you wanted it all lowercase letters!) etc etc! You can add these to all of the above or you could just make the hover special! It's completely up to you and this is a fun one to mess around with. Make sure whatever you add to each thing is BEFORE the last "}" bracket! Try and imagine a:link, a:visited and a:hover have little handbags - they start and end with { and } so to add anything to their handbags just make sure they're between the two brackets! 

If you're wondering what the $(link.color) and $(body.font) stuff are, it's basically telling the code that the colour or the font is whatever you've chosen in the template designer. If you don't want to use the template designer and just want to edit from HTML then feel free to change that to whatever colour or font you want! 

You can similarly edit other parts of your blog with this same method - like your headers! To edit your post titles, search for post-title in your code and add whatever changes you want! The "h2" one is your sidebar header titles and there's also one called "date-header" so you can change how your date looks too! For more details and options use Google, trust me you can find everything on google! Just add "Blogger" to your search and make sure the time range is atleast within the last year as the interface and code has changed over the years!

I hope you all found some of that useful! If you still want a full re-design feel free to contact me as I do blog-designs for £20! If not, have some fun with HTML and see how far you get! Let us know if you try any of these!

By Shabna at Scheine