The pretty blog buttons wouldn't work in the blog filter for a little awhile, but now they're back! And you can make BIGGER and smaller buttons, as well as making customized links to other pages not in the list.

Get Your Buttons Here

More Tools Here

These buttons are fully animated. You can see the link change color when you mouse over them, and some of the 3D buttons depress! If you are using FireFox, it is better to use the Static buttons rather than the Animated buttons because if you re-edit your post, the styles will disappear from your buttons in FireFox. This is not a problem if you edit your post in Internet Explorer.

I made the buttons below by first selecting a color from the rainbow palette, then selecting "no color" on the palette, and then "apply". The border picks up the first color and then the background goes transparent. It's a neat effect and is 3D clicky too.

Get your buttons here:

http://www.isdntek.com/tagbot/qbutton.htm

Use the buttons in your Store, Auctions, About Me page, Blog posts, or on your own website. You can also click the "purpose" option to use the links in your forum posts, guides, or groups, without the styles. They'll be formatted according to the requirements of those venues.

The pretty blog buttons didn't work in the blog editor for a few weeks, but now they're back! And you can make BIGGER and smaller buttons, as well as making customized links to other pages not in the list.

These buttons are fully animated. You can see the link change color when you mouse over them, and some of the 3D buttons depress! If you are using FireFox, it is better to use the Static buttons rather than the Animated buttons because if you re-edit your post, the styles will disappear from your buttons in FireFox. This is not a problem if you edit your post in Internet Explorer.

I made these buttons by first selecting a color from the rainbow palette, then selecting "no color" on the palette, and then "apply". The border picks up the first color and then the background goes transparent. It's a neat effect and is 3D clicky too.

Get your buttons here:

http://www.isdntek.com/tagbot/qbutton.htm

Use the buttons in your Store, Auctions, About Me page, Blog posts, or on your own website. You can also click the "purpose" option to use the links in your forum posts, guides, or groups, without the styles. They'll be formatted according to the requirements of those venues.

Wow, there are buttons buttons everywhere, LOL. What fun!

The buttons are designed to be added to individual posts, About ME pages, auctions, and websites. I know some members would like to have the buttons appear at the top of their blogs, but they aren't designed to go there. We'll need to add a wishlist request for some sort of common banner area for all our static goodies.

A few are experimenting with posting the buttons in the advanced stylesheet slot in the customization area, but HTML really shouldn't be posted there. It does seem to work somewhat, but eBay may nix the idea and start filtering the code out of the stylesheet area if it catches on. When the codes are added to the stylesheet area, a couple of strange things happen. The code itself floats to the top because the page has not yet loaded. The styles in the stylsheet area do not affect that code because the page has not yet loaded. Then when the same buttons appear in a post, the styles in those valid buttons affect or display the buttons that floated to the top. Very mysterious indeed.

Last winter, several of us prepared a workshop on designing an About Me page. Much of the workshop was devoted to expanding on these 10 Design Basics. These concepts have been formalized in an guide, but it was time to update that information as it relates to a Blog. So for our bloggers, here are some design concepts for creating a friendlier blog page.

 1.  How wide?

People viewing your page may have a different screen resolution than you do, so what looks good on your screen may be too wide on their screen. By width, we mean the number of pixels, not the width in inches. All of the web content is displayed in pixels (dots), and giant screens may just have fatter dots. Over a quarter of viewers still have screens that are set to 800 pixels wide (despite their larger monitors), so it is a good idea to make sure that your photos and content are no wider than that, or they'll have to scroll sideways.

The right scrollbar takes away a little and eBay's blog pages have a left column that further subtracts from the total page, so there may be even less real estate to work with. Pictures that are under 600 pixels wide - and better yet, under 500 pixels wide - will work best.

 2.  Breaking up your Page

A page should not run on and on. A page is easier to navigate if it is broken into groups of ideas, or sections with headings, making it easier for the viewer to skip around to the areas that most interest them. A page can be broken with titles (as with this page), horizontal divider lines, photos, tables, or colored sections.

