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.

Social Saturday 6/7/14

Now Until July 1st- Chelsea Photographie is offering 1-hour blogger photography sessions in Iowa for only $30. Contact her here!

June 6th- A Memory of Us, Eeny Meeny Miny MOrgan, and The Gold-Hatted Lover are working with Francesca's to host a giveaway from 6/6 to 6/19. The winner will receive a $50 gift card to Francesca's!

June 5th- Chicago Boutiques @ Night 7-9:30pm for an exciting night filled with local fashion, local food and tons of fun! RSVP at http://locallux.webflow.com/events

June 14th- Blogger Bazaar Milwaukee from 3-8pm at Evolution Gastro Pong. Find more info here!

June 16th- #RealBloggerBeauty project launch. Find more info here.

 June 17th- Madison, WI Blogger Happy Hour at Gray's Tied House from 5:30-8pm hosted by Laura of Beauty & The Beard and Danielle of Thyme is Honey

June 29th-Iowa Blogger Coffee Date from 10am-Noon at Smokey Row (RSVP: Katelyn at KatalinaGirlBlog@gmail.com)

February 22nd- Go Blog Social - GBS "Workshop"! This event will take place February 22, 2015 at River Market Event Place! Save the date and stay tuned for more details.

Have an event you'd like us to share? Email us with the subject Social Saturday. 

FRIDAY FAVORITES LINK UP, V.14

Happy Friday everyone! It’s Angela here from Tulips & Rain. The MB Friday Favorites Linkup is one of my favorite happenings in the blogosphere, so I’m super excited to be co-hosting today! Here’s a few of my faves from the past week. And remember, if you have a great link for next Friday, send it to the girls at MidwestStyleBloggers@gmail.com with the subject line "Friday Link Up" for a chance to be featured. 

1.     I love Marilyn and Kaleb’s beautiful photos of spring’s most popular (and my personal favorite) flower—peonies!

2.     The pops of red and nautical theme in Amanda’s living room are seriously enviable.

3.     These adorable Frozen S’more Cups from Chelsea over at Whatcha Makin’ Now would be delish on hot summer days.

4.     Libby’s neutrals and stripes make the perfect casual summer #OOTD. And I’m loving her pop-of-color cross body.

Don't forget to share your favorite post of the week below!

Interested in hosting a Friday Favorites link up with us? Email us at midweststylebloggers@gmail.com!

MKE Blogger Bazaar

Blogger Bazaar Milwaukee 

What: Blogger Bazaar Milwaukee, a newly created fashion extravaganza from Bloggers for their readers
and any other fashion ­forward individual
Where: Evolution Gastro Pong (formerly SPiN), 233 East Chicago Street, Milwaukee, Wisconsin 53202
When: June 14th, 3­8pm

1. What is the concept of Blogger Bazaar Milwaukee?
Midwestern Bloggers will sell their stylish, new and second­hand clothes, such as shoes and accessories direct from their closets.

2. What inspired you to create the event/ Why did you want to create the event?
Volunteering for a couple local people in the fashion field last summer made me realize that Milwaukee's fashion scene is still underestimated by other cities, especially from nearby Chicago. I create this event to celebrate our growing fashion scene and to raise awareness of bloggers and businesses in the Milwaukee, Madison, and Chicago areas.

3. What are you hoping everyone will get from the event?
I am hoping that everyone will enjoy themselves, network, make new connections and of course snatch some great items from our bloggers! We will have a variety of fun specials planned such as a braid bar by our hair stylists, tips and tricks on how to master your Make Up, great Giveaways and some delicious (gluten­free!) treats.
Use #mkeblogbazaar to take part in the fun at Twitter and Facebook and share pictures from the photo booth after!

4. What bloggers are showing pieces from their closets and will you be as well?
We will have nine bloggers showing their pieces: Katelyn Now (Milwaukee), Charmingly Styled (Chicago), Being Zhenya (Minneapolis), La Petite Fashionista (Madison), Chitownfashionista (Chicago), Fänny Müller (Milwaukee), Look sharp, Sconnie (Madison), Kinks are the new Pink (Chicago), Willfully Elegant (Milwaukee). I am still thinking whether to sell or not. Since I am the main person I want to make sure everything runs smoothly and everyone is having a great time and that might be hard behind a table, selling my clothes.

5. What are you most excited for?
After months of hard work and dedication it will be the best thing to see everything come together as one. Juggling my full time job and planning the Bazaar at the same time has been difficult sometime but seeing and hearing people get excited for this makes it all so worth it.

A little more information about Liv: Blog title: Love Always, Liv

Location: Milwaukee
My style is: (give a brief description) I am definitely a person that dresses how I feel. I love chic, unique and sophisticated looks but also enjoy a day in my Nike's, shorts and a simple T­Shirt. I love trying new trends and experiment whether it looks good on me or not.

#RealBloggerBeauty

Happy Wednesday friends! We hope you're short week is off to a fabulous start. 

We're excited to share a project co-founder Maya of Charmingly Styled is working on, and hope that you'll join the mini-movement as well. 

