A Few Good Blogs

Grab Bag

What they say about us...

+

+

+

+

+

+

Justin
Thanks for the American Sign Language (ASL) links - ASL Fingerspelling and ASL Fonts

On the serious side of blogging comes the most important post I've seen - ever.

Walk outside and take a picture

The Glow Filter
STYLE="filter:glow(color=mediumpurple)"

It said: For the moment I seem to have run out of things to do to my templates and thus can no longer put off writing.

We read: For the moment I seem to have run out of things to do to my templates and they can no longer pull off my writing.

Have you noticed that when one changes templates the writing can look like it came from a different person. Tiny fonts from the young, pink from the young at heart, large shouting text from the confident. Warm colors that go forward change to cool colors that go back.

The presentation of the text is more than making it pretty. The adornment of text, or lack thereof, says something about the author. What does it say? Dunno. Let's go glow.

GLOW FILTERMEDIUMPURPLE

STYLE="filter:glow(color=mediumpurple)"

You don't need images for this effect, just a STYLE tag.

Copy and paste this in your Blog or Web page.

<TABLE STYLE="filter:glow(color=mediumpurple)">
<TR><TD>
Consider the lillies
</TD></TR>
</TABLE>

It will look like this.

GLOW FILTERMORE COLORS

Copy and paste this in your Blog or Web page.

The CSS Filters are a powerful way to add punch to a page without graphics. The glow filter is fun to with. Add the STYLE="filter:glow(color=mediumpurple)" to an image, a table, a div, or to the entire body or your page.

Some bloggers are great writers and don't need to adorn their writing with little square images, filters, or fluff.

Horizontal Scrollbars

Watch those Image Widths
We have all created a post that results in a wide page or column. Right? In the blogging arena where most of the pages are from templates the source of the problem is nearly always an image that is too wide to fit.

The browser kindly stretches the width of the page to fit the image and displays horizontal scrollbars. Ouch! Now the entire page is aligned too wide.

Reduce the Width of the Image
It's not always easy to figure out the intended width of a column. We saw one yesterday that uses a bar image to define the width. So to reduce the width of the column one has to reduce the width of the bar image separator.

Measurement Guidelines Vary
Fitting your page in the visitors browser isn't always easy, especially when your visitor has screen settings of 1600x600 (that would be us on a dual monitor). Fluid pages, with widths expressed in percentages, don't always detect the actual display size and fixed sized pages are sometimes too wide for our 800x600 display.

The solution isn't always easy and there isn't a magic width that works in all browsers and looks good. The table above is a good start.

Quick CSS Style Fun
Using SPAN

Here's a grab bag of copy-and-paste effects. It takes just a tad bit more than plain HTML.

<span style="" 
onmouseover="this.style.color='red';" 
onmouseout="this.style.color='';">
Hover here for red.
</span>

<span style="color:brown;">
This is brown. 
You can use any of the named colors.
</span>

<span style="background:yellow;">
A yellow background is here
</span> 
but the rest is normal. 

 
<span style="letter-spacing:7px;">
And, here we are using 7 pixels between 
each letter. 
</span>

 
<a href="style.html" 
style="text-decoration: none;">
This link is not underlined
</a>

Steal This Code!

Just yesterday Shirl stole our grapes, fp took our words, and and today we are taking brykmantra's shirt. At the same time, WealthBondage is over there stealing ideas we haven't even thought of yet.

Now it's your turn. Steal this code!

Copy and paste this in your Blog or Web page.

It will look like this.

Shake it up, stir it, or reword it.

FREE TOOLS

Connection Speed
Site Popularity
HTML Validator
CSS Validator
Link Checker

Stu sent us the link to this Validator. It's similar to the W3.org Validator and the Netmechanic HTML validator. It's in German.

Do you think it is telling us that Mandarin is too big?

+ Element ist gr�sser als 15K.
Hier lohnt es sich eventuell die Datei
zu �berarbeiten. Einfach Element
anklicken um eine Image-Komprimierung
durchzuf�hren.

Truncating Overflow

This is the single most important code that we use.

Note that in this example, long URLS would result in expanding a column on the page, and clobbering the intended layout.

Solution: Hide Overflow and Truncate with Ellipsis

The code looks like this.

overflow:hidden;text-overflow:ellipsis"><nobr>

That's the secret ingredient. To learn more about truncating, and to get the copy-and-paste code go to the refer.html page.

Want to laugh? Click here for a hilarious post at Plato-Shrimp today.

Waiting for the tow truck. We don't even have a car in the image gallery.

Running Slow Today?

If your blog is running slow today it might be the referrer script if you are using the Stephen Downes version. We just had to take it out. It's one line of code so it is easy to remove.

Code on Another Server

Any code that runs on another server will slow you down and sometimes bring your place to a screeching halt. Here at Mandarin it is usually the Haloscan comments or the referrer script. One notices the slowdown on a Tag Board right away so it gets moved to another page.

We use our link to the custom version of the referrer script to help us figure out which piece of code is causing the slowdown.

Sour Grapes

CSS Instead of Graphics
CSS Text: Shadow and Span

Shadow Filter

Dude, you don't need an image. The shadow filter frees you from the load time of a graphic image. For this effect we added float:left; and padding:10px; to a table. The result is that the text after the shadow filtered text will wrap around the word or title that we want to stand out.

Copy and paste (or type) this code in your Blog or Web page.

<table width="100" 
style="filter:shadow(color:black);
float:left;"><tr><td style="font-weight:bold;
font-size:16pt;font-family:georgia;
color:orangered;
padding:10px;">

YOUR SHADOW TEXT GOES HERE

</td></tr></table>

