Entries Tagged 'tutorials' ↓

Optimizing your website

So you’ve got a website. What’s it doing for you? How do you know?

There are 2 different kinds of optimization I’m going to write about here and in upcoming articles.

  1. Search engine optimization (SEO), making your site friendly to search engines, so they will present it to searchers;
  2. User optimization, or making your site as easy for your user to find what he’s looking for as possible.

There’s a ton of stuff out there to read about search engine optimization. Getting your site seen on Page 1 of search engines is better than advertising in a lot of ways. While companies do pay good money for specialists to perform this service for them, it is possible for someone with a small site to learn to do it themselves. If you do it yourself, that is free advertising.

There is less information out there about user optimization. The deal is, if you pay for advertising or put a lot of work into getting searchers to visit your site, do you know what to do to maximize the chances of them finding what they were looking for?

So right now I want to talk a bit about making your site user-friendly.

The most important rule in designing a website is that your users should be able to find what they’re looking for as quickly as possible. They should be able to see immediately what the purpose of the page they have landed on is, and they should be able to see where they can go from there without scrolling around or clicking. Then, when they click the link that looks like it is going to take them where they want to go, they should end up exactly where they expected to be.

If surfers don’t see what they are looking for within a few seconds, they will click away and find some other site to look at.

Example: If you have a phone sex site, you may have a warning page the surfer will have to click past before getting to your main page. Is there any content on it that gives the surfer a reason to keep going, or is there a scroll box with legalistic mumbo-jumbo? Look at it critically. Does your main page have XXX rated photos on it? No? Then get rid of that warning page. Make the photos on the entry page R-rated and provide enough information on it so that anyone landing on it will know what they have found, so they can either leave or continue.

Making the user click past a pointless entry page is causing your site to lose customers before they even find your content.

Now, open your main page. Close your eyes. Now open them again. What is the most noticeable element on your main page? Is it clear without reading anything that it is probably a phone sex site they have landed on and are about to enter?

Is there anything that has been added to the page that distracts from that idea? Is there a big block of dense text talking about…something? Move it to its own page.

Presumably you have links to other pages. There might be a “gallery” page, “about me”, “blog”, “news”, “links”. How easy is it for the visitor to find the links to navigate to those other pages? Is there an obvious navigation bar, or are there some links or buttons here or there?

Once there, how easy is it for the visitor to get back or visit another page?

Is anything cluttered? There are sitebuilders out there that make it easy for users to randomly jam odds and ends into their pages. Resist the temptation. Don’t do it.

Where do you have a “call to action”, telling the visitor what to do, ie, “call me!”? On every page?

You need to think about all these things, because your visitor does not intend to spend any time thinking at all. Think about it.

If you need to clean up your website, get to it!

Coping with callbutton issues

Unless you are using the old pre-transition callbuttons (which stopped working but then later became active again), your flirt-installed callbuttons do not change status when you change status. Code for those callbuttons is no longer distributed.

The link to callbutton code on your My Account page no longer is present. The link on our listings has not been coded, and if you click it the page ends up being refreshed. The only way to get current callbutton codes for your listings is to open a listing as if to edit it, submit twice without editing (unless you need to edit, of course), then click the link on the page that also has links to your account and help in getting started.

A callbutton whose code is obtained in this way while you were available is static code. It will always be set to available, though customers cannot complete a call by clicking it when you are unavailable. It will not send mail when you are Away.

I got this button while I was available:

D5_cb-call-now-136x40_v5

   <a href=”http://beta.niteflirt.com/calls/new?listing_id=5734291″ title=”Yes – Taking Calls”><img alt=”D5_cb-call-now-136x40_v5″ border=”0″ height=”40″ src=”http://beta.niteflirt.com/niteflirt/images/D5_cb-call-now-136x40_V5.gif” width=”136″ /></a>

A callbutton whose code was obtained while you were away is also static code. It is supposed to send mail, and cannot change to “taking calls”. But the server is left off the code, so it refers back to your own server, and actually can never do anything if you place it anywhere but on your Niteflirt page. And why would you need to do that? There already is a ‘send mail’ option on your pages.

I got this code while I was set to ‘Away’:

D5_cb-mail-away-136x40_v4

<a href=”/messages/compose?message%5Blisting_id%5D=5734291&message%5Brecipients_list%5D=Principal+Angela+Quattrano”><img alt=”D5_cb-mail-away-136x40_v4″ border=”0″ height=”40″ src=”http://beta.niteflirt.com/niteflirt/images/D5_cb-mail-away-136x40_V4.gif” width=”136″ /></a>

