codescripter

Thanks for all the fish!

2006-03-23T07:32:00.000-06:00

I'm finding I don't have the inclination to keep this blog going, but I'll set it up as an archive, since there is some useful info buried in here.

For Your Viewing Pleasure

2005-12-27T14:48:00.000-06:00

More and more of us are dropping our old CRT monitors off at Goodwill and buying flat-screen monitors. The prices on LCD monitors (flat screens) have come down to a pretty reasonable level, and you can reclaim a square foot of desktop space, which I know I could use.

The problem is people often make the switch to flat screen --

(Distracted just now as three people from my team walked through the PC Lab, saying, "Miriam said it was PCI express." "No, it was standard PCI." "PCI express, Miriam said so." And then they walked out. I'm not sure they even saw me. I feel both famous and invisible. Anywho, back to our discussion....)

When you make the switch to a flat screen (LCD), it is important to make one small change in your computer display settings. Microsoft Windows enhances screen fonts by, in effect, smoothing the jagged edges. There are two technologies used for this purpose. In Windows, one is called "standard" and the other "ClearType." Standard works fine on most CRT monitors and is enabled by default in Windows XP. But ClearType is much better for flat screens. Most people will find reading from the computer screen easier once ClearType is turned on.

Here is a step-by-step on how to do that in Windows XP. Go to Start - Control Panel and locate the icon for Display. (If you are in Categories view, click on Appearance and Themes and then Display)

Now click on the tab for "Appearance"

Next, click the button on the right for "Effects"

Check the box to use "ClearType." Your options are

1. Leave the box unchecked and use basic screen fonts with no smoothing;
2. Check the box and use Standard smoothing (recommended for standard monitors)
3. Check the box and use ClearType smoothing (recommended for flat screen monitors)

Now click OK three or four times and look at your screen. Bring up a website with nice screen fonts like this one. (Heh heh) You should be seeing smooth, readable fonts.

For more information on Clear Type, read Microsoft's article"What Is Clear Type?".

Site Meters, Stats, and Evolutionary Blogging

2005-12-05T12:07:00.000-06:00

It starts out very simple. You create a blog. You post something. You wonder: Is anyone reading? So you add a site meter to check who is checking out your blog.

One of the most popular site meters is called, in fact, Site Meter. Here are the screens showing the sign up process to get Site Meter onto your blog. Click on each image to see it larger (and clearer)

Note that you don’t really have to tell them your zip code or age. Just leave those blank.

You will be required to say “Yes” to at least one bogus free stuff offer. Just click “Yes” and ignore the pop ups.

Check your email for your password so you can log in and complete the process.

Site Meter will even add the HTML code to your Blogger site automatically, if you so choose. You’ll input your Blogger ID and password and it does the work. Then you republish your blog to see the changes. (By default, it will put your Site Meter icon in your footer. You can move it to your sidebar like I did.)

As you can see, I now have a Site Meter on CodeScripter.

One advantage of using Site Meter is that the statistics from Site Meter are read by “The Truth Laid Bear.” If you enjoy a little competitive blogging, you can see your blog rising and falling on the evolutionary ladder of NZ Bear. Look at the leaders in site traffic! Wow, humbling, isn't it. I don’t take it all too seriously, but it’s fun. Log into Site Meter and go to your Manager. Check that "Privacy" is set to Normal in order for TTLB to read your hit counter.

One of the disadvantages of using Site Meter is it doesn’t include the lists of Keywords used in search engines (such as Google) that have led people to your site. This is really one of the most interesting things to watch. For that I use Stat Counter. Next post will go over that one.

Using an Image as Blog Title

2005-11-17T15:12:00.000-06:00

Most blog templates pull the Blog name from your Blog settings and pop it onto your blog web page. It becomes the Blog Title, the very top of your blog page.

For my blog title, I used an image. Here is the code used (currently) on CodeScripter for the title:

< h1>
< center>
< a href="http://codescripter.blogspot.com"
img style="border: 5px solid #F2CE82;"
alt="Chaim made this picture!" title="Chaim made this picture!"
src="http://photos1.blogger.com/blogger/2904/
755/1600/codescripttop.jpg"/>
</a>
</center>
</h1>

You probably recognize the familiar "href=" which sets up a reference. In this case, the reference is to the blog itself. That way, clicking on the image takes the reader to the main page of the blog. This behavior will be consistent, no matter what page of the blog you are on. The image thus serves as a link to the blog.

The image you see is one that Chaim made and I uploaded to a CodeScripter post. I saved the post as a draft. That gave me access to the image without having to borrow anyone's bandwidth. (Well, I'm using Blogger bandwidth, but -- for some reason -- that's free!) The location of the image is http://photos1.blogger.com/blogger/2904/755/1600/codescripttop.jpg. That's what I refer to in the template.

The "center" tags make sure the image stays centered on the page, no matter how the page is resized. Or, at least I hope it does.

The < h1> tags are like the bread that forms a sandwich. The kind of sandwich you'll eat depends on what you put in between the bread. The kind of title you'll get here depends on what you put in between the h1 tags. Instead of text, I filled my h1 tags with a picture. I made an image sandwich. Not as tasty as pastrami, but eye-catching.

The title and alt settings create the little message that pops up when you move the mouse over the picture. (I'm not sure which one does that -- title or alt. Hmmm.)

But there's more! The image has a border, there is a background behind the image, and that background (box) has a border too.

So, what's all that about?

You can see in the code that I set a border for the image using the "img style=" tag. The border is 5 pixels wide, color F2C382, which is a kind of tan color. It's solid, not dashed or double or dotted. Thus the code is

"img style="border: 5px solid #F2CE82;"

Finally, I also set up a style for h1 - the header. I did this in the Style section of the template, between the two < style> < /style> tags.

That setting is:

h1 {padding:25px;background-color:#405F80;
margin:10px;border:4px double #663300;}

This code establishes that there will be "padding" -- space between the image and the edge of the element, the border. I then set a background-color to fill that space with the color 405F80 (blue). I added a margin so the header element wouldn't bump against the side of the browser window (ouch!). And just for kicks, I gave it a brownish (663300) double-lined border.

And that, folks, is the picture in a frame in a box with a frame that you see above!

A box in a box in a box in a box

2005-11-16T12:32:00.000-06:00

This book I'm reading now -- HTML Utopia: Designing Without Tables Using CSS -- is giving me a much better understanding of the CSS code used to create Blogger templates. It's all about boxes. Every major element on the page is just a box. You have to arrange the boxes so they play nice together.

This picture, from W3Org, diagrams it all quite nicely:

The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).

You can think of any web page as a set of boxes.

But what keeps the boxes from overlapping or bumping into each other?

"Padding," "border" and "margin" settings are part of the secret.

It gets confusing because in CSS there are several elements that define the boxes and add to their width. If the content in your box -- your main column, let's say -- is 440 pixels wide, then that box is 440 pixels wide, right? Wrong! To get the full width, you have to include content, padding, and border. Also, don't forget the margin, which is the space between elements on the page.

Content is the image or text inside the box.

Padding is the space between the content (text or image) and the border of the box.

The Border is a line, visible or invisible, that marks the edge of the box. A wide border adds to the box width.

Margins are the space between different boxes or boxes and other elements of an HTML page.

Remember that padding is the space inside the box (between content and border) and margin is the space outside the box (between one box and another box; or between one box and the edge of the browser window).

Look at the border and padding settings on your template and play with them a bit. The structure of the web page will become more apparent to you.

Next: Positioning. "Hey, stay on the right side of the page! Why are you floating over there! Get back here!"

New Toy - Color Scheme Designer 1.0b

2005-11-08T19:16:00.000-06:00

While I usually run in fear from any software whose version number is "1.0" -- even with a little "b" next to the zero -- I actually like this little freebie. It's a Freeware program to help you design a color scheme for your blog or website. I used it to come up with the new palette for my mirty blog. (I'm still not sure I like that particular set of colors though. May be too much like a rainy day.)

You can download the Color Scheme Designer 1.0b from Snapfiles.

I'm getting a real hankering for rounded edges, so I think that's the next thing I'll blog about here....

Girth, and Other Sensitive Topics

2005-10-26T18:02:00.000-05:00

Your typical computer screen is wider than it is long; yet most blogs are longer than they are wide. They use narrow columns and require you to scroll down constantly. Meanwhile, all that real estate on either side of the text goes to waste, like the "county strip" that surrounds suburban yards.

There are ways to utilize more of the horizontal space, but it gets tricky. I'm finding that mussing with margins is one of the surest ways to mess up your blog. But it is also a sure-fire way to make your blog more readable. No reward without risk.

The template's CSS code allows you to set the basic structure for your blog very simply. In the case of this blog, I deleted all the existing formatting code -- contained at the top of the template between the tags < style type="text/css"> and </style >

I replaced it with this quite simple structure:



  #main {
    width:950px;}


  #content {
       width:80%;
       float:left;
       padding-right:10px;
       margin-left:15px; 
       border-right:1px solid black;}


  #sidebar {
      width:15%;
      float:right;
      padding-right:15px}


  select {
      width:100%;
      color:#666;
      background: #e0e0e0;}

_____________________________________

I then went through the rest of the template and added the divisions:

Each division has to open with the div id tag -- < div id="main" > , < div id="content" > , < div id="sidebar" >
-- and close with a div closing tag -- < /div > . Be sure you nest the Content and Sidebar divisions within the Main division.

As you can see, I set a wide area for the main page -- 950 pixels. That may be too large. To tell you the truth, I haven't tested this one much, but in theory it would be good to test on Netscape and Firefox as well as Internet Explorer.

Within that wide main page, I've alloted 80 percent of the space to posts and 15 percent to the sidebar, with padding to keep the margins neat. By using percentages instead of pixels, it gives the page some ability to resize its columns when the window is resized. Also, the "select" elements are set to utilize 100 percent of the sidebar area, stretching or narrowing to fit the space available. (That way, the drop-down menus don't send the sidebar toppling to the bottom of the blog.)