As bloggers, we all know the pressure we put on ourselves to make our life and blog full of "Instagram/Pinterest-worthy" moments. As we all struggle with the strive for perfection, the constant desire to compare, and the need to constantly be better, we tend to put a lot of unrealistic pressure and expectations on ourselves. On June 16th, we're hoping to share some blogging realness to show one another that we're not all perfect, and that our struggles as bloggers and people is an important part of our stories. Interested in joining the party? Here's a few easy peasy steps to get in on the realness:

1) Share out a personal story on 6/16 about a struggle or issue you're personally passionate about. Take a moment from your normal blogging routine to show your readers a side of yourself you may not always feel comfortable putting out there for the world to see!

2) Link up over at www.charminglystyled.com so we can all read each other's stories!

3) Read, share, and send love to each other to keep the support going strong. Who doesn't love a little love note, or a supportive comment now and then?

In the meantime, we'd love to make this even bigger - so feel free to share on your own blogs or social channels using #RealBloggerBeauty. 

Thanks to everyone for your support so far, and feel free to email Maya at charminglystyled@gmail.com with any questions! We can't wait to read your stories on June 16th!

How to Add Hovering Social Media Icons (with HTML/CSS)

Adding social media icons to your blog is important for a few different reasons. First, connect your site to other platforms helps with your SEO. Secondly, it provides your readers with easy access to follow you on the various social media platforms. More importantly, adding this feature to your site is quite simple to do, as you will not be interfering with the actual code of your site. 

Today, I'm going to show you how to add social media icons change color when you hover over them. This feature is particularly important as social media icons function like buttons on your site. You want them to have some sort of interactive component, so your user knows they can click on them.

First, you will need to gather two sets of social media icons that you want to use. I have created my own social media icons, but there's plenty of sites where you can download free versions. For this example, I've grabbed a pink and a purple version of the facebook icon. 

Once you grab all of your icons, make sure they are sized correctly. You can do these using "Preview" on Macs. I recommend social media icons to be about 30-45 pixels, but this depends on how many icons you have and the layout.

You need to upload the images to your site. For Blogger and WordPress, this is a bit different. 

For WordPress, just go to "Media" < "Add New". Once you've added each image, select "Edit". On the right hand side, you will see "File URL". Copy this link and place it in a text-editor for each image.

For Blogger, open a new post, and add the images. Then select view "HTML" of just the images. You will see code that looks like the following:

The location of the link you want is highlighted in red. 

Once you have copied all the links. You are going to prep you code. You are going to take the following snippet:

<a href="SOCIAL MEDIA LINK" ><img onmouseover="this.src='HOVER IMAGE'" onmouseout="this.src='REGULAR IMAGE'" src="REGULAR IMAGE" /></a>

For Red Social Media Link, enter the URL of your social media profile. For this example, I've used: http://www.facebook.com/MidwestBloggerNetwork.

For the HOVER IMAGE, you are going to place the link of the file. I wanted to show pink on the hover.

For the REGULAR IMAGE, you are going to place the link of the file. You need to insert this twice.

Above shows my final result. When inserting images, please be very conscious of the "" and the '', you don't want to delete those, if you do, the effect will not take place. 

Also, most people want to direct people to their social media profiles, but they don't want to lose them from the site. If you add, target="_blank" after your social media profile link, the link will open in a new window. See below:

Most people prefer their social media icons to be centered within the widget. In order to do this, you can add a <center> tag above your code, and make sure to close it below with </center>.

For each social media profile, you need to repeat. Once you have all of your code together, you are going to insert it to an HTML/Javascript widget in HTML. For Blogger, go to your blog, "Layout", "Add a Gadget". Select HTML/Text. Copy and paste your code into the site. Make sure to save! Then, view your site. Your logos should now hover. If  you have any issue, make sure you are checking the quotations around your links!

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.

Behind the blog: Melanie of Melanie Makes

1) When & why did you start blogging?

I originally started blogging as my husband was interviewing for residency positions to document the process.  It continued to be a way to document our family until last year when I bought my own domain name and truly figured out what I wanted my space to become.

2) What’s the greatest thing that’s come out of blogging?

This March, I was named one of the Top 5 Everyday Food Bloggers by Better Homes and Gardens magazine - definitely a jaw dropping moment!

3) When you’re not blogging, what can you be found doing?

I take care of nine living things in our home each day - me, my husband, our two daughters, our son, a dog, two cats and a turtle.  WHEW!  Basically each day I'm caring for them and making sure everyone is where they need to be.  Blogging is definitely my "me" time.

4) What’s your “can’t live without” piece in your closet, kitchen,  home etc?

In my kitchen, it's my OXO Medium Cookie Scoop.  I use that gadget for everything!  Filling pasta shells, making muffins, and of course, making cookies!  My attention to detail self loves that all of my baked goods are uniform in size thanks to that scoop!

5) On a Friday night, what can you be found doing? 

Friday night has become family movie night at our house.  I'm in charge of picking the movie and then it's all about popcorn and treats for dinner.  The best way to start the weekend!

6) What’s your favorite “little thing” in life?

Right now, it's going on a walk with my family.  I have the dog in one hand and the handle of a wagon in the other carrying my son.  My two daughters are riding their bikes or walking along splashing in puddles.  We must look like a parade going down the sidewalk but it always works to refresh my batteries and enjoy some time unplugged together!