We’re so excited to launch more classes than ever this February!  From newbie design classes in Photoshop Elements, to advanced PHP coding in WordPress.  Check out the entire list of courses via the catalog.

Next, we also want to announce that we are having a Twitter party TONIGHT using the hashtag #BDNparty.  It will last from about 6pm-8pm Pacific Time (that’s  7-9pm Mountain, 8-10pm Central, 9-11pm Eastern.)  We’ll be talking all about…whatever we want!  Topics will range from designs and designers we just LOVE, blog design how-to’s and tips, what makes great design, and so much more!  You’re welcome to join in, and be sure to follow @the_bdn so you know when the party kicks off!

Last but certainly not least, it’s time to announce the winners of the HUGE giveaway we had this month!  Winners were chosen at random from the number of valid entries.

Font of Choice from MyFonts.com  Katelyn Brooke Designs

20 Credits from iStockphoto.com  DIStherapy

Genesis Theme Framework from Studiopress  Vanessa

$25 Gift Certificate to MyGrafico.com  christine

6 Months of Hosting from BlueHost.com  Jaimie

Complete Blogger to WordPress Transfer  pharmgirl

500 Business Cards from Overnight Prints April

6 Months of Sponsorship at TheBDN.com  Elsa M

2 Full Hours of One-on-One Training  Katie Price

$150 Toward the Purchase of ANY Class Registrations  ModernMuse

Winners will be contact via e-mail within 1 week, or you may claim your prize by e-mailing us directly.  Unclaimed prizes will be given to another winner chosen at random.  Please allow up to 1 week to receive your prize, promotional code, or certificate via e-mail.  If you did not provide a valid e-mail, we will do our best to contact you via social media.

Thank you to everyone who entered for supporting the Blog Designer Network!  We hope to have even more awesome giveaways in the future!

SMITTEN BLOG DESIGNS, LLC is looking for 1-2 part-time WordPress.org designers who can work remotely from home on a project-by-project basis. We have a great team of blog designers and are excited to expand into the world of WordPress! This position is for independent contractor work.

JOB REQUIREMENTS
Technological Skills:

• Extensive knowledge of and experience with the WordPress platform
• Experience in modifying studiopress themes
• Experienced at template installation
• Basic to intermediate knowledge of CSS/HTML
• Ability to interface well with clients through email

Design Skills:

• Good eye for design and experience with graphic design
• Access to and working knowledge of Photoshop, Photoshop elements, or similar program
• Ability to adapt to client styles/requests and make changes as requested by client
• Note: We tend to work with clients looking for modern, sleek, simple, stylish blog designs NOT shabby/scrappy/cutesy designs

JOB DESCRIPTION

• Designers work remotely from home on a project-by-project basis.
• Each project will be sent via email and will include all specifications for blog.
• Designers will work directly with clients during design process.
• Designers will let us know how many projects they are able to take on, but depending on our demand, we may be able to offer more or less than the requested amount.
• Compensation is as follows: 50% of the purchase price for each design completed (Ex: WordPress clients pay $395 for a premium design, designer receives $197.50 of that).

If this sounds like a job you’d enjoy, please email us at smittenblogdesigns@gmail.com with the following:

Resume
Any samples of design work you may have done. ((Please send samples (anything!) in order to be considered!))

We are excited to expand our group of designers and look forward to hearing from you!

Kate & Heather
Smitten Blog Designs, LLC
www.smittenblogdesigns.com

We’re very excited to offer this new class on Wednesday evening.  Both designers and bloggers will benefit from this course on making social media both beautiful and functional. Whether you use social media often, use one more than others, or are a total newbie – this course includes everything you need, and you can attend right from your computer at home!  Begins Wednesday, January 18th at 5:30pm MT (Mountain Time) and lasts until 7:30pm.  Read below for details, or register here.

Instructor:  April Durham

Bio:  As a blog and website designer, April has not only created social media graphics for many clients, but has also grown her social media presence in the process.  With over 4,300 Twitter followers, 2,200 Facebook likes, and 807 Pinterest followers, April has built a community around her business and can help you to do the same.  You can follow her @aprildurham on Twitter and Pinterest.

This class includes:

• A video copy of the course to keep and watch. (Viewable on Mac and PC.)
• Over 5 templates to download and use to create your own images.
• A comprehensive e-Book of detailed notes.

Here are some of the things the course will cover:

• Creating graphics
  • Best formats and dimensions for each platform
  • Social Icons for your site
  • Facebook Cover Photos *NEW*
  • Facebook Profile Images
  • Facebook Landing Pages
  • Twitter Backgrounds
  • Twitter Avatars
  • Pin-worthy graphics
• Building a targeted fan-base
• Using social media management tools to simplify managing many sites
• Incorporating social media into your blog or website
• Tips and techniques for Facebook and Twitter updates.

PLUS
Using the *NEW* Pinterest to your advantage (without spamming your loyal followers!)
and more!

Other courses April teaches this month:
The Blog Designer Workshop
Adobe Photoshop (Intermediate/Advanced)

Courses by other teachers this month:
Creating Genesis Child Themes by Lynne of Visual Serendipity
Blogging on WordPress.org (for Beginners) by Jessica of The Frilly Coconut
Blog Header in Adobe Photoshop Elements by Jessica of The Frilly Coconut

Register Here (Price: $65)

Have questions? Send inquires to info (at) thebdn (dot) com or use our “Contact” page!

We are starting the year off right with an incredible giveaway you won’t want to miss!  From designers to bloggers – there is something here for everyone!  This giveaway runs through January 23rd, and there are only two requirements to enter!

1.  Share TheBDN.com!

Use the social icons below this post to share this giveaway on the provided sites.  You may share as many times as you wish and each one counts as an entry!

2.  Post a Comment!

After sharing this giveaway, post a comment telling us you did so!  Include a link to your social site or screenshot of your share.

Want more entries?

1.  Post in the forum!  Have a question?  Have the answers?  Rant? Rave?  Post in the forum and get an entry EVERY time you do so!  (No need to come back and comment!)

Prizes

1.  Font of Choice from MyFonts.com:  With thousands of fonts to choose from, finally get that one you’ve been wanting!  Up to a $50 value!

2.  20 Credits from iStockphoto.com:  From high quality illustrations and photographs, to cute backgrounds and patterns – we love the large selection you’ll find here.

3.  Genesis Theme Framework from Studiopress:  Our website is build on this framework, and we highly recommend it to designers and even bloggers for it’s ease of use, support, and customization options. (Or child theme of choice if you already own Genesis!)

4.  $25 Gift Certificate to MyGrafico:  Inexpensive and high quality backgrounds, patterns, and much more that you can use to build blogs and websites!

5.  6 Months of Hosting from BlueHost:  For excellent service and an easy set up, this hosting provider is an excellent resource for both current, and startup websites and blogs.

6.  Complete Blogger to WordPress Transfer:  Ready to make the switch?  The Blog Designer Network can transfer your Blogger content to a new self-hosted WordPress site!  Includes set-up of new WordPress site, transfer of posts, comments, readers, and domain re-direciton.  (Does not include hosting or domain name fees.)  A $125 Value.

7.  500 Business Cards from OvernightPrints.com:  With such speedy service, it’s pretty amazing that this company can provide such high quality prints!  Design your own, or hire one of our amazing designers (to the left, or under the designer directory) to make one for you!  Redeemable any time in 2012.

8.  6 Months of Sponsorship at TheBDN.com:  Let us help promote your business or blog with an ad on our sidebar!  We’ll even design the ad for you!  A $150 value.

9.  2 Full Hours of One-on-One Training:  Customize a training session that specifically targets the areas in which you’d like to improve!  From coding blogs and websites, to design – let us train you in the areas of your choice!  Redeemable any time in 2012 scheduled two weeks in advance.

10.  $150 Towards the Purchase of ANY Class Registrations:  Expand your knowledge with the various workshops we offer!  February and March classes will be posted soon, and will include an even larger variety of courses for every skill level.

Winners will be announced on Tuesday morning, January 24th.  Unlimited entries allowed per person provided the requirements are met.  Your comment must include a link to your social share or screenshot so we can see your share!  If for some reason your comment is not approved, we will e-mail you!  Shares on social sites that a) have no followers, b) are solely meant for giveaways, or c) are not listed in this blog post won’t count.  Forum posts must a) be a legitimate thread or b) legitimate reply to a thread.  You will be notified via e-mail if your forum post does not meet the criteria.

There will be 10 winners total, one for each prize!  Winnings ARE transferable!