If someone were to try to click it to send me mail, the address it would try to send mail to is http://help4flirts.com/messages/compose?message%5Blisting_id%5D=5734291&message%5Brecipients_list%5D=Principal+Angela+Quattrano, which is definitely not a real email address.

With the pre-transition codes, both the image and your availability are controlled by the Niteflirt server, not by the button. So the image changes when your availability changes, as does what happens when the button is clicked.

This pre-transition callbutton displays my correct availability status:

<a href='http://www.niteflirt.com/calls/PT_interimcall.asp?sid=XXXXXXX'><img border=0 src='http://www.niteflirt.com/calls/callimage.asp?sid=XXXXXXX&ImageType=1'></a>

I have changed the listing SID number to a series of x’s. Just substitute your listing SID number (found in the url of your listing).

View your older payment mail buttons

In fact, the upgrade has made it simple to view older payment mail buttons, even though they still haven’t gotten round to putting a link to page 2 (or even older ones) and there are only 25 buttons showing, half of which are phantom duplicates.

Login to your Niteflirt account to follow along. All the screenshots of listings are linked to the actual page. Screenshots of payment mail button pages are linked to a URL that will only show the account you are logged into.

Here’s the secret:
If you click on the new Niteflirt homepage and look at the url, it looks like this:

So now click on the link to Find Women, and the URL looks like this:

Now click to the next page. Wait, what?

And now the next:

Do you suppose that if you changed that ’3′ to a ’4′ it would take you to the next page? Try it and see. (If you’re lazy and just want to guess “yes”, you’d be right.)

Now the whole site is written on the same platform, the same code, which is completely different from the previous type of code.

Let’s look at the URL for page 1 of our payment mail buttons.

There’s no link to page 2 here. There’s not even any indication that page 2 exists. In fact, 12 of the 25 buttons showing are dummy duplicates of other buttons, so you’re really only seeing 13 buttons.

Let’s fake up that URL and see what happens.

Some of you ran out of payment mail button space on Page 1 long ago, even though there were maybe 200 buttons on each page. Now there are only 25 buttons, and half of them are fakes. But here’s what I’m going to do. I’m going to give you links to the first 50 pages. You can take it from there.

Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
Page 7
Page 8
Page 9
Page 10
Page 11
Page 12
Page 13
Page 14
Page 15
Page 16
Page 17
Page 18
Page 19
Page 20
Page 21
Page 22
Page 23
Page 24
Page 25
Page 26
Page 27
Page 28
Page 29
Page 30
Page 31
Page 32
Page 33
Page 34
Page 35
Page 36
Page 37
Page 38
Page 39
Page 40
Page 41
Page 42
Page 43
Page 44
Page 45
Page 46
Page 47
Page 48
Page 49
Page 50

Background image for a listing

Upload your image, then put this at the top of the page:

<body background=”http://yourimageurl”>

Reciprocal linking codes

Here’s the thing.

To get placed more highly in a Google search (who doesn’t want that?), you need to make Google think you’ve got a damned fine site. The higher the PR (Page Rank) you’ve got, the better a site Google thinks you’ve got, and the higher you will come up in a search for your chosen keywords.

One of the ways you do this is by getting links from other sites like yours.

One of the things Google looks at when deciding how good a site you have is incoming links. They look at how many sites are linking to you and what kind of sites they are. The people who wrote the algorithm decided that the more highly ranked sites you have linking to your site, the better quality your site is.

So if you’ve got a site that lots of people with good sites think their readers will want to read, they’ll link to you and you may get a boost out of this. The best way to do this is to start by having quality content on your site. Update your content regularly and people will return to see what’s new. They’ll give you links.

Of course, there are other ways to get links. Some sites will trade links with you. Google looks at links like this and sees that they are reciprocal, which means the two sites link to each other. A link like this is not worth as much to Google, but you may get some good traffic out of it.

When you make a reciprocal link, you should place the site’s link at least as well as they have placed yours. So if they link to your front page, you can link to their front page. If they’ve got a “links” page, you can put their link on your links page or on your front page. But be nice. Don’t hide their link someplace on your site if they are giving you a link to your front page. I have offered to trade links with girls who wanted me to link to their front page, while they were putting my link on a page that was behind a tiny text link. Another girl offered me a link on a password-protected page that nobody but flirts whose banners were on the page had the password to.

