Blog Design Tutorial: Getting Started

Blog Design Tutorial: Getting Started

Getting Started

1. Design in mind
2. Websites
3. Photos, Clip Art, and Font
4. Templates
5. Layouts

Let's get started with your blog design. In this section, you will explore some blog designs, useful photo websites, various fonts and clip art, different templates to choose from, as well as blog layouts.

 

 

 

1. Design in Mind

 

Before you can even start a blog, think about the type of designs you want. If you already have a TpT store with a logo, start from there. Think about the colors you want to see. Think hard! You may not be able to change it again so easily. When I first started my logo only had my name and apple. The colors were red, green, and black. White goes with everything so I decided gray/silver would be my third color. Red and green represent the apple from my first logo. The gray/silver represents the technology where majority of my products work on.

Here are some TPTers who can create logos for you:

Maria DiCesare - $6
EduClips  - $12+
Melonheadz - Contact her for price
Surfer Kids Clip Art (Provided Free Computer Clip Art in my logo) -  $27

If you're wondering about my new logo, I made it with Microsoft Word. =P
 

 

2. Websites

 

Once you have a design in mind, there are some websites you may need to complete you own blog design. First, you will need a photo website where you can get photo links. Photobucket is the website I use. You can upload numerous pictures and create different albums. There are other website too like Flickr. You need to make sure that the website you use can create urls for your photos.

 

Another great suggestion would be to get a second blog and label it your "Test Blog" so that you don't mess up a blog you have already. Believe me when I saw I messed up my original blogs so many times, I didn't want anyone to see it. As you complete various parts, I saved the blog design and added to my original blog.

 

3. Photos, Clip Art, and Font

 

Next, you'll need to create the different sections for your website (such as headers and dividers). I used Microsoft Powerpoint and Paint to create all my designs. I used KG Fonts for my website (with a paid commercial license). There are other fonts that are available without a commercial license. Check out Fontspace or Dafonts for wonderful fonts. For clips art, mycutegraphics has free educational clip art. TeacherspayTeachers has numerous free and paid clip art. The computer clip art and banners in my header were all free from TeacherspayTeachers.

For the 2 side designs, I downloaded free Digital Paper (Digipaper)  from TPT. I will go more in depth on creating that 2 sided design latet. For now, think about what designs would like. Here are some Digipapers I tested out before I finally decided:

KristyBear Designs - Digital Paper
Red Pepper - Digital Paper
Jamie Carey - Backgrounds
Emily Wean - Digital Paper

Here are some other helpful clipart if you plan to make your own designs:

Free Push Pin Graphics / Clip Art - The 3AM Teacher
Curvy Rainbow Square Frames Clip Art - The Enlightened Elephant
Sweet Round Label Digital Clip Art - Lockless Creations

Another great website to help make your pictures have a transparent background is Lunapic.com. You can make any picture have a transparent background with only a few clicks. Simply upload a picture, choose the color you want to be transparent, and save that picture! I love it! I wonder how I lived without it.

 

4. Templates

 

As far as templates are considered, Blogger has a few templates to choose from. I used a "Simple Template" for my blog. Easy and straightforward. "Picture View" is great for emphasizing your header/logo. My advice would be to go through each one and click the type to see what you blog would look like if you chose that style.

 

5. Layout

 

After choosing your template, you layout comes next. This maybe one of the bigger decisions you'll make about your blog. This is how your organize the different parts of your blog including where each section goes to. You can choose your "Body" Layout (the main part of your blog) and the "Footer" layout (the bottom section of your blog). Basically, think about where you want your posts to be and where you want your other clickable sections to be.

To Choose you layout:

Template >> Customize>>Layout.

Choose your favorite layout and click "Apply to Blogger" to see what it looks like. Once you're back on the main page, you can click "Layout" and move around various parts of your blog layout.

 

Click For the Blog Design Tutorial Overview.

Test out a few things and see what you come up with. Let me know if you have any questions in comments below!
Class Dimissed!

 

 

Blog Design Tutorial: Guide

 I promised to share with you all how I designed my blog. I will tell you upfront that you will be frustrated at some point during the process so having patience is important. If you get angry and think you can't take it anymore, throw your computer out the window.\ stop and take a break. It took me 2 weeks to complete it, only because I had to find websites with codes that actually worked. Here, I will provide you with the codes so it may take only a day or two, depending on what you want and how long you have to work on it.

 

