Using the New Forum

October 20, 2012August 1, 2020 ~ Ben Schwartz

October 27, 2011 By The Blog Designer Network

captureforumbdn-9417326

We have a new forum that we’re extremely excited about, and wanted to share some of the ways in which you can use it. Posting questions in a forum is extremely helpful because it allows your questions and answers to be in a public place where others with similar issues might be able to find it too!

1. Are you new to blogging? Do you need tips on how to start your blog, or how to get more readers? Ask your questions in the Blogging Newbies forum!

2. If you’re a blog designer, or need some advice or feedback on a situation, or anything that might warrant an opinion (we have lots!) just ask in the Advice and Feedback forum!

3. Not sure about a design you’ve created, or want a constructive critique? Post your design or blog in the Portfolio and Blog Critiques forum. Both designers and Bloggers are welcome to post their designs, blogs, or any creative work in which you’d like advice on!

4. The Blogger Design and Coding forum is perfect for both newbies and expert designers who have questions about CSS and HTML on the Blogger interface, or any Blogger related questions.

5. For those who are WordPress lovers, there’s an entire group for your WordPress needs! You can ask specific questions about the Genesis Theme Framework, the Thesis Theme, or even Blogger to WordPress Transfers.

6. Lastly, there’s a group dedicated to all aspects of graphic design in various platforms. Learn about Adobe Photoshop and Adobe Illustrator!

Best of all – it’s always free, and we’ll be around ready and willing to answer all your questions – and we hope you’ll share your knowledge too!

Custom Blog Design Giveaway – April Showers

October 9, 2012August 2, 2020 ~ Ben Schwartz

October 10, 2010 By The Blog Designer Network

Congratulations goes to comment #18, Kristina!

Random Integer Generator Here are your random numbers: 18

Timestamp: 2010-10-16 15:23:25 UTC

aprilshowerslayoutbutton-6494033

I am like SUPER excited to be in our new home at WordPress.org and to celebrate, we will be hosting a series of custom blog design giveaways in October and November. I am also thrilled that our first giveaway at our new home is for April Showers Blog Design!

For those who do not know April, she is a bundle of creativity and energy!! When I first started Beautiful Blog Designs, she was the first designer to contact me and show support. Her designs are unique and beautiful and I know she puts a lot of heart into each one she does. And, she was the very first “Beautiful Sponsor” for BBD! Love you, April!! ♥ ♥

I want to take a moment and share a couple of her designs which I just love so you can see her fabulous ability.

The prize that April is generously giving away a Super Amazing Package O’ Fire worth $120 (Blogger) OR “Package A” (WordPress) worth $150!

The Super Amazing Package O’Fire includes the following:

Header
Background
Custom Post/Sidebar Title Font
Button w/ Copy Code
Signature
Horizontal Menu Bar
Favicon
Set of 10 Social Networking Icons
Post Title Background/Icon
Sidebar Title Background/Icon
Post Footer
Footer
Search Engine Optimization

The WordPress Package A includes:

Header
Custom Theme
Background
Button w/ Copy Code
Sidebar Title
Image Signature

Now for the giveaway nitty-gritty:

To enter, simply leave a comment telling me how long you have been blogging.

Earn extra entries by doing one or more of the following – BUT make sure to leave a new comment for each thing you do. If you already do the listed things, simply leave a comment stating such.

The giveaway will end Friday, October 15th at 11:00 PM EST. Random.org will be used to choose the winning comment.

The winner will be notified by email and will have one week to confirm with April. If the winner does not claim the prize, a new winner will be chosen.

Using CSS Image Sprites for Image Links and Rollover Effects

October 4, 2012August 1, 2020 ~ Ben Schwartz

November 22, 2011 By The Blog Designer Network

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.

bdncssspritetutorial5-9030958

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.

bdncssspritetutorial4-2385901

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.



#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;}

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.

bdn-css-tut12-6160805

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.

bdn-css-tut4-2070168

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 (

) 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 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 tag at the bottom of our code.

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

How to Format the Menu Bar in Blogger

October 4, 2012August 1, 2020 ~ Ben Schwartz

October 10, 2011 By The Blog Designer Network

In Blogger you can easily add a menu bar underneath the header area to display your pages. However, usually the menu bar does not come formatted and looks unsightly on blogs that have been customized. Here is a quick and easy way to format this menu!

Design your page to your specifications, then go to the “Page Elements” section in Blogger. Click “Add a Gadget” under the header, and choose “Pages.” Put the widget under your header.

capturepagestut7-8236584

On our sample site here, you can see that the pages are the same color as all “hyperlinks” and it’s difficult to see on the dark background.

capturepagestut1-1024x522-8113176

To style this section with CSS, simply go to the “Template Designer” in Blogger, and click “Advanced.” Then scroll to “Add CSS.”

capturepagestut6-7165920

capturepagestut8-7528305

In the white box, add this line of code:

#PageList1 {  }

Between the opening and closing curly braces, put your styling. For example:

#PageList1 { background: white; margin: 10px 0px 0px 0px; }

Would produce this:

capturepagestut2-1024x267-6146132