All winnings are provided by the Blog Designer Network and are not sponsored by individual companies.  Some of the links within this post are affiliate links, and will generate a small commission for the BDN which we use for giveaways like this one!  We recommend each one of these companies based on their quality of service and products.  Thanks for your support!

If you’ve been curious about design and taking the plunge into starting your own business, this week begins the next installment of the Blog Designer Workshop.  Click here for more information and to register.  This workshop is great for both intermediate and novice designers and coders, and covers Blogger coding, WordPress coding, and design in the software of your choice.  

As the New Year approaches and we begin setting goals, our blogs and websites should be part of our plans!  So here are some tips to better your blogs for 2012!

1.  Try New Fonts

Since Google has released almost 400 fonts free for use on your blog or website, a simple switch to trendy new fonts can help liven up your site.  We all know the tried and true staples that became increasingly popular in the last few years…Century Gothic, Arial, Trebuchet for paragraphs, and  a funky handwriting font for headings.  This year it’s all about the mix of simple serif fonts with modern sans-serif fonts.  Tall and narrow is replacing short and fat.  Serif fonts are no longer “outdated” and slab serif fonts are even better.  Instead of illegible handwriting fonts, try a clean and upright scripted or calligraphic font.  Read our post on how to implement these fonts, and choose what’s best for your blog!

2.  Simplify

Lately design preferences are leaning towards crisp, clean, compact designs with lots of great color combinations and subtle patterns.  Instead of huge prints and scrapbook-style designs, or large headers with cluttered graphics – try to liven up your site by taking away some items instead of adding them.  Make your header smaller and remove unnecessary graphics.  Make your background a small repeatable pattern in order to both save on load time, and focus attention to your content.

3.  Make a Schedule

Decide how many posts you can reasonably write in a week, and stick to it!  If you’re in a writing groove one week, write more posts than usual and schedule them for next week.  Consistency is key in retaining and gaining new blog readers!

Use the WP Editorial Calendar Plugin to Easily Schedule Posts

4.  Make it Accessible

Almost every page on your site should be easily accessible from the home page.  Rather than having users click through to one page, then another…then another – consolidate your pages and posts, and outline your menu bar, sidebars, and footer to give visitors gateways to all your information.

5.  Start Something New

If making improvements and changing up your blog isn’t quite satisfying your need for change, start up a NEW blog!  A good practice in any industry is making sure you’re not spreading yourself too thin, or creating too much work to handle.  However, if your interests have changed or your previous blog or website’s content is starting to be lackluster or even going in a different direction – you (and your start-up) could benefit from a whole new concept.

6.  Hire it Out

We would ALL love to hire people to do the things we just hate to do! (Dishes, washing the car, taxes, website coding…)  Even though we attempt to do it all ourselves in an effort to save money, hiring people to do some things FOR you can actually save you money and time.  This doesn’t just apply to hiring someone to help you with your blog, but perhaps you can pay a babysitter/maid service to clean your house for 2 hours per week in order to work on your blog yourself and have some “alone” time.  Maybe the entire idea of creating an online business was meant to give you more time with family.  In that case, hire a blog or website designer to do it more quickly and efficiently than you’re able to.  The key to hiring someone is to choose a person that is good at what they do, so you can be good at what YOU do.

If you are a blog or website designer, check out our list of services offered for designers.

If you are a blogger, check out our list of blog designers.

7.  Learn It

In this case “it” refers to whatever you truly wish to learn.  Whether it is how to improve your writing, or how to design your own blog – pick one thing to research and learn until you’re comfortable and confident.  Invest your time, and money if necessary.  No, not until you’re perfect.  Not until you’re the best.  Just until you know it well enough to be confident in your skills.  With persistence, it will happen in a shorter time than you think.

We offer a wide range of classes you can take from your computer in a live setting that allows you to listen and view as the instructor teaches.  You can see a full calendar of classes, or view the catalog!

8.  Don’t Wait

Many of us like to wait.  Wait until we are ready, wait until the New Year, wait for spring, wait until next month, wait until it’s just right, wait until Monday…  Being afraid to do something, launch something, change something, or learn something doesn’t need to wait.  Force yourself to start NOW and not only will time be on your side, but the imminence of being in the middle of your project will force you to push yourself to complete the task.  Better your blog, better your website, and better yourself….and start now!