There is always some finessing required, but this one might not be too bad and is certainly simple.

Try This Out, Maybe.

2005-10-12T11:36:00.000-05:00

This Site - http://www.echoecho.com/tooldropdown.htm - Has a tool to create drop-down menu links to external sites. It's very easy to use. Part of the resulting code is a script that goes into the Header section of your blog template. The other part goes on your sidebar (or wherever you would like the menu to be seen).

My hesitation is that I don't quite understand the script, and oddities began occuring on my blog after I added it to the template. (The page didn't load correctly.) So I link to it here with that caveat. Later, I'll try to parse the script and figure out exactly what it does.... Later!

Your Content Goes Here

2005-10-07T14:20:00.000-05:00

Gosh, you guys are so good. I'm seeing drop-down menus for Previous Posts and Archives sprouting up like dandelions everywhere.

Now we're moving on... to customized drop-down menus. Blogger is sadly one-dimensional. Flat. We want categories, indices, complexity. We shall have it.

For examples, see the sidebars of the following sites --

Elie
Akiva

The code is simple, but requires maintenance to keep the indices up to date. The basic code is similar to what we covered in a previous post. You set up a SELECT statement with OPTIONS. But instead of using Blogger Tags (variables), you will input each option.

Code from my blog template looks like this:


< SELECT NAME="Funnymenu" onchange=
"document.location.href=this.options[this.selectedIndex].value"; > 
< option > - Life is Funny-</option > 
< option value="http://mirty12.blogspot.com/authority.html" > Authority</option  > 
< option value="http://mirty12.blogspot.com/culture-clash.html">Culture Clash </option > 
< option value="http://mirty12.blogspot.com/doggerel-of-day.html" > Doggerel </option> 
< option value="http://mirty12.blogspot.com/pickles-for-me.html" > Pickles for Me </option >