The text we want to wrap 
around the shadow filter 
goes here.

Or, copy and paste from here.

It will look like this.

Bashing Americans, Still?

What is your country doing for the world? Tell us. We really don't know. If you wouldn't mind, could you just tell us a few positive things that you or your country are doing to make the world better?

No fair stereotyping all Americans and bashing us as one. Are we the only easy target? Fair game for criticism? Is there anything positive going on in your part of the world?

If you came here for a dotted border here it is.

The code looks like this.

 
<span style="padding:5px;
background-color: navy;
border:2px dotted maroon;
text-align:center;
float:left;">
<img src="images/sorry.gif" 
width="97" title="What? You expect 
me to apologize for being American? " 
height="121">
</span> 

Put the code all on one line. The Boxes and Borders pages have easy copy-and-paste code.

We are a somewhat typical American family. We get up in the morning, drink coffee and then go to work. Our neighbors and coworkers don't necessarily speak English, but they are Americans. A common question is "what are you?" meaning what nationality. We are Americans, but here in West Sacramento, California the diversity is what makes life so interesting. Nearly everyone here has roots in some other country. I know very few native Americans, although my children's ancestors did indeed live here before California was a state.

We aren't perfect and we all do the best we can do. We don't talk about your country much, not in a negative tone. We may visit you and you are all so polite, but in the blogs we are slammed repeatedly. It's getting old.

When you slam Americans are you slamming my dentist from Iraq? Or my neighbor from Lebanon, or the family next door from Mexico, or our friends from Russia who are proud Americans. Are you slamming my coworker from Greece? He too is an American citizen. When you slam Americans are you targeting the local farmers who came here from Japan? The Americans who walk down our street in the evening dress in their native clothes, holding on to the traditions of their birth country. They too are proud Americans flying the flag. Maybe you don't know who we are. We are Americans. May peace be with you.

<ACRONYM>

Here's the code with the color and font hand coded. Copy and paste (or type) this in your Blog or Web page.

<span style="color:#0000ff;"><EM>
<ACRONYM title="ToolTip Here! A footnote appears 
as a tooltip when you put the cursor on the 
note indicator">[ToolTip Here!]</acronym></EM></span>

It will look like this.

Now, hover your mouse over it to see the tip.

Grab a Surprise Image

Free Surprise Images
We store small images that you can link to or right-click and copy. You don't need an image host to put these images in your Blog or Web page.

Insert the Surprise Image

The code to insert the image we named v109.gif looks like this.

<img 
src="http://www.mandarindesign.com/images/v109.gif" 
width="50" height="50" >

Copy and paste (or type) this in your Blog or Web page.

It will look like this.

You can change the number 109 to any number between 1 and 110. Easy copy-and-paste code is in the FAQ page and the Gallery page.

Thank you Lynn for letting us cut little squares out of your awesome photographs.

Blogging from Behind the Great Firewall of China

Dual Monitor Backgrounds

Someone searching for dual monitor backgrounds and screen savers and landed here. This World Map looks awesome as a dual monitor background. We are always on the lookout for good dual monitor screensavers and backgrounds so let us know what you find.

How Fast Does Your Page Get Fetched?

Fetch time from 0.1s to 28.5s
Link Checker will check each link on a page and tell you the fetch time. If you are linked here at Mandarin enter www.mandarindesign.com/blogger.html in Link Checker or click here to see how fast or slow you get fetched compared with the other links on this page.

We hoped that it could tell us the page load time. It doesn't do that exactly but we were able to identify that the slow fetch was the Haloscan comments script.

Two Boxes

Copy and paste this in your Blog or Web page.

<span style="width:150px;
background-color:
beige;border:2px dotted black;
padding:10px;">
YOUR TEXT GOES HERE 1</SPAN> 

<span style="width:150px;
background-color:
beige;border:2px dotted black;
padding:10px;">
YOUR TEXT GOES HERE 2</SPAN> 
 

Put the code on one line. It will look like this.

Got Five Minutes?

Free Tag Boards and Blabber Boards

ZonkBoard is a free blabber board (tag board) made specifically with Web Blogs in mind. It's simple to use and set-up is simple!

Okay. Let's see how long it takes to get it going.

1. Sign-up at ZonkBoard

 
    username: mandarin
    password: ***** 
   

2. Get the HTML code. We highlight the Version 1 Code and copy it to our page.

Is that it? Are we done? Yes. In five minutes we are up and running.

It slows the page down so we just removed the live Zonkboard. We have too much code running here already. We keep a live tag board in the Interation is Free article.

Google Tips and Tricks

Images Tab

Site Images

1. Click on the Images tab in Google.

2. Enter inurl:mandarindesign site:www.mandarindesign.com in the search box.

Google will show you all images linked to mandarindesign.com.

Google Tips and Tricks

Images Tab

City Images

1. Click on the Images tab in Google.

2. We entered pictures Sacramento in the search box and found these images of our city.

Google Alert

GoogleAlert lets you track anything on the Web automatically. Enter up to 5 simple or advanced Google searches.

We set up a search for the exact phrase Mandarin Design, and another to find pages that link to www.mandarindesign.com/blogger.html

Email, Link or RSS

GoogleAlert lets you email the results daily, create an HTML link, or create a custom RSS feed.

Turning the Comments Inside Out

We asked and you answered. Thank you.

Frequently Asked Questions (updated)

How to turn your blog lights out?

<BODY STYLE="filter:gray">

This is one of those filters that makes us wonder. How would anyone ever use that? So we used it.

The Great Blackout of 2003

We're turning out our lights for all of you in the Northeast US and Canada who are without power tonight. Be well and stay cool.

Mandarin Quigi Board