It’s the same with topsites. If they want you to host their image, then upload it to your site and link to the image there. Otherwise, use the code they gave you and put the link on the page you gave them.

Here’s a banner for this site:

The url for the image is
http://help4flirts.com/banners/banner.gif.
The code for linking is
<a href="http://help4flirts.com/"><img src="http://help4flirts.com/banners/banner.gif" border="0"></a>

I had to type that out in strange characters for you to see that. In order for the linking code to actually show up the way they need to copy it, you need to either type it in special html characters, format it with <pre></pre> tags:
<pre><a href="help4flirts.com/"><img src="http://help4flirts.com/banners/banner.gif" border="0"></a></pre>

your linking code

See how I didn’t actually put the linking code in there? This one doesn’t work in WordPress.

Or you can put it in a textarea. “Cols” is the number of columns. Put more to make the textarea wider. “Rows” is the number of rows. You can increase or decrease, but you want the entire code to show without too much wasted white space.
<textarea cols="40" rows="3"><a href="http://help4flirts.com"><img src="http://help4flirts.com/banners/banner.gif" border="0"></a>

You can use any of these in an html page. You can’t use the ‘pre’ tags in WordPress.

Tables and fonts

I had a question from a flirt earlier today. She had followed the tutorial for putting buttons in tables, which shows you how to put buttons in tables with neat labels with each button, so your purchaser can see what they are.

The tutorial is intended to produce a table that looks something like this.

The problem was that her page had a black background. She had changed the text on her page to another color, using an html tag like this:

<font color="white">


But the font in the table remained black, and did not show up because the background was also black. The labels were there, but nobody could read them.

Unfortunately, when you set the font color, size, and face for a page in html, it does not affect the color of anything within a table. You need to set that color inside each cell to get them to change.

So her table looked like this:

I’m going to set the font as “arial”, which is the Niteflirt default. You can, of course, choose any font you want, remembering that if you pick a weird one that your visitor may not have installed, something else will appear. I’m going to set the color to “white”. Not all color names will work on Niteflirt. If you like a named color but it doesn’t show up on Niteflirt, you should download a color picker to find the proper hex code for that color. Then I’m going to set the size to 3, which is one size larger than the standard Niteflirt squinty size of 2. And for good measure I’m going to make it bold, so it will be easier to read.

I will set the font properties within a single <font> tag, but the bold must be separate. Both must come before the text. So they can be the first thing inside the cell, or they can be just before the text you are trying to format. So you can see where the table cell ends, I’m going to put the ‘td’ and ‘/td’ tags. What I’ve put in bold and red will be your Niteflirt button code, if you are not substituting a button image of your own.

<td><a href="http://niteflirt_button_code"><img src="http://your_image_url"></a><br><font face="arial" color="white" size="3"><b>Button Label</td>

Normally in html you would also put end tags, but we’re trying to save space on Niteflirt, and when it doesn’t matter, we leave them out. You would need to end the font, size, or color if you wanted to change any of those.

How to make a recording

There are two kinds of recordings you can make, recorded listings and mp3s.

The recorded listing plays for a caller on the Niteflirt system. You can record this over the phone by clicking the Create a Recorded Listing link at the bottom of your My Account page under Other Tools and Links. (I could give you the link here, but it will only work if you are logged in to your account). Follow the directions you are given and say whatever you want to go into your recording over the phone.

One problem with doing it this way is that you have to say it all the way through from beginning to end. There is no way to correct a mistake. So you need to practice in advance.

Many of my recorded listings are like stories. I write out the text exacly as I want it, and then I read it out loud again and again, editing awkward spots and rewriting parts that I realize might sound better a different way. You need to practice until it sounds completely natural. It should not sound like you’re reading from a script.

The other way to make a recorded listing is to make and upload a .wav recording. I am not sure how well this works. I know some girls have had luck with it, though the only time I tried this it didn’t work. And I have heard lots of complaints.

But first, you need to make a recording. So download Audacity and install it. Also download and unzip the Lame Encoder while you’re at it, which you will need to make mp3′s.

You will need a microphone to do this, too, though the one that is built into your computer may be good enough to start.

Open Audacity, hit the red button and start talking.

If you make a mistake, start again with the sentence you flubbed in. You can go back and edit out the error when you are finished. When you are through recording, click the button with the yellow square on it.

Replay what you have recorded. Highlight any mistakes by clicking one end and dragging your mouse across them, then delete.