</select >

The code above creates the "Life Is Funny" menu at my Mirty blog.

The structure is simple. Each menu item has an opening OPTION VALUE tag, followed by a link, followed by text, and lastly, a closing OPTION tag. All the OPTION VALUE tags are nested within the opening and closing SELECT tags.

< option value="link to your post" > This is what people will read </option >

For your post link, use the URL that goes directly to the post itself. You can usually find this by clicking on the little date/time stamp at the bottom of the post. (If you hover your mouse over it, the little pop-up tip says "Permanent Link")

Good luck. Remember the formatting tips and make it look slick!

Technorati Tags - code html

Wingtips vs. Bunny Slippers

2005-10-02T14:57:00.000-05:00

In the previous post, you used code to set up drop-down menus with the SELECT function.

But the drop-down box created has no width limit. It will stretch to fit the length of its options. That is the default behavior. Thus if you have long post titles, the "Previous Posts" menu may stretch out your sidebar and fall to the bottom of the page.

To remedy this, use CSS (Cascading Style Sheet) code to set width limits for all drop down menus. CSS code is usually found at the beginning of the template, or near the top. CSS settings apply to the whole page.

The CSS code shown below will limit the width of the drop-down menus to a modest 200 pixels. Most Blogger sidebars are 240 pixels wide, including margins, so this code will work nicely with most templates.


