Normal America

Ok so the first thing I decided to add on this nice simple blog was a section to the right that led to some of my favorite podcast sites. Here's how I did it:

(Process works best if your using Moveable Type 3.2)
1.) Login to your admin side of your site.

2.) Under My Weblogs, click on the name of the blog your wanting to edit. In my case it was Normal America

3.) Under Configure , on the left hand side, click on the link that says Templates

4.) There should be a list of templates on the page that has just loaded. Left-click on the template link that says Main Index

5.) Find where it says Template Body, in the box beneath this heading is essentially the code of your template.

6.) Pretty much here is where you add the code. You wanna first decide where to put it, for the purposes of this example I wanted to put it in between the Archives and Recent Posts modules.

7.) I looked for the beginning of the Recent Posts module. Usually it's pretty obvious where it is, this is what the code looked like in my index template:

8.) Put your module before that code. The code for your new module will look something like the followiing

9.) Click on the Save and Rebuild button at the bottom and your done

I might post something else later on today, but I thought this might be something that beginning MT users might wanna know about it. Props to learningmovabletype.com which is where I got this info.

Ok so your pretty sure you don't have the ability to create thumbnails in Moveable Type, but you wanna. Well you've come into the same problem as me, lucky for you though I am gonna tell you how to install a thumbnailer.

Chances are if you go to SixApart they'll tell you to use Image::Magick. Forget THAT! A thumbnailer is a thumbnailer. In this situation we are gonna use something called Netpbm. Now again normally your hosting service should have this already but we're gonna assume they don't. This is gonna be a straight up local install on your own server space.

Click Here to see full tutorial

Click Here for the demo of the cool effect

The above is what I accomplished after messing around in javascript for a couple of hours. If you wanna learn how to incorporate the above effect into your Moveable Type Blog, keep reading.

1.) Create a folder named javascript on your server if you don't already have some folder you use to store javascripts on.

2.) Go to http://script.aculo.us/downloads

3.) Scroll down the screen and download scriptaculous

4.) After you have downloaded scriptaculous, unzip the file.

5.) The following files you need to copy from the unzipped folder into your javascript folder(prototype.js which is in the lib folder and the effects.js which is in the src folder)

6.) Ok you have one more file to put into your javascript folder. The combo.js file you can either create yourself or download by right clicking here and selecting "Save target as". For the purposes of this tutorial, just download it, it'll be easier on you

7.) Copy the combo.js file into the javascript folder on your server where you stored the other two .js files

8.) Login to your MT Admin side. Go click on the BLOG you want to be able to utilize these files. Under Configure click on Templates

9.) Click on the Main Index under the list of templates

10.) There are three lines that need to be added in your index.html, these lines should be in the header of the code (see picture below)

The lines of code tell the html document where to look for the combo, effect, and prototype.js files.

11.) Remember after changing the template to hit the Save and Rebuild button

12.) Ok start creating a new entry and put the following code in.

13.) Save and publish your entry, an it should work.

Sites I used:
http://script.aculo.us/
http://24ways.org/advent/introduction-to-scriptaculous-effects

Note: If you want these effects to work in BLOG entries after they're archived, remember to go into Templates and add the code in the templates under Archives where appropriate. Rebuild the site after you make these code changes, otherwise the effect won't work.

Ok so you wanna free up some space on your MT Blog and your Recent Posts amount is getting to be a bit much. Well you can change it.

1.) Go into your MT Admin Side

2.) Click on Templates

3.) Click on Main Index

4.) Click inside the text box with the code in it and hold down Ctrl and then f. Type in Recent Posts as your search criteria

5.) You should be down in the code where the Recent Posts module is, scroll down below it a little till you see something like : MTEntries lastn="10" and change the 10 to a 5.

6.) Hit the Save and Rebuild button below.

7.) There you go your site should be changed to where now you only have five recent posts displayed instead of ten

Ok so I was tinkering around and thought I wonder if I can use that javascript effect from before on my modules, maybe free up some space on here. After some messing around with the Main Index code I was able to use the effect on my podcast module, here's how:

Note: Make sure that you've already done the tutorial before this one as it is kinda essential for this tutorial to work. Click here to go to that tutorial

1.) Get into your Moveable Type Admin site
2.) Click on the Templates link under the options under the particular BLOG you wanna implement this effect on.
3.) Left click on Main Index
4.) Find the module you wanna try the javascript effect on.
(In this case I tried it on my podcast module)
5.) Your module code should look something like this:

6.) There are two line changes that should be made to this code. A line should be added before the code. This will call the actual javascript effect. Remember to name the div id something easily remembered in this case I just typed 'podcast'. The second change that needs to be change is in the div class line, you need to add the div id and style code, this div id is what the javascript effect refers to, so in this case it has to be "podcast", if it's not the effect will not work. The following is what the finished code looked like for my podcasts module:

If the code is a little small for you all to read, you can click on that actual image to bring up a bigger image of each piece of code.

7.) Ok so you've made the changes, now to see if they work. Remember to Save and Rebuild the code after you have made your changes. After you have Saved and Rebuilt, check out your site. If everything worked out right, you should see that neat little effect working with one of your modules now.

If you any questions, comments, etc. You can email me at webmaster@normalamerica.com

You may have noticed the addition of a new module to the right incorporating my MOBLOG into this moveable type blog.

A moblog simply put is a "moblie blog", audio/images/etc. you post on the go aka while mobile. In this situation I signed on with textamerica awhile back and used my cellphone to take pictures and upload those same photos to a site. I suggest signing up with textamerica if you wanna upload images from your cellphone with little fuss, the service is free and I think it's neat.

Ok so back to the tutorial. I wanted to have a module that had the latest uploaded image from my cellphone. The issue comes in creating the said module. Now I have gone over module creation in a previous tutorial, this is a tad different. The normal code for a module looks like so:

<h2 class="module-header">Podcasts</h2></a>
<div class="module-content">
<li><a href="http://www.thisweekintech.com" title="">TWIT</a></li>
<li><a href="http://www.aboutheroes.com" title="">About Heroes</a></li>
</div>

The code for a moblog looks something like this but a little different, it should look like the code below:

<h2 class="module-header">Moblog</h2>
<div class="module-content">
<script language='javascript' type='text/javascript'
<src='http://optik.textamerica.com/iPanel/panel.aspx?target=1&
view=440528&count=1'></script>
</div>

The added javascript code can usually be found on your textamerica page, under the link "My Recent Code Image", basically it gives you numerous ways to post your moblog. You can change a couple of things, if you want multiple images, change the count number from 1 to 5 and there are other more flashy things you can do, but this is how you do a simple version of it.

Ok, so while puttering about one day I found this neat script/app called Lightbox. I mentioned it briefy awhile back

Example:

image #1
image #2
image #3

http://www.huddletogether.com/projects/lightbox2/

for support go to:
http://www.huddletogether.com/

or you can email the coder, their email should be on both sites I believe.

Originally I had a tutorial but, it just seemed a bit convulted, and the basic instructions are on the actual lightbox2 site. The only thing I suggest is to insert the code not only in your main index template but also in your category archive/single-entry archive/and date archive.