Techie Tuesday: Improve Your Images with Three Free Resources

You don’t know what you have. 

This phrase is usually mentioned in regards to someone being ungrateful. However, from working with bloggers, I’ve discovered that most bloggers aren’t using all the tools they can, and opting to pay for tools they necessarily don’t need. Today, I wanted to share some of my favorite free resources for photo composition and editing.

One of the most common questions I get from bloggers is, “should I buy photoshop”? My answer is no in most cases. The only real exception would be if you have a photography blog.

Product Collages - Canva: Bloggers can spend a lot of time finding the perfect images and products for collages. Canva is great because you can include any images/products that you want. It also provides some built in templates and graphics that you can customize. Any graphics or illustrations that you want to arrange for your blog, social media profiles, or promotions, you can definitely do in Canva.

Photo Editing - iPhoto: You can only do so much with a photograph if it was taken on a bad camera. I suggest that people opt to purchase a good camera and lens, instead of Photoshop. By using a high-quality camera, you will have to do less photo editing. With iPhoto, you can crop and resize images quite easily, adjust the photo filters and lighting (with moderation). iPhoto allows you to bulk-export images to the sizes and specs you need (tutorial I wrote for on White Oak). You can read more iPhoto tutorials here.

Photo Collages - Picasa: Picasa is through Google. It allows you to organize, store, and edit your photos. It is not as smooth as iPhoto, but it works very well to put together photo collages - i.e. two vertical photos together, etc. If photo editing and collages are not that intuitive to you, I would recommend going through the tutorials that each piece of software provides. You can also view youtube videos online.

If you have specific questions about any of these products or a question for “Techie Tuesday”, either leave a comment below or you can write me at hello (a) whiteoakcreative (dot) com.

Techie Tuesday: WordPress Categories

Today’s question is from Hillary of Style in a Small Town: I use WordPress and am starting to develop several different categories of blog posts. I'd like to have a "Styled" page just for my outfit posts and a "Beauty" page, for my beauty posts, etc. How do I do this? I've seen where other bloggers have those pages to click on and at the top of the page is says something about "these posts are labeled x". Can you help me with this?! 

In order to have pages dedicated just to certain types of post, you need to make sure you are categorizing them accordingly. In WordPress, you can assign keywords to posts using both Categories and Tags. I recommend that bloggers use categories for series and larger ideas, and use tag for post specific content. You should have no more than 30 categories. For my White Oak Creative website, I have four categories - Client Work, Font Friday, Tutorials, and Company Updates. Just because I say you should have no more than 30 categories means that you should have a ton. Categories should be focused on the content you regularly post.

Here’s two examples:

• Fashion Blogger - Jennie Wold - features outfits and styling tips. 
• Categories (6): Spring, Summer, Fall, Winter, Styling Tips, and Personal* 
• Tags (unlimited): Brands and trends she featured in those specific posts, i.e. “midi-skirt, Asos, etc). 
•  Food Blogger - Cookin Cowgirl - features recipes and diy food projects 
• Categories: Separated by meal component as well as holidays (over 30) i.e. See Recipe Box and Other 
• Tags (unlimited): related to the ingredients incorporated i.e. corn, flour, brown sugar, etc.    

Often when I do a redesign, clients go through their content and clean it up. This isn’t ideal. If you are producing deliberate, purposeful content, you should have a clear idea of your entire site’s organization. Whether or not getting a redesign, I suggest going through your posts and cleaning up your tags and categories. If your categories are in pretty bleak shape (assess this by going to ALL POSTS < CATEGORIES in your site’s DASHBOARD), create an outline of your post content.

When creating categories, you want to make sure you have at least 5 posts per category. The only exception is new bloggers or new series that you are starting. I’ve had clients create a category outline to realize that only 1 or 2 posts would fall into those categories. Then, it’s truly not a category. Also remember, you can always add categories.

After you've created your category outline, you can delete any categories you are not going to use. To do this go into your site’s CATEGORY PAGE. Delete categories you are not going to use (this will just delete the label from the post). If you are adding any categories. Add them here.