select {
width: 200px;
color: #666;
background: #e0e0e0;
}

The code means that when the SELECT element is used, the formatting indicated between the curly quotes will be applied. As well as setting a standard width, it creates a customized color scheme, with a color for text and a lighter background.

What colors are #666 and #E0E0E0?

#666 is an RGB color name. RGB stands for the Red-Green-Blue color palette. More on that at Wikipedia

But #e0e0e0 is in the more-commonly used Hexadecimal code and you'll find it here.

Now you have set formatting for all SELECT statements -- i.e., all drop-down menus -- on your webpage. Your blog gains a polished and professional appearance when formatting is consistent. That's the advantage that CSS has over plain HTML. It's the difference between wearing shoes that match and shoes that don't match. Or the difference between wingtips and bunny slippers.

More on CSS here

Technorati Tags - code html CSS

Drop Down and Give Me Twenty

2005-09-29T05:02:00.000-05:00

Ah, my little ones, grasshoppers... wisdom you want? Knowledge you seek? Syntax I invert to sound wise?

What you need ... what you want... what you seek .... can be summed up in three words: drop-down menus!

Open your Blogger Dashboard. Click on Change Settings. Select the Template tab and "Edit Current." And before you do one more thing, SAVE A COPY of the template. Yes, back to Lesson One. Learn it well. Grasshopper.

Moving on. You've saved a copy of your template. You have your Blogger Template page open.

Locate the Sidebar content. This is assuming you have a sidebar. Not all templates do, so on some blogs (this one, for instance) the sidebar content is just placed at the bottom of the page, and will be found at the tail end of the template.

Most Blogger templates come with a default setting for Archives and Previous Post Items. You will need to peruse your blog carefully to find the default code.

Since templates are created by different authors, they are not consistent. Look for a section named something like Archive Links. Note that these areas will generally start with the tag that indicates a comment (as opposed to active code). Comments are used to help organize the template. They mark sections, like so:



Blogger has certain variables it uses, such as $BlogArchiveURL$ and $BlogItemPermaLink$. These Blogger Tags are shortcuts used to pull data from your blog. We'll start by utilizing the existing Blogger variables and set up two drop-down menus: One for Archives and one for Previous Posts. In a later lesson, we'll create our own customized indices, by topic.

Let's get started!

Step One -- Delete your DEFAULT ARCHIVE CODE, which generally looks like this:

<BloggerArchives> <a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a> </BloggerArchives>

Step Two -- Replace it with the DROP-DOWN MENU ARCHIVE CODE:

<select name="archivemenu" onchange=
"document.location.href=this.options[this.selectedIndex].value;">
  <option selected>- Archives -</option>
  <BloggerArchives>
  <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
  </BloggerArchives>
</select>

You should be able to cut & paste the lines above into your template.

Now use the PREVIEW button to see your lovely new Archive menu! Yay! Ay yi yi yi yi yi (stop me now, please)

You can do the exact same thing for the PREVIOUS POST links. Delete the default code and paste in this:

<select name="previousitemsmenu" onchange=
"document.location.href=this.options[this.selectedIndex].value;">
  <option selected>- Previous Posts -</option>
  <BloggerPreviousItems>
  <option value="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></option>
  </BloggerPreviousItems> 
