April 3, 2011 By The Blog Designer Network
The Pixelista offers design solutions that won’t empty your wallet. If you’re looking for a web professional with creativity and passion for your project, The Pixelista is the right choice for you!
April 3, 2011 By The Blog Designer Network
Hey! We offer tons of awesome workshops that you can attend right from your computer! You’ll be able to hear us, see our screen, and interact with other students as you learn everything from graphic design, to blog design, to CSS and coding tricks, and much more! Click on any class to be taken to the course registration page, and see detailed information!
Schedule too tight to squeeze in a class? No problem! Purchase class videos here!
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
April 5, 2011 By The Blog Designer Network
The BDN will soon be launching an amazing way for people to find your blog or web design site! You will have your own dedicated page here that tells bloggers and potential customers vital information about your business at a single glance.
Here is an example of a listing (click to see live):
April 7, 2011 By Designer Blogs
Do you love the look of Polaroid photos?
There is just something so cool about retro Polaroids, am I right or am I right?!
Well today I’m going to show you how to give your post images a similar look.
Step 1. Log in to your Blogger account. In the dashboard click “design”
Step 2. Then click “edit HTML”
Step 3. Hit CTRL-F and search for:
.post img
Step 4. Highlight the entire portion of the post image code:
.post img, table.tr-caption-container {padding:4px;border:1px solid #999999;}
and replace it with this new code:
.post img {padding:8px 8px 8px 8px;border:none;background:#ffffff;text-align:center;-moz-box-shadow: #999 3px 3px 7px; /*For Mozilla Firefox*}
Now your code will look like this:
Step 5. Save and view!
BEFORE AND AFTER
PLEASE NOTE! This code will give ALL the images in your posts a drop shadow and border. So if you have a signature I would recommend removing it.
If you want to get really spiffy you can alter the code settings:
April 5, 2011 By The Blog Designer Network
This site is meant to be an AWESOME resource for bloggers and designers to find ways to improve their blogs. With helpful articles, lists of resources, and much more – we’re looking for great content to help one another out! The $25 fee to get your OWN page right here at the BDN in the Blog Designer Directory can easily be waived just by contributing!
To waive the $25 fee, simply e-mail us at [email protected] with your ideas for the following submissions! (We will let you know if they’re already taken!)
– 2 or more Tutorials or Articles of your choice. – 5 or more websites you find useful as a designer. (Can be places you get graphics, fonts, etc…) – YouTube video tutorials.
– Graphics for Commercial Use.
Suggestions are welcome! Thanks!
April 5, 2011 By The Blog Designer Network
The BDN will soon be launching an amazing way for people to find your blog or web design site! You will have your own dedicated page here that tells bloggers and potential customers vital information about your business at a single glance.
Here is an example of a listing (click to see live):
April 4, 2011 By Chris
We learned PageMaker 1.0 and Photoshop 2.5 (Before there were layers. That was fun.) If you wanted one of the two color computers (Apple LCIIIs—the rest were black and white Mac classics), you needed to show up around 7:00 every morning. My last year of school I was rocking AOL 1.0. My 2400 baud per second modem would practically smoke every time you tried to download a file. CD-ROMS were still the “next big thing”, so I taught myself Macromind Director 2.0. When the rest of the portfolio class was arranging photo shoots, welding metal cases and cutting mat board, I was learning the intricacies of “Go to the frame -1”. My portfolio was the first interactive one to come out of the program, and I took second place in the annual portfolio review.
After I graduated, I worked for a skateboard company.
Then the web guy quit, which meant I had to learn HTML. Learned that, and went to work for the first interactive agency in San Diego. I wasn’t feeling it there, so I tried another agency. And yet another.
I taught myself Flash when it was FutureSplash.
I used that skill to get hired on with the best and brightest crew I’d ever had the pleasure of working with. Plus free soda machines, beer Fridays and Foosball. Then the bubble burst. I survived one round of layoffs, and another. I finally bailed out a few weeks before the doors closed for good.
I tried a couple of other agencies.
Nothing seemed to fit. An opportunity to design scrapbooking idea books came along, so I took the plunge and went freelance. That turned into branding and art directing a magazine. That led to a photography website, and finally customizing themes for women-owned small businesses. I’ve been freelancing for five years now.
Looking at my resume, you might assume I’m a successful designer.
After all, I’m still doing it 15 years later, my portfolio is pretty solid (if I do say so myself) and I’ve been able to work for myself the last 5 years. You’d be wrong.
Like many designers, I’m a total sterotypical “creative”.
I don’t like paperwork, or numbers, or, for that matter, the actual business end of running a business. So I’ve taken clients I didn’t really want to for a paycheck. I’ve suffered through clients not paying me for 90 days past the date they owed me. I’ve missed deadlines. I’ve totally forgotten about meetings I’ve scheduled. I’ve juggled way too many balls and dropped a few. I’ve neglected my family and personal life to write code for three days straight because I was a champion procrastinator.
About a year ago, I realized I wasn’t very happy doing what I was doing.
I loved the actual act of designing, but was constantly hustling, and scrambling, and just generally whizzing around like a pinball, always reacting, never planning. Something had to give. It was time to re-evaluate everything and decide if I wanted to keep doing what I was doing. Since being a graphic designer is who I am, not what I do, the answer to that question was easy. But I sure didn’t want to keep doing it the way I’d been doing it in the past – it was stressful and not a whole lot of fun.
So Life 2.0 was created.
The conversations that my wife (who agreed to come along for the ride as my COO) and I had about those questions has turned into something we started calling “Life 2.0”. We wanted to take the lessons we’ve learned in the first half of our lives, and make the second half better. To reevaluate what’s important and how we’re going to get there. Our business together is a major component in our new plan.
I have noticed changes in myself already.
We started this journey in earnest in January of this year. I am focusing on things like increasing efficiency, finding revenue streams and deciding on time tracking utilities – all those things my right-brained inner artist used to ignore because they “weren’t creative enough”. I’m discovering that they can actually be fun (except for time tracking – I don’t think I’ll ever actually like that) and make being a designer so much more than just decorating websites with the latest trends for a check. I’m hoping you’ll enjoy following along on this journey!
So what’s next?
Every Friday, I will have an article posted here that will talk about one aspect of, as Oprah would put it, “Living our best life”. Things like how to work smarter instead of harder, focus your marketing efforts and decide what type of life you want to live, and how your business fits into it, instead of the other way around.
April 3, 2011 By April M
This code below will allow all your links and buttons to open in a new window without having to do any extra work (meaning – WITHOUT adding the target=”_blank” to each and every link). Yay!! The code below will scan your blog for external pages and add the target=”_blank” to each and every one of them.
Before you begin please be sure to save a copy of your current HTML Code to your computer first.
Step 1: Log into Blogger then click on “Design” > “Edit HTML”
Step 2: Press Ctrl+F and find this code . Right before that code copy and paste the following:
//
jQuery(‘a’).each(function() {
// Let’s make external links open in a new window.
var href = jQuery(this).attr(‘href’);
if (typeof href != ‘undefined’ && href != “” && (href.indexOf(‘http://’) != -1 || href.indexOf(‘https://’) != -1) && href.indexOf(window.location.hostname) == -1) {
jQuery(this).attr(“target”, “_blank”);
}
});
//]]>
Step 3: Click “Save Template”
Let me know if it works for you.
April 3, 2011 By April
Hover over this image to see an example of the effect you can do with this code!
Using the code below, paste in your own URL, the URL of your default image, the URL of your hover image, and the alternate text to display.
Be sure to keep the ‘ on either side of your image URLs or this code will not work.
You can paste it in any HTML/Javascript widget, and even use on your menu bar!
April 3, 2011 By April M
Ever wonder how someone was able to center a button or image. Maybe you loved the way their blog looked because all their buttons and images were the same size. Here’s how to do that and make your blog look organized and together.
I will give you an example for a button in your sidebar.
Step 1: When you add a button in your sidebar the HTML Code will look something like this:
Step 2: To have your button centered in the sidebar add the code
Step 3: Now to adjust the size of your button/image you will need to add a code for the height and width.
You can change the width to what ever size you need or like. Change 100 to 125 or 80… whatever works for you!
You can use these same tricks in your posts but you need to be in the “Edit HTML” area. Leave me a comment below if you need more help with this.
April 3, 2011 By April M
Sometimes I would like to schedule when my new post will show on my blog at a certain date and time instead of me having to go in and post it manually. Here is how to do that:
Step 1: After you have created a post click on “Post Options” under “Labels”.
Step 2: Choose “Scheduled at” under “Post date and time”. Enter the date and time you would like your post to show on your blog.
Step 3: Click “Publish Post” and wah-la!
April 3, 2011 By April M
Here is a very simple and easy way to add the copy code box under your Button. The copy code box allows others to use and place your button on their site which will drive more followers/readers to your blog.
*New* There is a video at the bottom of the page on how to do these steps.
Step 1: Once you have your button created upload it to Photobucket.com.
Step 2: Click on the HTML code and that will copy it for you.
Step 3: Log into your Blog and click on “Design” and you should automatically be under the “Page Elements” tab.
Step 4: Click on “Add a Gadget” then “HTML/Javascript”
Step 5: Right Click (or press ctrl + v) under the Content area and paste the HTML Code you copied from Photobucket it should look something like this:
Replace the area in blue (above) with your Website URL.
You can center your button by adding
Step 6: Highlight and Copy your HTML Code again and paste it right under the first one and add
Step 7: Save it and take a look! Leave a comment below and let me know if it works.
April 3, 2011 By Julie
WordPress and Blogger both have advantages and disadvantages. I could argue both, but that’s not what this post is about. The fact is that many people find Blogger to be a more user-friendly platform but find WordPress less limiting than Blogger. The compromise? A WordPress theme that has been modified to Blogger. There are a number of these themes hanging around Google, but I am about to introduce you to one of my favorites which is called the Revolution Lifestyle template. An example of this template can be found here: http://revolutionlifestyletemplate.blogspot.com/ The blog template is free but is rather basic. This premium template can be downloaded from magznetwork.com for $25 and allows for unlimited use. Beyond the striking organization of this template, the following options are available for use in this template: a smooth slider for featured content, video, automated lists of specified labels, drop down menu, favicon, an optional 3 column footer and more.
The CSS is rather intimidating upon first glance; however, the Magazine Network does a nice job of explaining everything and offers a screenshot of the dashboard with labels corresponding to the CSS, making customization pretty simple. Speaking of customization, there are two options when downloading the premium template: images mode and colors mode. I have used both and even with a background in CSS and HTML found colors mode infinitely more user friendly and easier to customize.
Who would benefit from this template? Blogger users who are nervous about using WordPress, bloggers who have a lot that they want organized (review and giveaway bloggers, for example), bloggers who use tons of labels that they want more organized, bloggers who want seamless features like a featured content slider, and/or bloggers who want a streamlined look.
Do not be fooled. While this template is streamlined, I have seen (and created) some pretty neat designs with this template.
One should be warned that this template is not without flaws. Many of the tutorials, which you obtain access to upon purchasing the premium template, have the statement: “Save and see if it works for you”. I have to say, though, that I have never encountered a problem. I haven’t found their forum to be particularly helpful either.
Don’t let any of that hold you back, though. The template really is a great compromise if you’re a Blogger user or designer looking for a professional, streamlined, and organized template!
April 3, 2011 By Julie
As a designer, I do just about anything I can to save time. Save time on my designing and minimize load time for web readers. This doesn’t mean I skimp on quality. Just the opposite, in fact. Using CSS coding rather than imagery, you can speed up load time of your page and in this tutorial, I will show you how to add a shadow behind elements on your blog and give it a 2 dimensional effect using CSS.
The first thing is to know that not all browsers will recognize this effect. I am going to slowly step off of my soap box regarding not using Internet Explorer; however, IE9 users should be able to see shadows (not all hope is lost, I suppose). At any rate, because we want the most readers possible to see this effect, we will apply 3 different lines, which all have the same purpose.
The basic code is:
box-shadow: 0px 3px 10px 10px #000; -moz-box-shadow: 0px 3px 10px 10px #000; -webkit-box-shadow: 0px 3px 10px 10px #000;
}
We put the box-shadow for Opera users, moz-box-shadow line for Mozilla users, and webkit-box-shadow for Chrome and Safari users.
The next step in successfully using this code is to understand what it means!
The very first number defines the horizontal shadow, the second number defines the vertical line, the third number defines the blur distance and the fourth number defines the spread distance (all in pixels). Where it says #000 is the hex color. You may replace this with an rgb code if you are more comfortable with that. Each of these numbers may be played around with. The above code is just an example.
If you choose to use a shadow and would like to change the side that the border shows up on, try playing with negative numbers for the horizontal and vertical codes. If you would like to see an inner shadow, simply place the code “inset” (without the quotes) after the colon on each line. An outer shadow is default and therefore does not require a code.
And that reminds me, each of your lines should be identical. They are simply representing browser compatibility and since you want your page to look the same in different browsers, just keep it the same!
The next step is to understand where to put this code.
You can place this code under any element in your CSS that you want. I often will place the code within my #outer-wrapper code in Blogger. If you do this, I recommend giving the outer wrapper a background color (here it is white). A border is not necessary either, as your shadow will be your definition bewteen the outer wrapper and background, but can be fun! A border will also ensure that those who cannot see the shadow do see some definition.
The code may look like this:
#outer-wrapper {
width: 1000px;
margin:20px auto;
background: white;
text-align:$startSide;
border: #d7d7d7 ridge 10px;
font: $bodyfont;
box-shadow: 0px 3px 6px #000;
-moz-box-shadow:0px 3px 6px #000;
-webkit-box-shadow:0px 3px 6px #000;
}
You may notice I don’t have a spread distance listed in the above code. Like I said, play around with your numbers, because it’s not always necessary.
You may also leave the shadow code out of your outer wrapper and simply choose to put it on your sidebar to have that stand out. Find #sidebar-wrapper in your CSS and place the code there instead. You can even put a shadow behind photos. To do so, find code .post-img { and put the code there.
You can add things like add rounded corners, color, borders and more to this code. There are many options, so play around and have fun with it!
April 3, 2011 By The Blog Designer Network
Don’t do these 5 dirty design deeds
http://sixrevisions.com/web_design/negative-space-in-webpage-layouts-a-guide/
Negative Space in Webpage Layouts: A Guide
Mega Collection of Cheatsheets for Designers & Developers
http://sixrevisions.com/web_design/how-to-stay-ahead-of-the-curve-as-a-designer/
How to Stay Ahead of the Curve as a Designer
http://www.patterncooler.com/
A Free Seamless Pattern Backroung Design Resource
Free Fonts: 100+ Fresh and Free High-Quality Fonts
http://webdesigneraid.com/5-awesome-things-that-you-can-do-with-css3/
5 Awesome Things That You Can Do with CSS3
http://www.noupe.com/graphics/design-charts-for-better-typography-and-color.html
Desgin Charts for Better Typography and Color
http://www.wpchildthemes.com/plugin/genesis-footer
Genesis Footer
http://webdesign.tutsplus.com/articles/designing-in-browser-a-manifesto/
Designing In-Browers: A Manifesto
http://www.inc.com/magazine/20110301/making-money-small-business-advice-from-jason-fried.html
How to Get Good at Making Money
http://lostandtaken.com/gallery
Texture Gallery
http://wordpressreviewplugins.com/
Turning WordPress Into an Affiliate Review Site is Easy…If You Use the Right Plugin!
http://designshack.co.uk/articles/layouts/10-tips-for-troubleshooting-a-lackluster-design
10 Tips for Troubleshooting Lackluster Design
Workshop: A Better WordPress for your Clients by Troy Dean at WordCamp Melbourne 2011
Workshop: A Better WordPress for your Clients
http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/
Type Study: Typographic Hierarchy
http://www.prelovac.com/vladimir/
Organic Search Optimization Strategy for 2011
http://cssmenumaker.com/
CSS Menu Generator
http://www.tehkseven.net/news/475-free-vector-icons
475 Free Vector Icons
http://www.graphicleftovers.com/
Graphic Leftovers (Vector Images)
http://picketfenceblogs.com/
Picket Fence Blogs
http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
Technical Web Typography: Guidelines and Techniques
http://wpcandy.com/made/the-sample-post-collection
Easier Theme Development with Sample WordPress Content
http://depositphotos.com/
Deposit Photos (Vector Images)
http://codex.wordpress.org/Template_Hierarchy
Template Hierarchy
http://www.quackit.com/html/codes/html_email_code.cfm
HTML Email Code
Host your own SIFR fonts (Video)
http://tutsplus.com/
tuts+
CSS Tricks
http://makincuteblogs.com/2011/02/20-awesome-high-resolution-texture-freebies/
20 Awesome High Resolution Texture Freebies!
The Pors and Cons of Art Directed Blog Posts
Free Fonts
Kevin & Amanda Fonts
* http://www.kevinandamanda.com/fonts/freescrapbookfonts/ — Scrapbook
* http://kevinandamanda.com/fonts/fontsforpeas/ — Pea Fonts
http://www.dafont.com/
http://misstiina.com/fonts/
http://www.1001freefonts.com/
http://www.urbanfonts.com/
http://www.sugarfrogfonts.com/
http://new.myfonts.com/
http://www.letteringdelights.com/
http://www.fontsquirrel.com/- Commercial free
http://www.google.com/webfonts