Once you’ve got all your categories listed, view ALL POSTS in your DASHBOARD. Hover over the post you would like to edit and select “QUICK EDIT”. Check the CATEGORIES you would like to assign to the post and add in the tags you would like to add (separate with a comma). Check UPDATE and repeat for all posts.

After all your posts have been properly categorized go to APPEARANCE < MENUS. In the left toggle of the page you will see an area with “Pages, Links, Categories” toggle. Select CATEGORIES. Select the categories you would like to add to the MENU. Then drag and drop them to where you would like to see them in the menu. When finished, press “SAVE MENU” to save changes.

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay HumesofWhite Oak Creative. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at hello@whiteoakcreative.com, and she will answer them in her weekly series.

Adding Mailchimp Signup to Your Blog!

Today's question comes from Maya McDonald of Charmingly Styled.

"How do I setup a Mailchimp form to my blog?"

There's several different ways to add a Mailchimp signup for to your blog. To do a pop window or include a signup form within your widget or footer and do it well requires a significant amount of code and css knowledge. Most third-party plugins, even the MailChimp plugin, often don't fit with the overall look and feel of the site. This option is the simplest way to add it to your site.

To setup mailchimp to your blog, you will need the following:
1. Mailchimp Account
2. Header Image
3. Knowledge of the fonts and colors used on your site (you can view last week's post for info on how to get this info).

1. Sign on to your mailchimp account. Go to LISTS. Select CREATE LIST on the top right corner of the browser.



2) List details: Your list name, from email, and from name are all visible to someone who signs up. For Maya's example, we used the following:

List Name: Charmingly Styled Monthly Newsletter
From Email: Charminglystyled@gmail.com
From Name: Maya McDonald
Reminder: You signed up for this newsletter at charminglystyled.com

For notifications, select how you would prefer either daily summary or one-by-one. It's all up to personal preference. Once you've entered all the information. Save

3) You will come back to your list dashboard. Select your new list.

4) Select SIGNUP FORMS. You have the option of choosing from three different forms. The easiest and most accessible form to use is the GENERAL FORM.

5) By dragging and dropping and using the DESIGN IT feature, you can customize your sign up form. This is where you enter your header. Customize how you would like your form to look. You can make edits later!

6) Copy the SIGNUP FORM URL

7) Now go to the dashboard of your site, we are going to the link in the newsletter in the navigation of your site!


BLOGGER: In your dashboard, go to LAYOUT.

If you use PAGES WIDGET for your menu bar...

1) Select EDIT in the PAGES widget box.

2) A new window will pop up, select ADD EXTERNAL LINK.

3) Another window will pop up, for page title, put the title you would like the link to have. I used "Charmingly Styled Newsletter". For the link, place the link you copied. Click Saved. The link will now be visible.

If for some reason, your designer used HTML widget area for your menu bar (like Maya's Designer), you will need to follow the same structure of the links. The structure follows this order:

<li><a href='SIGNUP FORM URL'>TITLE OF LINK</a></li>
So I replaced that info wit the URL of the form and the title.
<li><a href='http://eepurl.com/ZRReD'>NEWSLETTER</a></li>

WORDPRESS:
1) In your dashboard, select MENUS under APPEARANCE

2) Select LINKS from the toggle menu. Copy in your MAILCHIMP FORM URL and your Link Text should be how you would like the text displayed on your menu bar. Select Add to Menu.

3) The link will automatically show up on the bottom of your Menu Structure. Drag and drop it to where you would like it to be in your menu. Select SAVE MENU, the link should now be visible.

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at hello@whiteoakcreative.com, and she will answer them in her weekly series.

Techie Tuesday: Developer Tools

I haven't covered this issue yet on Techie Tuesday's, but I've gotten a lot of questions in which this preliminary information is needed, so I thought I would outline it. You can use developer tools to extract information about your site. Today we are going to focus on a very basic and small element of it - finding the colors and fonts used on your site. We will also use it to see how you can test your website on multiple devices within your browser

1. Go to View < Developer < Developer Tools. A window will appear at either the bottom or right side of your browser. This window shows you the code used to run this website.

2. At the top-left corner of this new window, you will see a magnifying class. select it.

3. Now hover over elements of your mouse. As you hover over them, they will highlight. In the Developer Tool Window, you will see "style" information change and update.