The nature of a blog makes it much easier to comply with this rule. Simply use multiple posts to section off your text when expressing multiple ideas. If it is important to put a lot of content in one post, then use headings or photos, where you can, so that the reader has a visual cue to help keep their place if they want to skip back and reread something.

 3.  Photos

Photos can add tremendous value to any page.  However, eBay does not currently host any photos for your blog posts. To use photos in a blog, they must first be hosted online where they can be seen by others. Frequently your own internet service provider offers free web space along with your subscription. Alternatively, you can use eBay Picture Manager or an image host to store your online photos. Fortunately, viewers can not peek into your home computer to see photos, so that is why online hosting is necessary. This page may help you understand photo hosting and locate a host if you don't already have one.

 http://www.isdntek.com/demo/hosting.htm

In considering photos for your blog, keep in mind that some users are on dialup, and too may photos, or photos that have large file sizes, may make it difficult for them to enjoy your page. Ebay photos that are typically seen at the bottom of auctions are compressed and sized for optimal viewing by everyone. The files are usually around 25K bytes in size, and are quick loading.

This page may help with sizing photos:
 http://www.isdntek.com/demo/merrypicprep.htm

 4.  Fonts and Lettering

Some people have a huge variety of fonts installed on their machines, but most users only have the handful of fonts that came with their computer. A viewer can only see the font styles that are actually on their own machine, so it is fruitless to design a page using spiffy fonts that others can't see. eBay's page-designer (the blog editor) provides the basic fonts that almost all viewers can see.

What happens if you use a font style that no one else has? Each browser has a default font setting that is initially set to Times New Roman. If the viewer never changes that setting, your unique font will be seen as Times New Roman. The fonts below are the most common. All the styles on the left should match those captured in the image on the right.

Coded Fonts	Screenshot
Arial Times New Roman Verdana Courier Comic Sans MS Trebuchet MS Georgia

 5.  Text Colors and Sizes

When users first discover that they can add color to their text, the rainbow effect follows. It's fun to play with and exciting to see mastery over the results. However, once the discovery phase has passed, there are a few tried and true guidelines. Color should be used to help the reader navigate or pass through a transition in content. Two or three font colors are the maximum one should use on a page - one color for titles, one for body text, and a third for highlights or a change in theme. Colors have a brightness to them, and the eye instinctively goes to the brightest color first. Therefore, you don't want your "fine print" to be in the brightest color.

The size of your text is also important. Headings should be big enough, or in a different color, so that they stand out against the rest of the text. Just like having too many text colors, one can have too many sizes and too many font styles. Stick with just a few basics on your page. Change the size, color, or style only when it is important to emphasize or otherwise convey meaning.

 6.  Paragraphs and White Space

In advertising, white space is king. There should be a margin of empty space all around your page and text and between blocks of text. That empty space can be colored or have a little background design, but it should not clash with or challenge the text. Backgrounds that obscure text or make difficult reading, may deter viewers.  

Writing in paragraphs, and leaving gaps between blocks of text, provides a resting point that allows the reader to absorb what has been written before continuing to the next idea. Paragraphs should be short and contain a complete idea.

Paragraphs that are left-aligned or fully justified are far easier to read and comprehend than this paragraph.
Our well-trained brains have difficulty reading text that is ragged on the left, as with centered text or right-aligned text, and comprehension slows down. That is why only headings and small blurbs should be centered.

Another problem is text that is too wide. If the eye can not pan the text without moving the head, the text is too wide, and the reader can lose their place on the line. The solution is to bump up the text size, or decrease the page width, or create columns of text (as in magazines and newspapers).

 7.  Page and Background Colors

This is where you can get the most impact for very little design effort, but it is important to understand how the eye reacts to colors. The easiest reading is dark text on a light background. Light text can be used on a dark background if the light text is a little bolder than normal. There are certain color combinations that can not be used together because they cause eye-jitter (used on some pages to agitate the reader). Those are some complementary colors, or colors with the same intensity/brightness, like [ red ] red on green. Also be aware that color-blind people may not be able to distinguish between colors of the same intensity/brightness (red and green being the most difficult combination).

 8.  Borders

