* PicMonkey affiliate links used in this post. See full note below.
Tuesday was Part 1 of Beginner Blog Design, where we talked about steps 1-4: Gather inspiration, get acquainted with PicMonkey, create blank images, and adjust your Blogger template. Yesterday was Part 2, where we talked about step 5: Design your blog elements.
Today, we'll wrap it up with uploading our design elements to the blog.
Who's ready to see Beginner Beans transform into a girly blog? If I had a frilly side, this is what it might look like. But that's rare, so this post will be your one chance to see it. There are a few options for uploading your design elements into the template. Let's get to it! (Images were created in PicMonkey, and uploading instructions are for Blogger.)
6. Upload Your Image(s) to Blogger
To upload your images to Blogger, go to Layout. The header and favicon have their own special upload boxes, the rest is uploaded through Gadgets, either HTML or Image. As you can see, I prefer HTML for most of the things I've added. Lots of HTML.
Blogger's Image Gadget
Images can be uploaded with the image gadget. This shrinks images to fit into the space given. You also have the option of adding a title to the image and linking it to something (i.e., an about page if it's a profile picture, or a sponsor's site if it's an ad). The Shine e-book image and "My Books" title are an image gadget.Blogger's HTML Gadget
Images can also be added with the HTML gadget. In order to do this, the images have to first be hosted somewhere else. I use Photobucket (which is free), and there are other options. Once you upload your image to this other site, you copy the HTML link, and insert it into the HTML of your gadget.In order to link it to a page on your blog (which is necessary, otherwise people will be sent to PhotoBucket when they click on it), go to Rich text in the gadget, highlight the image, press the link icon, and insert whatever link you wish to send it to (i.e., a welcome page if it's a profile picture, or your social media accounts if it's the social media icons). This process is shown below under "Social Media."
Most of what I've added are HTML gadgets. Even the text areas are HTML, because that allows me to link the text (like my contact information).
Blogger's Other Gadgets
Blogger also has some other gadgets that I mostly leave alone. You can look through them and see if there's any you'd like to add--it's easy to remove it if you change your mind. I use the Link List gadget to link to the places I've guest posted or been mentioned under "Beginner Beans Elsewhere."Try not to duplicate what you already have (no need for your Blogger profile and your own profile image and text), and keep your sidebars cleaned up. It's easy to add a lot, and too much stuff keeps people from browsing and seeing what you have available. Remember, what you're creating in your header and sidebar is to help your readers navigate through your site--try not to overwhelm them.
Here's more about loading each of these design elements in Blogger...
Header
Upload the header image you created into the header box, then select "Instead of Title and Description." There a few other options for doing this, but this is the most straight forward and basic. It should work for any basic header you wish to upload. If the header is too big, it will automatically shrink to fit your blog width. Remember to save your header as a png! And don't make it too small. These two things will make sure it's crisp and clear.
Profile Image + Welcome
Your profile image can be uploaded in an image gadget, or uploaded to PhotoBucket (or another hosting site) and linked into an HTML gadget. Either way, it's a good idea to have your photo link to an about or welcome page. More about that below.It's also helpful to have a little welcoming/about paragraph that briefly says who you are and what your blog is about. Putting this in an HTML gadget (with the profile photo if you want them right next to each other, or in a separate HTML gadget if you'd like them separated) allows you to link portions of the text to a welcoming page, for instance. Remember, it's all about helping the reader find what they're looking for--and if they're new to your site (if you're a beginner, you'll likely be getting mostly new people to your site), they're looking to find out who you are and what your blog is all about.
Social Media Icons
Upload your social media images to Photobucket (or another image hosting site), then click the tool icon in the top right of the image, select "Get Links", then click on the HTML link. It will automatically copy.
Go to Blogger's HTML gadget and insert (ctrl + v) the link. Repeat until all images are added. Switch to Rich text mode and highlight and link each image to it's respective profile page.
Remember, you're sending them to your profiles so they can easily follow you, if they wish. You don't have to be a part of every social media option, and you don't have to link every social media profile you have.
It's best to choose the few profile presences you'll use for your blog--I use Twitter for blog updates and communication, I link to my rss and blog lovin' feeds because those are two popular ways to follow blogs, and I have a link to my Pinterest account where I gather ideas relevant to the topics I blog about. I don't advertise Instagram because it's mostly pictures of my family--I don't mind if people follow me, it's just not always relevant to my blog. And I don't link Facebook, because I haven't chosen to have a blog Facebook page and I keep my private profile private.
Page Links
Page links are uploaded the same as social media icons. Upload your page image to photo bucket, then copy the HTML links into the HTML gadget. Switch to Rich text mode and highlight and link each one to it's respective page. These can all go in the same HTML gadget, or depending on what spacing you prefer between them, you might want them in separate gadgets. If you have blank space built into an image, this isn't an issue. I didn't do that, and didn't like how putting them in the same gagdet crowded them out. So each of mine are in their own gadget.These can also be moved to the space below your header, if you would rather a navigation bar effect horizontally above your blog posts. If so, you might want to decide that before you design the images. Pages linked in a sidebar tend to look different than the ones you'd design for a navigation bar under the header.
Favicon
Upload your small square image in the designated favicon box. You'll likely have to clear your computer's history/cookies in order to see this updated on your blog.
Blogger Template
For additional changes to the look of your blog, go to Template and go through the various fonts for headers and such. Remember to not go overboard with fonts, and try to keep them limited and consistent. Also, it's fine to choose the fun scribbly, or scripty fonts for your titles and headers. But it's best to choose a regular, readable font for your posts. Also, avoid white text on a dark background. Most people agree their heads start hurting if they read too much text this way--and we're trying to make our blogs reader-friendly :)
Hello, New Look
There it is, the final design with all pieces personalized. Sure, it's not as exquisite as my favorite professional designs. But I think it's better than the average Blogger template, don't you? That's how easy it is to design your own blog. It's confusing at first and time-consuming. You'll get the hang of it. And remember to reference your inspiration often, especially when you're feeling lost.
Creating Your Brand
This is probably a good time to point out that your blog design should also mesh well with your posts. Sure, not all of your posts and post images will perfectly match your design. But one reason I could never have an uber girly design like the one I created for this series is because all of the images I edit and the word art I create and the posts I write reflect my style which shows better in the design above. (Although it's still a work-in-progress.) Be true to who you are, and your "brand" will naturally emerge.Final Beginner Blog Designing Tip
When you first start, "playing around" takes forever. Maybe it has something to do with my not being a designer. As much as possible, break the tasks down a bit. Each of these things can be created and uploaded quickly and easily if you already know exactly what you want and how to do it. (I made this design in an afternoon while writing and creating photos for this series.)
If you're just starting to learn, or don't know exactly how to get the look you love, it's going to take a bit of trial and error. Work on one design element at a time, and leave the image open in PicMonkey while you upload it to your blog to make sure it looks right. If it's not the right size, or something doesn't look how you want, then adjust accordingly, re-save and reload on the blog. Continue this process until you're happy with the design.
These steps are just enough to get you started. Once you get the hang of the process, you'll realize there are all sorts of possibilities for designing and personalizing your site. If you're just starting out, offer yourself lots of grace in the process. It's okay to mix things up until you get it right.
If you've been around Beginner Beans for long, you'll know I believe being a beginner means permission to make lots of changes! And, if after trying it out, you decide doing it yourself is not for you--no judgement if you buy one of the adorable and affordable designs on Etsy ;)
Happy blog designing!
>>>>>
Posts for the Beginner Blogger
Beginner Blog Design part 1 | part 2Encouragement for Beginner Bloggers
PicMonkey Tutorials
Dear Beginner Blogger
Following Our God-Given Purpose with Passion
*Note: PicMonkey affiliate links used in this post. That means any purchases made through these links earns me a small commission at no extra cost to you. Thank you for your support.