4. You can now find out the specific fonts and colors of your site by hover over the elements. In the style dashboard, you will see the same format - "color: #number" or "font-family: "font name"" 


Here's the example - Finding the exact hex color for the pink background of Charmingly Styled's Site - #ffe7ee. See if you can find it on your own! 


 There's a few things I want to note here:
+ This can get very confusing depending on how much you know with code and how your designer developed your site. The element you are highlighting should have the same color and font as you see in CSS window, if not scroll up or down.
+ You will also see elements with lines struck through them. This means that in the CSS stylesheet a subsequent style overruled what is struck out.


 VIEWING BLOG ON MULTIPLE PLATFORMS: This method does not work if you have the responsive functionality disabled from your blogger site. I'm using 312Beauty as an example.

1. Next to the magnify class, you will see a smartphone looking icon. Click it.

2. For "Device" select the device you'd like to view your site on.

3. You can use the swap icon to switch views from horizontal and vertical layout.


 If your site looks messed up on a mobile version (i.e. cell phones), check it with your phone. If it is messed up on  your phone, in most cases, you can assume it is messed up on a majority of smart phones. To fix it, you have a few quick (and free options), by enabling Blogger or WordPress versions or use a third-party plugin to make it responsive. I believe that these are short terms solutions. With these solutions, one loses his/her individual branding of the site, and it is not the most curated experience. As more and more blog readers are coming from mobile, this might be a big reason you want to address. 

 Firefox has a similar developer tool, but Safari does not.


To read more about developer tools, I recommend these links: Developer Tools Tutorial from Google Chrome // Youtube Video for the Visual/Experiential Learners // HTML5 Rocks


Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at hello@whiteoakcreative.com, and she will answer them in her weekly series.

Techie Tuesday: Setting Your Gravatar

Today's question comes from Christina Solomon of Chritiques, "How do I upload a gravatar image to my wordpress profile?"

Before I begin, I want to note two things. One, this is not as intuitive as one would think; and two, even though most blog sites have trended to using DISQUS for comment management, there are still a good portion of WordPress blogs that don't.

Even if you don't have a wordpress blog, you can have a WordPress username which I would recommend. If you setup a wordpress username with a profile picture, whenever you leave a comment on a wordpress blog, your profile picture will be visible.

To sign up for a WordPress username, simply complete this form.

Also, I should note that the Gravatar is the little profile picture - it is seen at the top right of your dashboard, on any comments you leave and on your subscribe emails. I've included a few examples from Megan Jedlinski's blog Stylish & Scatterbrained.

 An example from the comments. 

 Example of the Dashboard

Example from emails people receive when they subscribe to get posts in their email.

1. Register your wordpress account with Gravatar: https://en.gravatar.com. You want to make sure that the email that is associated with your blog is listed with Gravatar.

2. After you've registered your account and added a picture, you need to make sure that your own blog is listed under "my websites". To do this, you need to go to the Gravatar Dashboard and select websites. If your website is not there, add it. Within 10-15 minutes, your picture should be showing up.

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at hello@whiteoakcreative.com, and she will answer them in her weekly series.

Techie Tuesday: Centering Third-Party Media Ads

Today’s question comes for Audrey of Audrey Salutes, “how do I center my third-party media ads in my widget?”  

Third-party media ads are ads you would use from Rewardstyle, Glam or Blogher. Most bloggers express a lot of frustration when trying to set them up. Ads. Often, everything in the sidebar will be centered besides it.

First, you want to make sure you’ve selected an ad that fits your widget sidebar. Most sidebars fit ads that are 300x200px or 160x60px. Pixel height of your ad doesn’t matter as much as width. You don’t want to put an ad that is wider than your sidebar. I should note: if your blog is not built responsively to images and videos, you are going to have a bad time, especially for mobile and tablet versions. You are making these edits in the following areas. If you have WordPress, Appearances < Widgets  (see image below for reference). If you have blogger, in the html/javascript gadgets of Layout in the dashboard.

Most bloggers try to use this method to center their ad:
<center>
AD CODE
</center> 