To save, give the file a name and it will save it as an audacity project. To save as a .wav file, you will need to select Export As .wav. To save as an mp3, you will need to select Export as .mp3. The program will ask you where your Lame Encoder is on your computer. Browse to it and select it. Now fill out the little info form with something, and export.

Now you have a .wav file, which you may be able to upload to Niteflirt as a recorded listing if you are lucky. And you also have an .mp3 of the exact same recording, which is the other kind of recording I was writing about at the top of this entry. If the system was working right, you would be able to attach an mp3 to a payment mail and put the link on your page. As far as I know it is not working right now, so you will have to find another host or put it on your website (if you even sell a few, this will pay for a website).

Making a tiled background in Paintshop Pro

I have wanted to do a lot of tutorials in Paintshop Pro, but I’m often stopped by the fact that a simple tutorial intended to help a newbie master a single technique often produces something that is less than a work of art, while techniques can get lost in tutorials that produce complex works of art.

Of course, my other beef with a lot of tutorials is that the newbie will have to download a lot of “materials”, including tubes, brushes, filters, and sometimes even buy them. In the end, if the newbie ends up following directions correctly and finishing whatever it is, she can’t really use it (the copyright still belongs to the designer) and the individual techniques have gotten lost in the details.

I’m sure you’ve seen lots of background images on myspace and other member sites where the images just repeats. It doesn’t match at all. There are just ugly seams.

I’m going to show you how to tile a background using Paintshop Pro. It’s a pretty simple way to do it. There are lots of other ways to do it, too, but let’s not get into that right now. If you’re interested in doing some research, there’s a link at the bottom of this tutorial where you can find out ways some artists do it.

Here is my baby Maude, hiding in plain sight on a rug.

Here she is tiled into a background.

Here we are in Paintshop Pro with the image open. Although impressive images can be made from big photos, they can take a very long time to load. So it’s better to plan on having a smaller image repeat. I reduced Maude’s photo greatly to make it this convenient size.

Select Effects=>Image Effects=>Seamless Tiling

This window pops up.

There are a lot of settings you can adjust in this window. I find that the “corner” and “bidirectional” tend to give less vertical and horizontal effect. You can zoom your view. You can also click the die on the far right to get random settings. If you lose yourself in random settings and want to get back, go up to the top and dropdown the preset menu. Choose “factory default”. You should play with the settings sometime to get a feel for what they can do.

I’m going to tick the “Show tiling preview” box, which will bring up a preview window.

This looks okay. You can adjust the magnification to see it better if you like.

Close it and hit the ‘OK’ button. Maude is now tiled.

The page

For lots more info on tiling backgrounds and even some freebies, Visit this blog, where you’ll find a collection of tutorial links halfway down the page. I’ve looked at a few of them. You can do some amazing things, but have your patience ready!

Sparkly tiara-Paintshop and Swish, sound and sparkles

What I’ve got here is a flash movie of a tiara that plays a soundtrack and sparkles when you mouse over it. The sparklies and sound stop when you mouse out.

If you want to buy this, it will cost $10, $12 by payment mail. For this price I can make it with the background color or image of your choice (you supply). It can play the sound or soundtrack of your choice, which can loop multiple times or play once – like perhaps your voice. The entire image can click through to the url of your choice (which can be a payment mail button url). You will get the .swf file to upload to your website and the embed code to place on your pages or in your blog.

There was somebody on a Swish forum asking about sound. I started to make a Swishmax 2 sound tutorial, but before I got done I had given the tiara sparklies. It got a little complicated, since I ended up using both Paintshop Pro and Swishmax. I’ll give you some basic instructions, and if you know what you’re doing in Paintshop Pro or some other graphics software you’ll be able to make the images. You then need some basic skills in Swishmax 2 to put it together. I’ll talk you through it, but I don’t have the time or space to do an entire tutorial on something that takes a while to make (Jing is good for 5 minutes).

First, pick out a photo. I took a photo of a tiara I have. I painstakingly removed the background, cleaning it up pixel by pixel. This happened last year, so the fact that I was really sick of it by the time I was done with it meant it was ready and waiting for me today. You can use any photo you want if you don’t care about the background.

Make 4 new raster layers, select the brush tool, a sparkle-shaped brush, and the color white. In sizes 30, 40, and 60 and 3 different sparkle angles drop sparkles on each layer. Save the layers and the image itself (mine has no background so I can switch that) as .png files. You should now have 4 sparkle images and 1 photo image.

Open Swish and create a new movie. Select a background color (Modify => movie properties => background color).

