Now that you've decided on the different colors for your blog based on Part 1 of this series, it's time to change the color of the typography on your blog. This guide is mainly for Weebly users so the instructions will be for the Weebly platform.
When you open the Weebly Editor, you should see five different tabs at the top. Select the Design tab. When you're in that tab, select the "Change Fonts" option.
When you choose that, you'll see a bunch of buttons for all the different types of text that you can change. Refer to the color layout that you made before and select one type of lettering to edit for now. When you select that you will see a screen like this:
You can fiddle around with size, style, etc. but I'm just going to explain how to change the color. When you open the drop-down menu, you'll see the image below. You can choose one of the colors that are already available, but in order to get the perfect color based on your color scheme, you will have to hit the arrow circled in the picture below.
Now it will bring you to a screen like the one pictured below. Delete the hexadecimal before the hashtag (yes, I am calling that a hastag) and type in the hexadecimal of your planned color.
So there you have it! Stay tuned for one more part to this series.
By the way, I got a fish tank for my blog. Have you fed the fish yet?
If content is the most important part of a blog, then design comes in a close second. A blog design can lead to either a positive or negative first impression. Fortunately, by implementing an effective color scheme into your blog, you can help make that first impression a good one. The Secret to Confidence With Color Design by Josh Byers is an amazing resource to help you learn the basics of color design. I would recommend that you read it before you read the rest of this post.
Step 1: Picking Your Colors
Now that you've read that article and have the basics of color design down pat, open Adobe Kuler. Locate the drop-down menu labeled "Color Rule" and hover your mouse over it. Then, choose a color relationship. I picked the monochromatic color rule for my blog.
Next, you can start fiddling around with your colors by moving the handles on your color wheel. I eventually ended up with the colors below.
Step 2: Design the Layout of the Colors on Your Blog
Once you are satisfied with your chosen color palette, take a good look at your site's theme. At this point you may want to sketch out the basics of your theme such as the headers, background, site title, menus, typography, etc. Just draw a simple layout of these elements and label them with the color that you want each element to be. It's best to indicate the different colors in your sketch with the hexadecimal of each color. To find the hexadecimal of a color, select the color and go down to where it says HEX. The six character series of numbers and letters is the hexadecimal for that color. Please do not skip this step. It will be very beneficial when it comes time to implement the colors.
Stay Tuned for Part 2 of This Series
Stay tuned for the next part in this series, in which I show you how to actually make the elements of your blog the color that you would like them to be.
Do you plan to redesign your blog or did you recently redesign it? What techniques did you use for your blog design?
Why Make a Blog Button?
I'm Convinced. Let's Actually Make a Blog Button Now.
Step 1: Find Your Photos
Find an image(s) that you would like to include in your blog button. I would use your own original image, clip art or a picture under public domain, such as those in the Wikimedia Commons, to avoid copyright infringement. You can also manipulate your photos in Photoshop before saving them to your hard drive.
Step 2: Resize
Open PicMonkey or download it from the Chrome Web Store. Choose edit at the top and then upload your background photo. Select the resize button under the cropping symbol menu. This should come up.
Deselect the "Keep Proportions" box. Then change the size to 125 x 125 pixels.
Step 3: Personalize
Now comes the fun part. It's time to personalize your button! If you have any other pictures that you want to add, you can add them by clicking the butterfly icon and then selecting the "Your Own" button. You can also add pictures and effects that are built into PicMonkey. When you are done personalizing, make sure that you type the name of your blog on the button by selecting the "Tt" icon on the side. Then, save your image.
Even thought the file size is big, I would select the highest quality, Sean, because you want your best work to be on your blog.
Step 4: Generate Your Code
Open a new post and upload your picture. Don't worry! You can delete this blog post draft later. Then, right click on the photo and select "Copy URL". Next, go to "Grab My Button" Code Generator.
Start with filling in the "Your Image URL" by pasting the url of your image. Then fill out the rest of the top section. The section under "Choose Your Colors and Code Box Options" does not need to be filled out. Just leave that part as is. When you have finished filling out the form, click the "Preview" button to make sure the image looks okay.
When you are satisfied with your image, click "Get Code".
Step 5: Upload Your Blog Button
Copy the code in the box. Now go back to your Weebly site. Make sure you are in the "Build" tab and click the icon with the three dots at the top left. Choose the "Embed Code" button and drag the widget over to the sidebar of your blog. Then, paste your HTML code into the box and hit enter. That's all there is to it.
If you want to upload a button from another blog onto your site, all you have to do is copy the code beneath the button and use the "Embed Code" feature to insert it onto a page.
Is there anything that I can clear up for you in this tutorial? Have you made a blog button yet? And please grab my blog button and post it on your blog! I'd be willing to post your button on my blog as well.