While it is accurate, it is not the best practice. Your ad is interactive and functioning feature. It needs to be placed in a <div>. This option works most of the time:
<div style="text-align: center;">
AD CODE
</div>

Occasionally, ads can be extremely strange and center some of the time. One way to prevent is this is to assign a "display:block" to your <div>. Thus, you would have:
<div style="display: block; text-align: center;">
AD CODE
</div>

What is “display: block”? Without getting too complicated, assigning a block level display to an element (your ad) means that the browser will display line breaks before and after the . The will take up the full-width of the available space, and the elements in it with be now centered. If you want to align your elements left or right, simply replace “center” with either/or.

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at hello@whiteoakcreative.com, and she will answer them in her weekly series.

Techie Tuesdays: The Great Debate - Blogger vs. WordPress

The goal of today’s post is to very simply and very concretely identify the pros and cons of Blogger and WordPress while touching on some "grey" areas. When referring to WordPress for this post, I'm always referring self-hosted, WordPress.org.

BLOGGER PROS

• Free hosting: Only pay for your domain (which you have to do in WordPress)

• Connects to Google Plus, Google Analytics, Gmail, and Google Webmasters extremely easy

• Relatively easy to start writing and creating content

• Simple format with ability for anyone to easy change colors and fonts

• Built-in mobile responsiveness (formatted)*

BLOGGER CONS

• Automatic formatting can be a nightmare: adding images and text often get different html code attached to it depending on how the person is entering information. Gets a little clunky and not straightforward to use.

• Functionality: If you are looking for something more fluid, more website-like, then Blogger can’t provide you with that functionality. It can get close, but it is going to be clunky.

• Built-in mobile responsiveness (formatted)*
  *This is both a positive and negative because its a formulaic responsiveness so that the entire site looks the same.

• Content Ownership**
  You own all your content, the copyrights to your content, and if someone is plagiarizing your content, you can contact Google and they will help you deal with it. However, Google owns the storage unit where your content is stored and according to its terms of service:
  When you upload, submit, store, send or receive content to or through our Services, you give Google (and those we work with) a worldwide license to use, host, store, reproduce, modify, create derivative works (such as those resulting from translations, adaptations or other changes we make so that your content works better with our Services), communicate, publish, publicly perform, publicly display and distribute such content. The rights you grant in this license are for the limited purpose of operating, promoting, and improving our Services, and to develop new ones. This license continues even if you stop using our Services (for example, for a business listing you have added to Google Maps). Some Services may offer you ways to access and remove content that has been provided to that Service. Also, in some of our Services, there are terms or settings that narrow the scope of our use of the content submitted in those Services. Make sure you have the necessary rights to grant us this license for any content that you submit to our Services. - View the Full Google Terms of Service Here

WORDPRESS PROS

• Endless Functionality (relatively): Depends on your designer or template you select

• You own your content!

• Categories and Tags: Blogger only has labels, but WordPress has categories and tags. You can use either (categories are recommended) to set up an elaborate system of viewing your previous content. I really recommend this for food, diy, or fashion bloggers who want to showcase their previous work).

• SEO: With WordPress, you can utilize different plugins as well as have easier access to the back end of your site. The use of h1 tags for supporting content is also very helpful.

• Plugins: Over 30,000 plugins to choose from. Not all of them are good, and actually I would say probably 10-15% are good. But the good ones are fantastic and can really help take your site to the next level.

WORDPRESS CONS

• Cost: With WordPress you have to pay for hosting - approximately $3-$5 dollars a month. I’d recommend Bluehost because I like their custom service. From experience working with my clients, I would definitely recommend against Go Daddy and Host Gator****.

• Customizing: WordPress is not as easy to customize unless you work with a designer or you buy a premade theme. Even purchasing a premade theme can be a process of trial and error.

• Security: WordPress is the largest CMS system in the world, and as a result, it is most prone to hacks and security issues. With a WordPress site, owners should make sure that they have a secure password and follow these other site security steps.