You can further customize the CSS with shadows, borders, custom fonts, etc…

#PageList1 { background: white; margin: 10px 0 0; box-shadow: 0px 0px 5px #000; -moz-box-shadow: 0px 0px 5px #000; font-family: 'Lobster', cursive; border: 5px solid #A6A8A9; border-radius: 35px; -moz-border-radius: 35px; }

Which would produce this:

capturepagestut3-1024x254-2153855

Since each item is a link, you aren’t able to simply change the text color in the same section. To change the link color for the Page List section, add this line of code:

PageList1 li a {  }

For example:

#PageList1 li a { color: black; }

(You can add all the CSS on one line, but it’s sometimes easier to see and edit when hard returns are placed after each line.)

To make each item change color upon hover, add this line of code:

#PageList1 li a:hover {  }

For example:

#PageList1 li a { color: pink; }

These lines would look like this:

capturepagestut4-1024x271-8299942

Good luck! Experiment with images, dividers, and much more! The “Add CSS” section is a great place to learn by trial and error!

How to Start a WordPress Blog

October 4, 2012August 1, 2020 ~ Ben Schwartz

May 11, 2011 By The Blog Designer Network

WordPress is without a doubt an excellent platform to have not only a blog, but a website too. It offers many “fancy” functionalities for website owners, and can be super simple for someone who just wants to start a blog!

There is a huge difference between WordPress.com (the free platform) and WordPress.org, your own self-hosted WordPress blog. Simply put, having a blog on either Blogger or WordPress.com are close to the same thing. You can see a comparison table between WordPress.org, WordPress.com, and Blogger at How Joyful Design Studio.

This will teach you how to set up your own self-hosted WordPress.org blog.

Buy a Domain Name: Your domain name is what people will type into their address bar to get to your site. Ours is theblogdesignernetwork.com. We also purchased blogdesignernetwork.com and thebdn.com, which both direct to the same place! We suggest using GoDaddy.com for purchasing domain names, however many hosting providers (such as the sponsors in our sidebar) offer free domain names as an incentive for hosting.

Purchase Hosting: Unlike free blog platforms like Blogger or WordPress.com, you will need to purchase a hosting plan through a server of your choice. This is like renting “space” for your blog on the web. The prices vary from only $2 per month, up to $10. We suggest RFE Hosting, Dreamhost, Bluehost, or Hostgator. See our sidebar for their ads and possible discounts!

Link the Domain and Hosting account: If you purchased your domain name through your hosting provider, you can skip this step. You should get a welcome e-mail from your hosting provider. In the e-mail it will identify your “nameservers” which may look something like this:

ns1.(hostname).com
ns2.(hostname).com

Example: ns1.rfehosting.com

ns2.rfehosting.com

Now log in to GoDaddy, or wherever you purchased your domain name from. For GoDaddy, click on “My Account” in the upper right hand corner. Find your domain name and click on the blue link to the right of your URL that says “Advanced Details.”

Then (see image below) click “Set Nameservers.” For any other domain registrar, look for domain settings, then nameservers.

how-to-set-up-a-wordpress-blog-tutorial-9729554 A pop-up box will appear. Insert your own nameservers and make sure the settings look like they do here. Then click “Ok.”

how-to-set-up-a-wordpress-blog-tutorial-2-3446438

Important: Your domain and hosting account may take up to 48 hours to complete this process.

Install WordPress: Once you have purchased your domain name and set up your hosting account, you’ll need to install the WordPress software onto your account. Your hosting provider will likely make this REALLY easy for you since WordPress is one of the most popular reasons people sign up for hosting. For most hosting providers you will have access to what is called a “Cpanel” and it looks like this. (Your hosting provider will customize it with their own logo.)

how-to-set-up-a-wordpress-blog-tutorial-3-1024x533-5291652

Then scroll down to the “Fantastico De Luxe.”

how-to-set-up-a-wordpress-blog-tutorial-4-8398737

Select “WordPress” and “New Installation” as specified below.

how-to-set-up-a-wordpress-blog-tutorial-5-4182511

Fill out the information they request, and click “finish.”

In GoDaddy, simply Login and go to your Domain Manager. Then click “Hosting Accounts” and find the “Launch” button next to your hosting account. The “WordPress Install” link will be on that page. Just click it, and it will guide you right through the process of installing WordPress!

Once WordPress is installed, go to:

yourdomain.com/wp-admin (Use your own URL.)

and

yourdomain.com/cpanel (Use your own URL.)

The first URL will take you to your WordPress dashboard where you can make posts, change your theme, and launch your blog! Login using the username and password you set up during installation (not your hosting account username and password.) The second URL will take you to your control panel, where you can set up e-mail accounts, make subdomains, manage your files (like header, background, etc…), and much more!

If you have any questions about this tutorial, visit our new forum and ask away!

5 Basic Steps to Becoming a Blog Designer

October 4, 2012August 1, 2020 ~ Ben Schwartz

November 10, 2011 By The Blog Designer Network

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!

Dawn Farias

October 4, 2012August 1, 2020 ~ Ben Schwartz

May 19, 2011 By Dawn Farias

