16 August 2015

Blog Design for Beginners

I'm no HTML expert, I assure you, but over the couple years I've been blogging properly I have picked up some very useful tips from various places and people that have helped me a lot. I haven't purchased a blog template or header: everything you see on my blog I have done myself, and although it's nothing fancy, as I like my blog to look clean and simple, if you too want to make your blog look better on a budget then here are some tips. Bear in mind most of these tips will probably be better for Blogger users as that's what I use.

Simple, affordable blog templates
If you want to just buy a blog template then here are some good ones I've found (and have been mulling over buying) that are affordable: AinezStudio, PinkPotDesigns, PipDig, MariaGall, MTHblog, MangoBlogsShop.

Make your blog images the same width in the CSS box
Bloomin' Rouge has done some great posts on the basics of designing a blog so I'd recommend you check those out and read them. One of the tips she had was to make all your blog images the same size and I think this makes everything a lot easier so your images are automatically sized the same when you post them. To do this, through the blogger template designer, scroll down to the CSS box and paste in (replace the 640px with whatever width):

/* custom – set post image size start */
.post-body img {
width: 640px;
height: auto;
/* custom – set post image size end */

Justify your post text in your CSS box
Basically your CSS box is just a quicker way to adapt your HTML so most or all of the adjustments I do is from this. I should mention if you are doing a lot of copy and pasting in the CSS box, make sure you hit enter after each one because sometimes it won't work. Like the previous tip, go through to your CSS box and paste in:

.post{ text-align: justify; }

Posting your images on Flickr or on Blogger
If you upload your photos directly to Blogger, you can see how the quality looks worse compared to if you upload them on a site like Flickr, Photobucket or Imgur and copy and paste the html link. I personally like uploading on Flickr because in the past when I've uploaded through Blogger sometimes the photo quality looks weird or it changes the colouring of it, etc. If you do upload to Flickr though, your photos won't show up on the Popular Posts widget if you have one. However, this moves me onto my next tip...

Make your own Popular Posts widget, or any posts widget
You can easily make your own widget of text, links and posts on your sidebar so readers can see different posts that may just get buried in your archive. All you have to do is add an html widget to your blogger sidebar and do the html yourself. I'll give you an example of some html which is made up of a photo, text underneath it and the photo linked to the correct post.

<a data-flickr-embed="true" href="http://ohflowerchild.blogspot.co.nz/2015/08/july.html" title="MONTHLY REVIEW: JULY"><img alt="19052158233_57d3b6be1e_o copy" height="164" src="https://farm1.staticflickr.com/326/20001705270_071edf6bd6_o.jpg" width="246" / /></a><script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script></center><center>MONTHLY REVIEW: JULY<br /><br /><br />

It may look crazy and complicated, however it's really simple. As you can see my sidebar has photos and links to other posts on my blog, and this is the html for the first photo at the moment. Basically you paste the html link from Flickr, you can replace the 'title' with whatever you want (in this case MONTHLY REVIEW: JULY) and add in the text underneath by using <br> (one enter) where you want it. On my sidebar, I repeated this process with all the photos and using three <br>'s between each post. As for sizing your image so it fits on your sidebar, do this in photoshop before you upload the photo.

Center your post titles and/or date, as well as any sidebar titles or text
Centering things can make everything look a lot more neater in some ways. At the moment I don't have a centered title or date for my posts but if you want this is how you do it. Paste this in your CSS box:

.post-title {
text-align: center;

.date-header {
text-align: center;

You can also just use the <center> tag and </center> (closing) tag to center anything you want but you probably know that already. This is in terms of sidebar text or titles as I think it generally looks better this way.

Social media icons, the easy way
I could never figure out for the life of me how to put social media icons on my blog so I followed another method I found on the internet and it's really easy. This video explains it all, but you basically do it through a blogger post.

Everything I've learnt I've basically just googled so if there's anything you need to do, chances are it will be somewhere on google. Thanks for reading, and hopefully you found some of this useful!

No comments

Post a Comment

Blogger Template Created by pipdig