OVERALL THOUGHTSFor a while, I thought that Blogger was perfect for all blogs to start out on - simple, easy, straightforward, great for testing the waters. However, my opinion has changed. If you are a person who struggles to follow through on things that you start, start with Blogger. However, if commitment is not something you are concerned about, then you should definitely look to WordPress Take a month to figure out what you want your blog to be, maybe even work with a designer, but then start on WordPress. For the most part, I think that WordPress blogs give the impression that they are “ahead of the curve”, but it’s all personal preference.

 **Content Ownership: This issue is something that I would love to explore more with people. From what I’ve heard certain larger blog affiliate programs own your content when you join them. With the plethora of people joining them, I don’t think content ownership is an issue then. It’s a personal preference. My belief is that I want to own what I create, and I don’t want to give ownership to a corporation.

***With Hostgator, the price doesn’t match what you get from BlueHost or DreamHost. 


 Do you have a tech or design question you would like answered? “Techie Tuesdays” is a weekly series written by Lindsay Humes of White Oak Creative. In order to make this series beneficial to the Midwest Blogger network, you can email your specific questions to Lindsay at hello@whiteoakcreative.com, and she will answer them in her weekly series.

Techie Tuesdays: WordPress 4.0 "Benny"

Last week, WordPress launched its latest update - WordPress 4.0 - aptly titled "Benny" after American jazz clarinetist and bandleader Benny Goodman. Amongst developers, this update is significantly underwhelming. The expectation was set from WordPress 2.0 to 3.0, that most people expect big things from 4.0. What exists is nothing near a major release, but there are some significant improvements that as bloggers you will notice and probably greatly appreciate.

MEDIA:

When you upload media files and view media files, you can now have a much smoother grid view as well as the more traditional option. This makes previewing much quicker, as well as internal searching.

EMBEDDED CONTENT PREVIEWS:

When you add a youtube URL or Tweet to you post, you will be able to see it in the visual editor. In the past, you had to “preview” the post to see how the video would display. Embedded Content Previews include CollegeHumor, Youtube Playlists and TED, but you can view the full list here: http://codex.wordpress.org/Embeds

WRITING & EDITING IMPROVEMENTS:

In the past, writing and editing content would not fit to your window as you wrote. With WordPress 4.0, they’ve greatly improved this functionality so that it is easier to navigate a post dashboard. They’ve also made it so that the visual editor toolbar stays fixed to that window.

PLUGINS:

WordPress 4.0 comes with improved metrics and visibility of searching for the correct plugin. With over 30,000 free plugins, it can be exhausting finding the one you need. Therefore, this improvement to viewing and selecting plugins is a huge help!

When WordPress updates, often plugins and themes go through updates. You should make sure you complete these updates as well. After you’ve updated your site, test your site in different browsers and devices to make sure everything works as it should.

Do you have a tech or design question you would like answered? “Techie Tuesdays” is a weekly series written by Lindsay Humes of White Oak Creative. In order to make this series beneficial to the Midwest Blogger network, you can email your specific questions to Lindsay at lindsay@whiteoakcreative.com, and she will answer them in her weekly series.

Techie Tuesdays: Site Security

Today, I'm writing about something quite unpleasant, kind of scary, and rarely discussed at blogging meetups or conferences - site security. Your site has a lot of personal information associated with it - birthdate, email, and credit card. All it takes is a first name, last name, and one more piece of information for an experienced hacker to be quite successful. According to Forbes, on average, 30,000 new websites are hacked a day. Your site can be hacked, and you don't even know it. Have no worries, there's plenty you can do to prevent it! 

General

• Get a secure password. I'm not talking about a combination of your childhood nickname with some random numbers, or the first letter is capitalized. If I can pronounce your password, it's not secure. A good password should be a random assortment of numbers and letters. Write it down (not on your computer, but on a piece of paper), so you won't forget it.
• Last Pass. Last Pass will change your life. After reading this post, you will be able to sleep with ease at night knowing everything you have is secure. You create a Last Pass account, with one password that you have to remember (write it down). You can then install Last Pass on your browser and mobile devices, and you can add your login info of various sites. The best feature is that Last Pass will generate random, secure passwords for you and keep track of them. 
• Don't share your password. Create users. Often when I'm working with new clients, they will be say, "I can just share my password with you," and in most cases,  I always respond, "Just make me a user." It might take me showing them how to do that, but the benefits are huge. 

Blogger:

• Google is pretty much amazing, but if you aren't using two-way verification you should definitely set it up. Anytime you sign on to your Google Account on a new computer, Google will text you a code that you have to enter to login. So, if someone tries to sign on to your account from an unauthorized computer, you would immediately receive a text message (they wouldn't), and they won't be able to sign on.

WordPress:

WordPress is a tricky beast because it is a free Content Management System (CMS). WordPress sites are often the most hacked sites due to security issues.

• Change your username and display name. If it shows up on your posts, "This post was written by Admin" you are a delicious target. "Admin is the most common username. When installing WordPress, your username should be something random (numbers and letters). You can change your visible name to be your own name, but your username for your site should be private. 
• Hosting. Lately, I've read a lot of different developer bloggers discuss how they adding clauses in their contract not to work with sites that host on Go Daddy. Go Daddy is notoriously awful amongst people in the web community, but for most people, Go Daddy is the most familiar (great advertising campaign). Most hosting contracts allow you to transfer whenever, and I would recommend Bluehost. Not only is their customer service excellent, they have additional free and paid features that help you improve your site security. If purchasing hosting, most bloggers only need the basic, shared hosting version ($3.95-$4.95/a month).
• Updates: You should always make sure that you have the most up-to-date version of WordPress, your theme, and plugins. More often than not, when any of these elements release an update, it is a security update (hackers are always improving, sites need to improve). Just make sure that before you update, you backup your site. 
• Plugins: Plugins are less regulated than themes. If your site has a bug, it's usually a plugin. When I build sites, I always try to build them with the functionality in the theme and rely on few third-party plugins as possible, but there are a few plugins that I recommend:
• Akismet is a comment spam prevention plugin for your blog. It identifies and blocks comment and trackback spam. If this isn't monitored, your site is more likely to get hacked. 
• Jetpack is a plugin-package from WordPress.com. For most bloggers, they can get all the additional functionality they need from this plugin. Essentially, you can get up to 30 plugins with one. Because WordPress.com functions on the contribution of developers, you know that their are always people working to develop and improve it. Some of my favorite features of Jetpack include tiled galleries, the contact form, and Facebook & Twitter widgets.
• Disqus: Most everyone knows what Disqus is, a comment management plugin. You can install it for WordPress or Blogger, and I think it is quite easy to install. Not only does it manage spam comment, it makes it easier for your readers to leave comments via social media or mobile devices. 

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative and The Garden Apt. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at lindsay@wocreative.com and she will answer them in her weekly series.

Techie Tuesday: Before You Work With A Designer

Whether just starting a blog or seasoned blogger, most people reach a point where they feel the need to get a professionally designed site. Today's post is focusing on the beginning stage - what should you (the client) do before reaching out to a designer. When answering all of these questions, I encourage you to do them away from a computer. Also start small. Write a few ideas, words, etc. Then expand into full out sentences and paragraphs. Also, revisit this at several times before you talk to a designer. 

These questions are not about aesthetics or features. More often than not, I find that the most challenging projects come down to bloggers struggling with the core identity of their blog. These questions are here to help! 

1. What is your brand? I encourage you to think past the typical "x-based lifestyle blog" and more into a mission/goal/purpose. 

2. When people visit your site, how do you want them to feel? Use descriptive words. For most clients, I encourage them to describe how they feel when they visit their favorite blogs on a daily basis. Those feelings are often what they want to recreate with their own readers.

3. How do you envision your blog looking and functioning in 3 years? 5 years? This question is key. In 2, 3, or 5 years, do you think you would be interested in the same things you are writing about now. For durability and sustainability, I would encourage bloggers to brand themselves long term.

4. Think seriously about this one, is your brand a blog or is website? If it is a blog, do you envision your site to become a "website" within the next three years? If you are using your blog as a blog, then I encourage you to brand/design it that way. However, if you want your blog to function more like of a website (with a portfolio or other collaboration efforts), then you need to think about what the primary function of your blog is it. Is it daily readership? Getting your foot in the door for brand collaborations? Portfolio of work?