</select>

Notice the language of the drop-down menu code. You have a SELECT tag with OPTION values. Those are the building blocks we will use to create your custom topic indices as well. That's in the next lesson.

QUIZ:

What function do the SELECT tags serve? For reference, read HTML Dog's explanation.

What do you call something like $BlogItemPermalink$ between the two dollar signs? I would call it a variable, but Blogger calls it a Blogger Tag. Weird.

How did I finally, finally figure out how to put code snippets into my posts? I could tell you, but I would have to kill you. That's for much much later.

What It Is

2005-09-23T20:18:00.000-05:00

To understand how a Blogger Template works, you will use the backup template you created in Lesson One.

Open the Notepad file. I hope you saved it with a descriptive title like MyTemplate9232005.txt. Because if you saved it as Stuff.txt, oy veh, I don't know what I'll do with you. Anyway, open MyTemplate9232005.txt in Notepad.

click to enlarge

Click on File and go to Save As...

You are going to save the template in HTML format, in order to view it as a webpage template. Which is what it is. You will use the drop-down menu to set "Save as type" to All Files, and then type in html as the extension on the file name. So you are creating a copy of MyTemplate9232005.txt with the name MyTemplate9232005.html. The file will contain the same data, but will behave very differently. The extension -- the letters after the dot -- determine how a file behaves.

click to enlarge

I hope you are making sure you know where you save your documents. You may want to save them to the desktop for quick access. Create a folder named "Blogger Files" and save them all in there. (A good desktop is not cluttered. It has only the essentials: Asteroids, Tempest, Freecell and a working files folder.)

Now you have used the Save As function to save your template text file as an HTML file.

But how will you know which is the text file and which is the HTML file? Windows, by default, hides file extensions. But your text file with have a notepad icon - the page with lines; the HTML file will have a browser icon, typically the Internet Explorer e on a white background.

Double-click on the HTML file to view your Blog template in its purity -- just form, no content.

do I need to say it again?

As you can see, Blogger templates are web pages. They are web pages that use variables to plug in content. The variables are between the dollar signs. In future lessons, you will learn exactly what these variable do and how to tweak or replace them.

How to Escape

2005-09-23T18:34:00.000-05:00

Mistakes happen. This is Lesson One.

You are going to customize your blog template. But first, you will make a backup copy of your current template. That way, if you accidentally destroy the template, you can easily restore it. In this way, you will code fearlessly, knowing you can escape from bad situations.

Go to your Blogger dashboard -- http://www.blogger.com and sign in. Click on the option to change settings on your blog. Click on the tab for Template. Now you see a bunch of gibberish that is your template. It won't be gibberish for long. I'll teach you what it means.

BUT FIRST

You will make a copy of this mumbo-jumbo.

Open the program called Notepad. This is a text editor included with Windows. You may have never used it before. Open it by clicking on your Start button (bottom left-hand corner) and selecting "Run..." In the Run line, type in Notepad and hit Enter.

Or, you can go to Start - All Programs - Accessories - Notepad.

Gets you to the same place, but it is good to know how to use the Run line. Get familiar with it.

Now, back to your Blogger Template window. Place your cursor anywhere within the template body (where the text is). Right-click and choose "Select All" from the short menu. Now the whole text is highlighted (black). Next, right-click and select "Copy".

If you don't like using the mouse, the keys to use are Control-A to Select All and Control-C to Copy.

You do know that you can click on this image to see it larger. To enlarge to full size, click on the square that appears in the lower right-hand corner of the image after you click on it. If you can't see the square, hover your mouse around the top left-hand corner and it may reappear.

Go back to your Notepad window and place the cursor anywhere in the blank area. Right-click and select "paste". Or use Control-V.

Now your template is pasted into a notepad document. This is the correct way to save your template. Do not put it in Word or another file format that adds codes and formatting. Notepad is clean. It will not add anything to your template.

This image can be seen full size too

Save your notepad document. It will, by default, be saved as a text file with the ending TXT. This is good. Save it to a location you will remember. You are going to need it later.

Technorati Tags - code html