Borders are used to contain the content and the eye. White space can do that quite well, but sometimes you might want just a little more. Borders can range from a simple single line around a photo, paragraph, or page, to full-blown multi-layered picture-frames that inject the owner's personality or a seasonal theme. When getting extravagant, it is wise to keep in mind where you want to call attention - to the border or to the content. eBay blogs are designed with borders that handle this aspect nicely, so blog users will have few issues here.

 9.  Music

Background music is a theme that attracts many folks, and irritates others. Normally we advise against adding sound (background music) to an auction unless it is a sound clip of the item being sold. The reason is two-fold. The files are often quite large and cumbersome for dialup users, and secondly, they can be distressful to buyers who open such auctions surreptitiously at work, or when the household is asleep, or even when they have their own background music playing. Another sad fact is that not everyone appreciates your taste in music. So when users decide to put sound in an auction, we always recommend a play/stop button.

Blogs and ME-pages, on the other hand, are a different matter. In this venue, the author is presenting a more personal side, and originality and uniqueness are better tolerated. Keep in mind that a music clip needs to be a very small file; otherwise your viewer will be long gone before the music has even downloaded.

Only two types of code will work in Blogs, a clickable link and a tag that is unique to Explorer visitors:

Clickable link to a sound file that is hosted somewhere online.
  http://www.myhost.com/soundfile.mid">Click to hear it    

An online hosted sound file that loads with the page (only works for Internet Explorer viewers)
 http://www.myhost.com/soundfile.mid" loop=-1>

 10.  Whizzy, Twirly, Blinking Gizmos

One word - distraction. These gimmicks suck in the newly-initiated like a quicksand trap. They are so fun and mesmerizing when first encountered that we just can't go forward until we get one on our own page. But do you remember the tiniest thing about the page where you first saw one? No, the distraction was so overpowering that the page content was forgotten or totally ignored. Filling up a page with such gratuitous images and scripts can slow down page loading for your viewers, and some viewers find them so obnoxious that they immediately close the page.

But, while they may be a bad idea for auctions, they may be a lot of fun in a Blog or ME-page if used sparingly or with an appropriate audience. Remember that several blog posts will display at one time when a visitor looks at your most recent posts, and too much activity will drive some viewers away. However, if gizmos are limited to just a few every 5 or 10 posts, they should be just fine for most viewers.

  The Blog styles changed when eBay upgraded their code, and the BlogStyler is changing too.

  Some of you may have noticed that eBay changed the blog code two weeks ago and your pages may look just a tad different. The BlogStyler is undergoing revisions to keep up with those new changes. The most recent upgrade restores some of the colors and fonts that were altered by the recent code changes. And some of eBay's code changes allow more features to be added.

  For instance, if you update your stylesheet after 03 Sept 2006, you will be able to use the Quick Button  maker to add button links to your other eBay pages.

Would you like more visible links in your Blog or Auction pages to help direct users to your other eBay pages or to your website? The Quick Button Maker will create CSS buttons without images to host, yet they look like real buttons.

The   Quick Button Maker  will create a variety of different button styles for many different eBay pages. Just click the style you want, add a color, click the eBay pages you want on buttons, and then add your eBay user ID. The buttons can be copied directly off the browser page to paste into the Blog's RichText editor, or the code can be copied and pasted directly into the HTML source code screen of the editor. 

 http://www.isdntek.com/tagbot/qbutton.htm

  

A whole group of buttons will share one CSS style block, making it easy to hand code more of your own button links to the group. The style blocks are encoded in such a way that you can add a different style to each blog entry without conflict. Style blocks work very well with Internet Explorer, but they will be stripped out if trying to re-edit a blog post in Firefox/Netscape. Style blocks are generally compatible with Auctions, Store pages, ME pages, Blogs, and websites. 
 
There is also an option to use inline styles so that you can mix and match different styles or colors of buttons in the same area, and each button will stand on its own. This method overcomes the blog re-editing issue that may arise in FireFox Netscape. These buttons are compatible with Auctions, Store Pages, ME pages, Blogs, and websites, and are what you see in this post. 
 
And finally, there is a plain text option that can be used just about anywhere that plain links are allowed, like chat boards, Guides, and all of the other previously mentioned pages. 

http://www.isdntek.com/tagbot/qbutton.htm