5. Who are your readers? Who is visiting your site? what information are they taking away from it? Blogging is partly about you showcasing a talent or hobby, and part inspiring others. Often people approach site designs/redesigns thinking only about what they like, not about what their readers like. 

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative and The Garden Apt. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at lindsay@wocreative.com and she will answer them in her weekly series.

Techie Tuesday:

Today's question comes from Jessica of 26 & Not Counting, "how do I create categories buttons in blogger?"

Just for a point of reference, these category buttons are found in the widget area of a blog, and often title depending on the blog's genre (i.e. Food, Lifestyle, Fashion, etc). 

Similar to the previous week, to add this functionality to your site, you will only be working in the "Gadget" area of the blogger template. 

Before you begin, there's two things you need to gather: images and links.

1. Before you create your images, you need to find out what the width of your sidebar is. To do this, you will need to have Google Chrome.

+ Go to "View" < "Developer" < "Developer Tools". Developer tools is a resource where you can find out the CSS, HTML, and Javascript specifics about your site! A sidebar should pop up either on the bottom of your browser or on the right. 

+ Click the "Magnifying Glass" on the top left. You will use this tool to highlight the section you want to find more information from.

+ I've decided to highlight the "Search" header in my widget. When I hover over it, a little yellow box pops up that says the width of this area is 250 x 33 pixels. 

+ For the purpose of this tutorial, I'm going to make full-width category images. My images are going to be 250 pixels wide, and 50 pixels tall. 

2. In Illustrator, I created these two images for "techie tuesday" category. The teal version will be the live button, and the red button will be the the hover.

3. Now, you need your link. With blogger, you can create "categories" using labels for your post. If you haven't created labels for any of your posts, you are going to have to go through manually, and update each post. With WordPress, it is very easy to batch edit them.

4. Since I want to make my category button" for my "techie tuesday" post, on my most recent "Techie Tuesday" post, I've selected the label at the bottom of the post. This will link to a separate page with the url: http://midweststylebloggers.blogspot.com/search/label/techie%20tuesdays

**If your site was created by a designer, you might have some issues here. Feel free to email me, and I can help you out.

5. Just like last week, we are going to need to upload our images to get an image URL. In a new post, upload both images. My URLS are the following:

Teal: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3jO4sL_2buorALlr_LE4oeklmG-uGyF4R22ji3MGUmiHymjmDnUS47rZAbZUZXK3cZhWcrkFRacK1LBRAuu4dyKrCghMvEmNZ9h4-4KEs84LDoQEvHpWzc5SCoU8cv2fmaEIdetudiR6q/s1600/tt-teal.png

Red: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhs8bKtw9H4NBdwRyLjM5OavVdGY4HY6Vm1GBJyF5ABcf0kECKk4UyA406UZSDZl41Lu-RopOW8lLJ08D5kjBCq4JGS5OOOwxNlZ_c6M8yefZ9S4lO9tPVM1g5P362SkrHZ0gF1Ms19Bo/s1600/tt-red.png

6. Using the same structure as with the social media icons: 

<a href="LINK TO CATEGORY"><img onmouseover="this.src='HOVER IMAGE LINK'" onmouseout="this.src='LIVE BUTTON'"  src="LIVE BUTTON"/></a>

When I put in my links, it looks like this:

<a href="http://midweststylebloggers.blogspot.com/search/label/techie%20tuesdays"><img onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhs8bKtw9H4NBdwRyLjM5OavVdGY4HY6Vm1GBJyF5ABcf0kECKk4UyA406UZSDZl41Lu-RopOW8lLJ08D5kjBCq4JGS5OOOwxNlZ_c6M8yefZ9S4lO9tPVM1g5P362SkrHZ0gF1Ms19Bo/s1600/tt-red.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3jO4sL_2buorALlr_LE4oeklmG-uGyF4R22ji3MGUmiHymjmDnUS47rZAbZUZXK3cZhWcrkFRacK1LBRAuu4dyKrCghMvEmNZ9h4-4KEs84LDoQEvHpWzc5SCoU8cv2fmaEIdetudiR6q/s1600/tt-teal.png'"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3jO4sL_2buorALlr_LE4oeklmG-uGyF4R22ji3MGUmiHymjmDnUS47rZAbZUZXK3cZhWcrkFRacK1LBRAuu4dyKrCghMvEmNZ9h4-4KEs84LDoQEvHpWzc5SCoU8cv2fmaEIdetudiR6q/s1600/tt-teal.png"/></a>