We are right in the middle of a fancy re-design and getting ready to announce who the new instructors will be for the New Year!  Come take a look at the new logo, and pop back in each day this week to see the updates. We are also celebrating the holidays by offering a 25% discount off ALL courses when you register this week only. Just use the code CHRISTMAS at checkout.  Courses below are scheduled in January, and a video copy is provided if you’re unable to make the live session. Please don’t hesitate to contact us if you have any questions about the courses. Just use our contact link above!

25% off code: CHRISTMAS

It’s easy to implement custom fonts onto your blog or website!  This tutorial is for both Blogger and WordPress, and will teach you how to choose a custom font for various areas of your site using the free Google Web Font repository.  For a larger selection, you can also try a Typekit membership.  You can choose fonts for your headings (like your post titles), and a font for your paragraphs (your posts and sidebar items.)  You may have more than two fonts – but to decrease the load time of your page, it’s best to have as few as possible.

Click “Add to Collection” when you’re on the page of the font you want to use, and when you’re done click “Use” at the bottom of the page.

Where it says “Add this code to your website”, highlight and copy the specified code.

The second red arrow is the pointing to code that you will add to your CSS.  (Scroll down for instructions on where to paste this.)

Instructions for Each Platform:

Blogger:  Add the first snippet of code right after the opening <head> tag in your “Edit HTML” section.  Be sure to put a backslash before the closing angle bracket.

<link href=’http://fonts.googleapis.com/css?family=Quicksand:400,700′ rel=’stylesheet’ type=’text/css’/>

WordPress: Install the Google Web Fonts Plugin for WordPress.  Or if you know where to find the <head> of your document, paste the code in that section. (Varies per theme.)  For the Genesis Theme Framework, go to “Theme Settings” and scroll down to the wp_head() section to paste the code in the box.  Or paste the @import line of code in the beginning of your CSS.

Now add the second snippet of code into your stylesheet under the headings and sections you would like to take on your chosen fonts.  This varies per template, but headings are generally identified with h1 – h6 classes.  For example, on this template we would add the CSS under this section:

#content h2 a, #content h2 a:visited {

Many designers use various techniques for linking images on a website, and making those images change upon hover. From image maps, to slicing each image individually – the page load time and usability of these techniques aren’t as optimal as using CSS image sprites.  Here is a quick way to create a functional and user-friendly set of links that load much more quickly!

As an example, we will create links and a hover effect for this set of social icons.

Notice the above is a SINGLE image, rather than three separate images.  You may choose to link these at this point, and not have them change when visitors hover.  However, good blog and web design principles tell us that it’s always a good idea to have links of any sort change upon hover.  This tells your readers that there is something of interest behind the link, and that they should “click” it!

So create your “hover” images and place them under your default images like this.  Note that this single image is taking the place of six potential images, thereby reducing server requests and saving bandwidth.

Here is the code we will use for this effect.  (You can see a preview of the result in our header!)  Copy and paste this into a helpful visual editor like the one at W3 Schools or Dreamweaver so you can see the results as you make changes.

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">
#social{position:relative;}
#social li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#social li, #social a{height:58px;display:block;}

#facebook {left:0px;width:65px;}
#facebook {background:url('YOUR IMAGE URL HERE') 0 0px;}
#facebook a:hover {background: url('YOUR IMAGE URL HERE') 0px -63px;}

#twitter{left:65px;width:65px;}
#twitter{background:url('YOUR IMAGE URL HERE') -65px 0;}
#twitter a:hover{background: url('YOUR IMAGE URL HERE') -65px -63px;}

#rss{left: 130px;width:65px;}
#rss{background:url('YOUR IMAGE URL HERE') -130px 0;}
#rss a:hover{background: url('YOUR IMAGE URL HERE') -130px -63px;}

</style>

<ul id="social">
  <li id="facebook"><a href="YOUR LINK HERE"></a></li>
  <li id="twitter"><a href="YOUR LINK HERE"></a></li>
  <li id="rss"><a href="YOUR LINK HERE"></a></li>
</ul>

</!doctype>

Step 1: Use your own images.

First, replace the image links with your own image URLs.  You can use your own server, or a place like Photobucket.com to get image URLs.

Step 2:  Size and position your “display windows.”

Change the height in the first section to accommodate your images.  Note the values left and width in each section.  Change the width in each section to accommodate each individual icon.  (Ours are about 58px high and 65px wide.)  Then change the left value to move the “windows” from the left side of your document to the right side.  Currently, your icons won’t appear properly in these windows until we position them, which is the next step.