I've broken down my blog design into different sections. It is broken down as followed:

 

1. Guide
2. Getting Started
1. Design in mind
2. Photos, Clip Art, and Font
3. Templates
4. Layouts
3. Layout Parts
1. Header
2. Post Area
3. Sidebars
4. Background
5. Bottom
4. Post Area
1. Post Icon
2. Signature
3. "Posts you may like . . "
4. Comment Area
5. Post Divider
5. Sidebar Area
1. Headers
2. Follow Me Buttons
3. Grab My Button
4. Other Sections
5. Section Dividers
6. Backgrounds
1. Simple Background
2. Blog Border Color
3. 2 Side Design Borders
7. Bottom
1. Bottom Blog Logo
2. Back to the Top Button
8. Other Tips and Tricks
1. No Photo Shadows
2. Pinterest Hover Button

 

As I write out the posts, I will hyperlink each section at the top so you can easily find it from this post. I will also hyperlink this post and it will also be at the bottom of every post about Blog Design. Some sections will be small. Others quite large. I will try to include as many pictures as I possibly can. You can expect a post from the tutorial at least twice a week.

I haven't decided if I want to tackle the "Page Ribbon" as it was 3 days of trial and error, but if you wish me to, I will.


Class Dismissed!

 

 

 

 

 

You Ought to Know About Livebinder!

You ought to know about this website I found that is wonderful and perfect for any teacher in any grade or subject. Ladies and gentlemen, I present Livebinder!

 

 

Before I start, I did update my blog. I spent about 2 weeks on it and I must say I am impressed with myself! Anyway, I taught in a 1:1 school. If your unfamiliar with that term, it means that every student in every grade has their own digital device, whether it's a laptop, netbook, or tablet. I taught 2nd so we had netbooks.

 

As a teacher with students having laptops, it was kinda frustrating to have my favorite bar full of 20+ links to websites. Don't even get me started on what my favorites folder actually looked like. During a professional development that was particularly useful, they introduced this website that acts as a favorites bar except its online! Yes, that means logging in, but after that, you can access your favorite websites from ANY computer!

 

For those who continue working at home (pretty much all of us!), it's frustrating to find a website you love and then get to work and totally forget the website address because we saved it to our home computer. Livebinder is the solution!

 

 

Livebinder Login

 

 

After signing up, you can create up to 10 binders with different links to websites. For elementary teachers, that's enough for each subject and then some! Take a look 2 binders I have created. The first binder is for the content areas.

 

 

Subjects Binder

 

 

In the first tab, I've added all the reading websites I have found while I was teaching. Most of them are free (Tumblebooks, Starfall) . Others require just a log (Houghton Miffin) . One or two of them you have to pay for (Grammaropolis, Speakaboos).

 

 

Best part of all: you don't have to open a new window! With most websites, you can explore the website from within Livebinder. That means no multiple tabs. You can jump from website to website in just one binder.

You can even browse other binders that others have created.

This tool is wonderful! I look for websites at home, add them to Livebinder, and access them on my school computer. I simply keep Livebinder on my favorites bar! I hope Livebinder is as great for you as it is for me!

 

An InLinkz Link-up

Winner of my Blog Reveal Giveaway

 

 

 

 

A big thank you to all who entered! An even bigger thank you to those who donated! We have a winner!

 

 

 

 

I can't wait to get started posting more on my blog. I'm currently working on some tutorial posts on how I made each element of my blog. Be on the look out for those posts! Get post sent directly to your email by subscribing via email.

 

 

 

Class Dismissed!



 

 

New Blog Design and Giveaway!

I've been working on a new blog design for 2 weeks! I've hopped around several different websites, trying to figure out how to do all the different parts. I've always been great with computers so making a new blog with all the different aspects should be easy, right.

 

I think I lost my mind when I tried to make that top ribbon.

 

 

I spent 3 restless nights trying to figure out the ribbon for the blog. I knew once I figured that out, the rest would be easy.

 

I'm very pleased about the way it turned out. Most parts were very easy and anyone could do it! I'll be creating some tutorials on how I made different parts of my blog just in case you want to take a stab a it yourself. =)

 

 

To celebrate, I'm having a giveaway! Enter to win over 30 products from fellow TPTers! Winners will be announced on November 9. 

 

 

a Rafflecopter giveaway

Let me know what you think of my blog in the comments below. Until then!

Class dismissed!