May 3, 2013

DIY Friday: Blog Design Tutorial (part. 1)

I started a blog a year ago called Grace and Emerald, after a few posts I got bored talking about myself. Since I did not know much about coding at the time, I was not able to design and dress up my blog. At that point, I decided to take some time off from blogging and teach myself the basic HTML and CSS codes that were needed to jump start my hobby. After figuring out what I wanted to blog about and combining that with my newfound knowledge, I was able to create a website that I can be proud of.
I started with the basic free Blogger account for my first blog but for my second blog I decided to buy my domain name for 10 bucks a year through Blogger. Having my own domain name basically means that .Blogspot gets dropped so that becomes I still use Blogger's Simple Template as a foundation for my site and after customizing the codes to my liking, I am able to make the template my own. During the customizing process I did a lot of research and found some helpful tips and tutorials from other bloggers. I would like to pass along what I have found to anyone who is not tech-savvy but have enough patient and motivation to design their own blog.

Buy a custom domain through Blogger
Blogger template HTML editor

Navbar at the top of the page
Border and box shadow around the images
Dashed and dotted line in the footer
Subscribe to: Posts (Atom) link in the footer

Post header
Post divider
Newer and older posts link in the footer
Social media icons
Share This buttons

Post tab
Post footer

Before jumping in and making all of these changes to your blog make sure to back up your Blogger template so that you still have a foundation to go back to just in case your make a mistake with your codes. Recently Blogger updated their HTML editor with a more sophisticated and user friendly text editor which include line numbers and color coding. Make sure you familiarize yourself with the new features before you start because it will make everything a lot easier and more organized. After tackling all of these different components you will have a better understanding of how your site is laid out. If you want to learn more about coding you can checkout W3Schools, which is a great reference for codes, and Codecademy, which teaches you basic coding for free! I use both of these sites on a regular bases and I am a big support of empowering more girls to learn how to code. So if you have any questions or would like to share the site that you have created feel free to leave me a comment. I would love to hear from you. I will be working on more tips and tutorial to dress up your site so stay tune for part two.

No comments:

Post a Comment