Step 3: Position your default images.

We want each default icon to display in each window.  Note the values after the first image URL in each section.

#facebook {left:0px;width:65px;}
#facebook {background:url('YOUR IMAGE URL HERE') 0 0px;}
#facebook a:hover {background: url('YOUR IMAGE URL HERE') 0px -63px;}

These two values position the image from the left side of the document and from the top of the document.  If the first value is positive, your image will move to the right.  If the first value is negative, your image will move to the left.  If the second value is positive, the image will move down.  If the second value is negative the image will move up.

Step 4:  Position your hover images.

Now, use the second value after your image URL to position your hover images into the window.  If you placed your hover images below your default images, this value should be negative.  You can also use this value to simply position a set of default images to move up or down on hover, without the need for a second set of images to use on hover.

Step 5:  Add your URLs and more icons.

At the bottom of the code is a place where you can add your own URLs for your social sites.  You can also add as many links as you want.  Just remember to duplicate each line item (<li>) for a new link, as well as duplicate a section of CSS and title them all accordingly.  For example, to add an e-mail icon to our list, we would add this code just before the </style> tag.

#email{left: 195px;width:65px;}
#email{background:url('YOUR IMAGE URL HERE') -195px 0;}
#email a:hover{background: url('YOUR IMAGE URL HERE') -195px -63px;}

And add this line item before the </ul> tag at the bottom of our code.

<li id="email"><a href="mailto:info@thebdn.com"></a></li>

You’re done! Place the entire code in a widget on your blog!

If you’re curious about the art of blog and web design and how to pursue it as a hobby (or even a career), here are five very important but basic steps that can help get you started.  These aren’t all inclusive of course, but are a great place to start if you’re interested in learning how to get into the design world!

1.  Be a Blogger – There’s nothing that can help you understand how to create designs for blogs and websites more than actually experiencing it for yourself.  Blog regularly for awhile, comment on blogs that interest you, and network with like-minded bloggers.  Not only does this give you a first-hand account of what the current needs and trends of design are, but it also gives you a strong web presence that you can use to market your design services.

2.  Do Your Homework – Luckily, homework in this case is fun!  Visit popular blogs and websites and study their design.  Not just the design, but the layout, content, and organization of the site.  Use our Blog Designer Directory to find designers and look at the things they’ve created in their portfolio.  What audience do you want to appeal to?  View their blogs and websites, and learn what the popular design trends are, as well as what design techniques are timeless.  Be involved in forums or websites, get pinning on Pinterest, and even become a regular on “blog design” related sites similar to this one such as Makin’ Cute Blogs and The Blog Guidebook.  The more you research, the more versatile you’ll be as a designer!

3.  Learn Your Software – …and learn it well.  It doesn’t matter what editing or graphic design program you use, but it does matter how well you know how to use it.  Practice doesn’t make perfect – perfect practice makes perfect.  So take your time, take a class, search for answers, watch YouTube tutorials, and challenge yourself to be an expert in your software of choice.  We recommend Adobe Photoshop for professional use, but you may also find Photoshop Elements, Pixlr.com, or GIMP useful too.

4.  Get Designing – Don’t wait until you have a reason to design.  Just do it!  Make a Christmas card, a business card, a pretend blog, wall art, an invitation, a pretend website, a re-design of a REAL website, a blog you want to launch, – anything!  To get practice with potential clientele, offer your blog friends or readers a design for free or at a discount.  Anything that allows you to gain practice with good design techniques, working with other bloggers, and designing based on the requests of others is a great start to becoming a designer.

5.  Don’t Be Afraid of Code – Learning CSS and HTML seems like a scary task, but if you approach it correctly it can be easily learned over time.  It’s not necessary to learn every single aspect of how to code a website immediately.  Learn the basics, practice the basics, then learn something new.  Build your skill set and add to it frequently.  Start with designing your own blog or website.  Decide exactly how you want it to look, even if you don’t know how to code it.  Then step-by-step use search engines, classes, forums, and more to learn how to achieve your objective.  You don’t have to take classes to learn it either (that just speeds up the process a bit.)  Using your own site is better than a practice site, because it forces you to push your boundaries, and the hours you put into it will be worth it in the end.  Through trial and error, a lot of determination and practice, and using your resources, it’s possible to become a professional web designer.  Not many professions have the luxury of being able to do that!

We hope these steps help you have a little direction in becoming a blog designer!