Recently in HTML and Javascript Category

This isn't really a tutorial since I'm just advising you to install a plugin and giving you some reference html to make it look a tiny bit nicer than it does by default. However I still think this might be useful information for at least a few people so here we go:

Social bookmarking sites like Digg, del.icio.us, StumbleUpon and countless others are very popular with blogs and websites. Becoming popular on one of those sites attracts serious traffic and let's face it, most blogs and websites are always looking to boost traffic. So making it easier for people to "add to del.icio.us or "digg this" seems to be a good idea. By making it easier I mean we'll be adding links for several of the most popular social bookmarking tools to all existing and future entries for a given blog.

To accomplish this we're going to use the Promote This! plugin by Byrne Reese. Download and install the plugin per the directions. Once you've installed the plugin it's time to insert code into the Entry Detail template module. The Promote This! site gives the example of the code for adding a "digg this" link. If you follow that format you'll get a nice text link that works just fine. But if you want to jazz it up a tiny bit you can add the logos for each of the social bookmarking services you want represented.

I post a lot of thumbnail images on Consuming Louisville that link to very large full size images. By default Movable Type doesn't add scrollbars or allow resizing for the popup windows created for images. That's a problem because those large images of mine get cut off with no way to expand the window or scroll to see the rest of the image. So of course I needed to turn on scrollbars and turn on window resizing for image popups.

Like with changing the default image upload location I wish that there was a simple way, within the Movable Type application, to do this but there isn't one as far as I know. Instead we have to do a little monkeying around with the Movable Type application code. But, again like with changing the default image upload location, the is actually quite simple and only requires editing a single line of a single file.

Updated

Suppose you change the name of a file. But instead of deleting the old file that is on your server (that may have many sites already linked to it) you want to forward anyone who goes to the old file URL to the new one. There are three basic ways to do this - with PHP, htaccess, or a Meta Refresh tag.

PHP
If you have php enabled on your site and server, you can use the following code to redirect a visitor to a new page:

You cannot do this method from within the Movable Type editing window. Download the file from your server using FTP software. Using a text editor (such as BBEdit for the Mac or Notepad for the PC), place the code at the very top of your page. Use FTP software to upload the file back up to your server.

Updated March 23, 2005

Once you are uploading images to your MT weblog with ease, you might on occassion want to wrap text on either side of the image, like so:

Placeholder Latin text - Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia pondo auri furatus e Capitolio tantundem inaurati aeris reposuit. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet.

To save space on your sidebar listing of categories or monthly archives, you might want to use a pull-down menu like so:

To do this for your category list, make sure that you have category archiving selected as an archiving option in your weblog config, and add the following code to your sidebar:

<form action="" name="pulldown1">
<select name="mypulldown1"
onchange="document.location=pulldown1.mypulldown1.options[selectedIndex].value">
<option value="">Select Category</option>
<MTArchiveList archive_type="Category">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>
</MTArchiveList>
</select>
</form>

If you have a lot of content - entries, categories, sidebar information - sooner or later things may begin to look a little cluttered on your weblog. One way to address this is to make some of your lists expandable and collapsible, as I have done with LMT's Table of Contents. There are probably many different ways to do this. I have found one method, based on Javascript, that is simple to implement and appears to work fine, from Bleeding Ego.

1. Upload listmenu.js to your server.

Copy the following script into a new file with a texteditor. Save the script as "listmenu.js". Upload the script to a location within the public directory of your server using an FTP program. (You can also find a copy of this script at Bleeding Ego.)

Updated August 28, 2005

Sometimes the most frustrating things for beginners in Movable Type turn out to be simple and painfully obvious, once you have figured them out. Adding links to to your first weblog or adding a link to an entry can be one of those things if you are not used to html.

Adding a link to an entry.

To add a hyperlink to an entry you need to write out the entire hyperlink tag. For example, if you want to add a link to Learning Movable Type to your entry, you need to type in the Entry Body the following text:

<a href="http://www.learningmovabletype.com/">Learning Movable Type</a>

Has it ever happened that you make a change to your default templates or stylesheet and suddenly your weblog doesn't look right anymore? Panic begins to set in as you quickly try to undo the changes that you just made, but it's still not working? A great tool to use to help troubleshoot problems like this is the W3C Markup Validator.

The World Wide Web Consortium (W3C) is the organization responsible for setting the HTML specifications and standards that browser developers use in their web browsers. If your web page "validates" then it should be able to be viewed properly in the major web browsers. If it doesn't validate, then the validator tool will list out all of the errors or inconsistencies of your code with the Doctype of HTML you are using, which in the case of Movable Type is XHTML 1.0 Transitional.

Once in a while you might just want to show actual code - HTML, PHP, or Javascript - in an entry you make in Movable Type. For example, say I want to show the A HREF tag and code to get to elise.com. It looks like this:


<a href="http://www.elise.com">elise.com</a>


However, if I simply type that code in while I'm writing the entry, the resulting page will not show the tags and code, but the actual link: elise.com.

So how do you display code in entries? There are several methods:

Sometimes you might want to link to a popup window from your blog. For example you can make your About page a popup instead of a separate page. Although using the target="blank" attribute in a hyperlink can generate a new page, using javascript commands for popups will give you more control over the appearance and location of the popup.