For the rest of the categories, you would just repeat that same structure. Also, with the social media icons, I used target="_blank" after the link. This makes the link open in a new window. Since the users are just staying on my site, I want them to open the category link in the same browser tab, so I opted not to use target="_blank". It is all about personal preference. 

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative and The Garden Apt. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at lindsay@wocreative.com and she will answer them in her weekly series.

Techie Tuesdays: Widget Hierarchy & Consistency

If you've just started out blogging or haven't had the opportunity to get a customized-designed site, there's a few things you can do to to give your site a professional look and feel; one of them is aligning your widgets and giving them a clear hierarchy. For blogger, you would be making these adjustments in "Layout," and in WordPress, you will be making the adjustments in "Appearances" < "Widgets". 

Organization: 

When people come to your site, the first thing they will see is your header and your most recent post. The sidebar/widget area provides supporting information. What are those two or three pieces of information that you would like your users to see upon first visiting your site? Most bloggers include specific information about them and their blogs brand: profile picture which links to their about page, social sharing icons if they aren't in the navigation bar, subscribing by email, or categories. As users scroll down your site, they can see the archive of recent posts, affiliations, ads, shop-able widgets, etc. With both Blogger and WordPress, you can reorganize your widgets by dragging and dropping in both platforms. 

Alignment:

Once you've defined your widget hierarchy, it is important to consistently align your widgets. Regardless of the size of the widgets, they give a uniform look to your site. You can do this by entering alignment tags before and after the widget content. 

Three types of alignment tags you can use are left, right, and center, but to write them in code. You are going to write them as <div>. 

If I wanted to center all of the content within the widgets of my site, before the content I would enter the following:

<div style="text-align: center"> 

INSERT  WIDGET CONTENT: Links, Images, etc. 

</div>

If you wanted to align left, just change the "center" to "left".

**With some widgets like the search, archive, facebook, and twitter, you can't align these, but you can make sure that they are the full-width of your sidebar. If they are the full-width, it will help with the overall look of your sidebar. 

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative and The Garden Apt. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at lindsay@wocreative.com and she will answer them in her weekly series.

Techie Tuesdays: How to Install a Favicon

“How do you install a favicon?” from Zhenya of Being Zhenya

Regardless of platform, there is a very simple and easy way to install a favicon. A few things to note before you make any changes to your blog.

1. Make sure you back up your posts and your template (you can do both easily in Blogger, but for WordPress you can only back up your posts automatically).
2. If you had your site designed by a designer, then they should have designed a favicon. If it is not working, then you should ask them to fix it. Most designers and developers have clauses in their contract about clients editing the site after the site has been installed. You want to run this by your designer just in case. 

Step 1. Take a square version of your logo (either as a gif, jpeg, or png file) and convert it into a .ico file. I use Favicon-generator.org to convert files for me. Make sure to download the generated favicon.

FOR WORDPRESS

Step 2:  Upload the favicon to your images or media folder. Click the image and copy the URL for the image. 

Step 3: Go to APPEARANCE < EDITOR < HEADER file. Directly underneath the <head> you are going to insert the following: 

<link rel=“shortcut icon” href="IMAGE URL" type="image/x-icon"> 

<link rel=“icon” href="IMAGE URL" type="image/x-icon">

Replace “IMAGE URL” with the URL of your image. Click save, and your favicon should be visible!

**If you are making any changes to your WordPress site, you should be doing it in a child theme. When there is a WordPress or theme update, you will likely lose any changes to the code you make. That being said, if you think the solution is to avoid updating, updating the site is essential to protecting the overall security of your site, and I would strongly recommend against not updating.

FOR BLOGGER

Step 2: Go to LAYOUT < Click “Edit” in the FAVICON box. Upload your image. It might take a few moments, but your favicon should be visible.

If you are having any issues adding a favicon, send me an email, and I can check out your site for you!

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative and The Garden Apt. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at lindsay@wocreative.com and she will answer them in her weekly series.