Import all 5 images into the movie (Insert => Import image…), with the photo as the bottom layer in the outline panel (drag it to the bottom if it is not). If the sparkle layers are not aligned over the photo (this can happen when importing transparent images), hide them in the outline panel, select and make them visible one at a time, and then align them to it with the select tool.

Group the 4 sparkles layers as a movie clip (Modify => Grouping => Group as Movie Clip). Name the movie clip ‘Sparkles’.

Select the movie clip in the outline panel. Its timeline will open at the top of the screen. Give the first sparkle image a “fade in” effect (Add effect => Fade => Fade in) on frame 2 and a “fade out” effect (Add effect => Fade => Fade out) on the next frame after the effect. Click the “fade in” effect on the timeline to highlight it, hold down the Shift key, and click the “fade out” effect. Right click the effect, and choose “copy effect” from the dropdown menu. Click frame 6 of the next sparkle image on the timeline, then right click and “paste effect”. Paste the effect on frame 11 of the 3rd image and 16 of the 4th.

Now, let’s select the photo in the outline panel. In the script panel, select Add Script => Self => onSelfEvent(rollOver). Select Add Script => Movie control => Play(). In the ‘target’ dropdown select the movieclip you named ‘Sparkles’.

Go to the Layout view and preview your movie. The sparkles start right away. We need to stop that by making the movieclip stop on frame 1.

So select the Script tab. Select the movie clip again in the outline panel. Click frame 1 in the timeline of the movieclip object. Down in the script panel, choose Add Script => Movie control => Stop.

Now preview the movie again.

We want the movie clip to play smoothly and continuously while the cursor is over the image. To make it repeat smoothly, select frame 31 in the movie clip timeline. Select Add script => Movie control => Go to and play => gotoAndPlay(FRAME). Choose ‘this’ from the target dropdown and change the number in the ‘Goto frame’ field to ’6′.

Now preview the movie again.

Now we need to make the movie clip go away after the mouse goes off it.

On the next frame on the timeline of the movieclip after the last frame, add a ‘remove’ effect to all the sparkle images. Select the photo in the Outline panel. In the script view, Add Script => Event => Self => onSelfEven(rollOut). Add Script => Movie control => Go to and play => gotoAndPlay(FRAME), select the movieclip, which will appear as _parent.Sparkles in the target dropdown. Change the frame to ’32′.

Preview that again.

Okay, let’s add sound. Click in the rollOver effect in the script panel. That’s where you need to add the effect. Add Script => Sound => playSound(…) => Import. Now select your sound. If you want it to loop, press the Sound Effects button, and add a number of repeats.

Click in the rollOut effect. Add Script => Sound => stopSound(…), select your sound.

Now preview again.

Let me know if there’s a problem with this tutorial. My contact form is in the sidebar.

Putting Flash into WordPress

First of all, WordPress will not recognize a local file. So you will have to edit the html embed code to put the absolute path to your .swf file, wherever you have put it on your site (or elsewhere). Two different places in the code you will see a reference to “myfilename.swf”. You will have to edit it to make the full url, such as “http://mywebhost.com/swfs/myfilename.swf”.

WordPress has a sucky visual editor. They were supposed to fix it in the 2.5 release, but it’s even worse now than ever. It used to be I could just disable the visual editor, but now it mangles code in the disabled mode, too. And one of the things it totally mangles is the html code you use to embed your flash.

So first, you need to disable the editor. Go to users and select your profile. The top option on the page is the “Visual Editor/Use the visual editor when writing” checkbox. Uncheck it.

Now WordPress is still going to mangle our code, because unlike in regular html, WordPress thinks that line breaks and spaces mean something important. And it thinks they mean something different each time it sees them. If your embed code is full of line breaks and spaces, as SWISHmax 2-exported code is, WordPress is going to look at each line, decide what it really wants to turn it into, and then go ahead and do it. By the time it gets done you will just have some gibberish on the page that doesn’t resemble your embed code.

So what can you do? Open up Notepad. Make sure that Word Wrap is turned off (Format => Word Wrap). Open your html file that SWISHmax 2 put the embed code in. The part you need starts with <object> and ends with </object>. Start with that first <object> tag, hit the “End” key on your keyboard, then press the delete key until you have deleted all the spaces between that and the next. Leave a space between words and phrases within a bracket; leave no spaces between one tag and the next. What you should end up with is your entire embed code on one line. Now just copy and paste it into your blog.