Isn’t color a lovely thing to have? It brightens, darkens, defines and suggests. Hopefully, the colors on your blog do all these things in a pleasurable please-stay-and-even-come-back-again kind of way. If you’re stuck in a color rut, then today is your lucky day. Here are a few of my favorite places to go for color […]

May 11, 2011 By Dawn Farias

Exciting Announcement! Hi there! I’m April, of April Showers Design Studio and the *NEW* Blog Designer Network! Amanda has been kind enough to let me announce some AMAZING news here on Beautiful Blog Designs, and I hope you all do a chair dance and eat a cake pop in celebration. For a few years I’ve […]

March 10, 2011 By Dawn Farias

pages-only-150x150-6902049

It used to be that you needed a fair bit of coding to get a nice looking horizontal navigation bar for your Blogger blog. Not anymore! Let me show you how easy Blogger has made this aspect of your design. Pages only horizontal navigation in Blogger Your blog posts are dynamic, ever changing content that […]

February 20, 2011 By Dawn Farias

step-8b-add-effects-150x150-7454911

Are you a blog designer or blogger that’s stuck in a rut for a new design? Well, here’s some real world inspiration to get your design juices flowing. I have been noticing cards, magazine covers, digiscrap kits and store signs using chunky, sans-serif fonts* that have a slightly lowered opacity* so that when the letters […]

January 18, 2011 By Dawn Farias

Hi, everyone! I’ve collected a few links and tips for you Blogger users. Hope you find some of them to be helpful. 1. Add a horizontal drop down menu in Blogger. Horizontal drop down menu in Blogger from Confessions of a Homeschooler Drop down menu bar for Blogger from April Showers Blog Design 2. How […]

January 3, 2011 By Dawn Farias

step-1-150x150-6826601

Here at Beautiful Blog Designs, Amanda recently posted on using Joliprint to create printables of blog posts. Today I’m going to show you how to use Print Friendly in a similar manner. To start, you want to find a blog post that you’d like to print. I am choosing A Weekend Staple at the Polka […]

December 6, 2010 By Dawn Farias

bbs-cooking-150x150-9383875

Paula Deen’s Pumpkin Gooey Butter Cake has become an annual tradition at our Thanksgiving table. Mostly I love that it can be baked in a larger pan than the expected pie-sized ones and so I can feed more people with less effort than baking several pumpkin pies. This past holiday I searched briefly for a […]

November 11, 2010 By Dawn Farias

web-preview-150x150-3270027

THIS GIVEAWAY IS NOW CLOSED. The winner is comment #18 – Marissa. Congratulations! ——————————————————- Hi, friends! Dawn here. Looks like it’s time for another giveaway here at BBD and this month it’s hosted by….ME! Literally. I have a few premade blog headers available and would like to give one away. This giveaway is good for […]

November 8, 2010 By Dawn Farias

lovely-in-pink-eats-150x150-2941910

Lovely in Pink | Eats is a foodie blog run by “Becca, part Georgia Peach, part Floridian” who shares both her adventures and her “misadventures” in the kitchen. I first came across this blog, well, today (!!) when Becca left a comment on one of the posts here at Beautiful Blog Designs. She had implemented […]

November 5, 2010 By Dawn Farias

date-under-post-title-150x150-4065853

Happy Friday, friends! I was customizing my personal blog a bit and wanted to move the date from above the post title to below. I was pleased with the results and thought I’d share with you the tutorial I found for it as well as my extended customization. Date under post title – Move date […]

Get 25% off All Classes at Our Back-To-School Sale!

October 4, 2012August 1, 2020 ~ Ben Schwartz

August 24, 2012 By The Blog Designer Network

This week and next are pretty hectic for most moms and students! It’s back-to-school time of course, and in celebration of fresh notebooks & new pens, we’re having a fabulous sale! We just finished scheduling courses for the fall semester, so head over to our Workshops page and see what might be a good fit! We also lowered prices so more students were able to reap the benefits of these courses.

Get 25% off ALL classes through August 31st, 2012 using the code BACK2SCHOOL12 at checkout! That’s ONE week from today! You can register for as many classes as you wish, and if you’re not able to attend the live sessions, all videos will be available for download after the class has ended. Keep in mind that only 25 students per class are allowed, so register soon! Feel free to contact us with any questions you have.

The Blog Designer Network

October 4, 2012August 1, 2020 ~ Ben Schwartz

January 23, 2009 By The Blog Designer Network

The following are women-owned businesses which design web stores. Auction Add-Ons Blogalicious Web Design Boutique Graphics Cutest Site On The Block Designs by Deanna Edub Graphic Art and Design (Etsy banners) Hip Chick Web Design Lightining Bug Designs My Pixel Shoppes Polka Dot Dandy Posh Daisy Web Design Retro Boutiques Simply Creative Sweet Boutique Design […]

January 23, 2009 By The Blog Designer Network

If you want a huge selection of gorgeous FREE templates go to Simply Fabulous Blogger Templates. The designer there is Lena Toews and she has shared many, many incredible templates for you to use, 100% free of charge. You simply browse through the categories and pick out the one you want. She has also provided […]