Archive for how to

How-to: Get Started on Entrecard

Some of the more popular threads on the Aussie Bloggers Forum are threads that deal with a recent phenomenon in the blogging world. It’s a new service called Entrecard, which bills itself as “Your Business Card 2.0″. It’s something that is geared towards bloggers, and is built for bloggers.

If you want to check out the threads for yourself, you can do so without registering. They are -

Signing Up

When you first visit the Entrecard page, you’ll see that there’s an introductory video there; I recommend you take the time to watch this video as it provides an excellent explanation of how the whole system works, and how simple it is to get started with their system.

Entrecard Homepage

After viewing the video, to sign up, all you have to do is click on the big Sign up FREE! button under the video (it’s what the arrow is conveniently pointing to on the site ;) ). That will, naturally, bring you to the signup page -

Entrecard Signup

The first thing that you will notice is that there are three main guidelines - first, the blog needs to be in English, you need to own the blog that’s being signed up to be linked to the account, and it has to be a blog that’s not pr0n or spam. The best part of the sign up process is that, you can get your card created right away, and not have to confirm your account, or wait before you create your card.

What I’m going to do is create my card (which, for now, will just be my standard avatar with my site’s address written on it) in Paint Shop Pro, and then upload it. You’ll note that the image has to be 125×125, as that is the size of all Entrecards. If you don’t have the skills necessary to make a card from scratch, you can always opt for a simple text card, either plain, black, silver (which has orange and black borders on the top and bottom), green (good for blogs with a short name) and orange.

This is what my entrecard looks like, just in case you come across it out there ;) -

My Entrecard

Just quietly, I have to say I’m pleased with my work. :D

When you’re done deciding what you want to have for your card, enter your blog’s information, along with a description of your site, fill out the reCaptcha and click sign up.

Entrecard Signup Complete

That’s all there is to signing up. Now, it’s time to put the code on your site (or if you want, have a look at your dashboard, but we’ll touch on that a little later). To do that, click on the Get your widget code link.

Entrecard Widgets, with convenient preview

There is a choice of three different sizes - 127×148, 200×127 and 250×127. These are designed to fit all widths of sidebar, and really all tastes. Since my sidebar isn’t that wide, I’m going with the first option. I also happen to think that the simplicity of that particular widget is nice. :)

Putting it on your blog

This is a simple thing to do, because it’s no different to putting a widget for, say, MyBlogLog or BumpZee or even a tracker onto your website. Simply copy the code you want to use, and put it into a new element on your sidebar; WordPress users will want to use a Text element, and Blogger users will need to use a HTML/Javascript element. Of course, you can also put it into an existing piece as well; the choice is yours. I’ve decided to do a little reconfiguration of my sidebar to accomodate it. :)

Now, let’s go back and explore the Dashboard.

The Dashboard

Since I just signed up as I was writing this post (as I say, I do it and write up the how-to on it ;) ), there’s nothing in my dahsboard right now, except for some basic information about my account.

You won’t see this ever again!

However, it doesn’t take long for ads to start appearing in your inbox. This shot below was taken just a few minutes after the previous one, and I already have some folks who have dropped cards on me! ;)

After only a half-hour of being a member, I had all these ads in my queue already…

Really, this is a learning experience for me, and I might include an update on this on Mondays, with the other updates of my blog world.

Further Reading

This should get you going on Entrecard; it’s not a hard thing to do, and if you have the time to do it, can be worthwhile to your blog’s traffic. :)

As always, if you have something you’d like me to explain how to do, you can contact me via my contact page. I’ll go through it and produce a guide like this one. ;)

D’oh! I forgot to put a title onto this post! :lol:

Comments (12)

How-to: Add a message to your Blogger blog

This isn’t a message in terms of the standard blog post, but more a message along the lines of “I’ve moved, you can keep up with me at my new address” message. If you will, a sort-of sticky post. :)

It’s actually quite simple to do - and is probably something you’ve already done in the past on your sidebar. The first thing is to go into your blog’s template section (either by clicking on Layout on the dashboard or Template in your blog’s work page).

Then, when you’re in there, click on one of the “Add a Page Element” links -

Adding a message - click on Add page Element

It doesn’t matter which link you click, as we will be moving the text to the body anyway. When the window pops up, click on the Add to Blog link under Text element, since that is what is being added.

Click Add Page Element under Text

Now, you’ll be in the normal text editor. Put in the message you want to. For example, since I’m actually doing this on a testing blog, I’ll just put in some generic rambling. ;)

When you’re done, click on save changes to confirm your message. If you want to have full control over the look of the message, you can always use the Edit HTML link to edit the code behind the text. :)

Type in your message

Now, you’ll be back in the Layout screen, and the new element will be the first one in the spot where you chose to put it. In my case, I used the sidebar, so it’s there. What you need to do now is simply drag it over to the body of the blog (don’t worry, a box will appear to show you where it is going to).

When it’s in the place you want it to be, click save to confirm the changes.

A really complex image that involved combining 3 others ;-)

Of course, be sure to check the blog to make sure that the message is there, and then it’s all done. As you can see on my example, it is above the posts, and if you would like to use your blog for other things (you know, paid blogging, etc), you’re free to, and the message will stay the first thing visitors see.

It’s not a circle!

As always, if there’s something you’d like to have explained, drop me a line, either through the contact page, or if you’re on the Aussie Bloggers forums, drop me a PM. I’ll post about it and show not only you, but anyone else who may be wondering how to do the same thing how to do it. :)

Comments (2)

How-to: Add new dictionaries to Firefox

Not a lot of y’all know this, but I have quite a decent knowledge of Spanish - I’m not completely fluent, but I have advanced conversational skills, and can compose emails with minimal assistance from online translators. However, one thing that I can’t normally do with Spanish is have my spelling checked in Firefox.

This is something easily fixed, and in the process of my installing this particular language to my Firefox, I’m going to show the rest of y’all as well (I’ve already done this to add another language, which you’ll see when I show you the menu later).

The first thing is that you need to be at a text form (it can be any type of input line - even the search box that comes up when you go to Scroogle’s homepage can suffice). In this case, I’m going to use the title line of this post. You will need to turn on spellcheck for that particular field by right clicking and turning on Spell Check This Field first.

Next, right click again on the field, and go down one line below Spell Check This Field, and you will see Languages, which will expand into a new menu, with (in most instances) only one language in the list. Select Add languages… from that sub menu.

New Dictionary 1

That will bring you to the Firefox Add-ons page which has a whole list of dictionaries that you can select from. They’re organized by the language’s first letter, in that actual language - thus, you have Welsh (Cmyraeg) listed before English.

Go through the list until you find the language you want to install, and then click the Install link. This will bring up the standard warning about the extension you want to install being unsigned. However, since you are downloading it from the official Addons site, it should be safe to use.

Only 4 seconds to go!

Then, the Add-ons window will open, and the new dictionary will install itself. After it’s done, you will need to restart Firefox to use your new dictionary. Unless you’re working on something important (like this blog* post, or an online application), you can go right ahead and restart right away, as it will keep your current tabs remembered for when you restart.

Restart with saved tabs; nice!

After you’ve restarted, it’s as simple as going back to the Languages sub-menu and selecting the newly installed language as the one you want to check your spelling in. Firefox will remember your choice from then on.

*Apparently, in the Australian English dictionary that I downloaded from Mozilla, “blog”, “firefox”, and “Mozilla” are considered misspelt. Go figure…that’s why there’s the Add to dictionary option, I guess. ;)

Comments (1)

How-to: Change the address of your FeedBurner Feed

One of the things that happen when you switch a site from one place to another, or from one blogging platform to another is that you need to be sure to update any sites that are dependent upon your present address for providing services.

Among those is FeedBurner, if you have chosen to use their services; if you haven’t, it’s definitely recommended and if you need help on getting started with their free service, I have put together a how-to on putting your feed on there. It’s quite simple to do, and did I mention that it’s free? ;)

Now, if you’ve already burnt your feed with them, changing the source feed for it is quite simple to do.

First, log in to your account, and from the My Feeds page, click on the title of the feed you want to change.

Change Feed Address 1

Then, in the feed stats dashboard, click on Edit Feed Details…

Change Feed Address 2

A little sub-window will pop up giving you the title of your feed, the current original feed address, and the Feed Address that you’re using for FeedBurner. There will also be an advisory to not change your original feed address unless you are actually changing the address of your original feed.

Since that is precisely what we want to do here, go ahead and change the address that is in the Original Feed line to what your new feed’s address is. If you’re using WordPress, you’ll want to use - http://{domain}/feed . By the way, you’ll need to click on this to see the image in full - it’s just too wide to put in full width ;)

Change Feed Address 3

Then, click Save Feed Details to confirm the changes you want to make to your feed.

If you’ve just changed your hosting to a new service, you may see a 404 error; that is not unusual - all that means is that FeedBurner’s servers haven’t found your site’s new address - try again in a couple of hours, and it should work then.

Comments (4)

Positioning Images in WordPress

Last week, I happened upon this post which asked about how you position an image in WordPress - this person had been used to working with Blogger’s style of inserting images with the dialog and only 3 positions possible.

Although WordPress is a very powerful system to work on with your blogging, with the use of a simple plugin - Advanced TinyMCE Editor - all the image options are just as easy now, as it was with Blogger.

Generally, when you insert an image in WordPress, you’re using the upload section, found below the editor window in the new post page. It’s a very straightforward thing to do, but if you need a refresher, Snoskred has an excellent guide on how to do that. :)

If the image you want to insert is not one you’re uploading to your own site - for example, a Flickr photo you have permission to repost (either direct from the photographer or through a Creative Commons license) - there is a function built into the Editor. It’s the Image button, which can be found in the second row of the toolbar -

Insert Image Button - shortcut Alt+Shift+M

That will bring up this dialog, just like this with all the lines blank -

Insert Image Dialog

When you put the address in, the editor will go ahead and load the image in the Preview panel. If you’re satisfied, then click Insert. The great thing is that, unlike Blogger, you can always go back and edit the image’s look without having to worry about knowing much HTML. ;)

Click Insert to go on…

If you simply insert the image using the defaults, it will appear like this on your blog. It will use the specifications that are found in your theme’s CSS file for spacing and borders, and other bits for appearance.

Guide Tree If I start a paragraph right after the photo without a new paragraph or setting text positioning settings, as you can see, the text will start from the bottom right of the image. This is something that can also be changed in the Insert/Edit image dialog.

To access the dialog after you’ve posted the image into your post, simply click on that image, then either click on the Insert image button again, or right click on the image and select Image properties. The dialog will come up and look like the second one posted above. To change specific items about the image, click on the Appearance tab, which looks like this -

Update Image Appearance

The quickest way to change the alignment of an image in your post is to use the line of the same name. There are a myriad of selections that you can use. Below, using the same image as above, I’ll show you what the that will look like. The image above is using the “– Not Set –” option.

Guide Tree The baseline setting is no different to the not set setting. The text will start at the bottom of the text, as if the image was part of the line of text.

Guide Tree This is the top setting - in this setting, the image acts like it’s the main feature of the line, but the text to the right goes from the top of the image, and creates a large white space between the end of the first line’s text to the beginning of the second line.

Guide Tree The middle setting will place the text in the middle of the image vertically. This creates a large white space between the top of the image and the text, and then between the text and the rest of that paragraph.

Guide Tree The bottom setting is, again, no different to the default or the baseline settings - as in those, the image is seen as part of that line of text.

Guide Tree This is the text top setting - not really any different to “top”. By this point, you can probably see that with HTML, there are generally a few different ways to get to the same conclusion. ;)

Guide Tree The absolute middle setting is another clone of the “middle” setting from above.

Guide Tree This is the absolute bottom setting - look familiar anyone? ;)

Guide Tree

Now, we get to some interesting looking images. This is the left setting. As you can see, the text will now flow around the image; generally, if someone is putting text as part of their regular posting - such as showing people what product they’re talking about, or an image of the author of that particular column. The catch is that, with this setting, all of the text will flow around the image - including other images.


Guide TreeDepending on the width of your screen, this horizontal line might still be to the right of the last image, but the next image is over there, on your right. This is, as you might guess, the right setting. Once again, all text will wrap around the image, and this will include images once more. Eventually (and I’m judging this on my monitor being maximized and the editing window being quite wide), you will see that the text will start move back to the extreme left of the line after the previous image. If you’re on a smaller monitor, the text probably has already gone under this image. ;)


Something you will have noticed is that the only image that has moved away from the left side of the page - that is because all of these adjustments to the alignment have to do with the vertical alignment of the image in relation to the text. If you want to put the image into the center of the post, you simply use the buttons in the toolbar. :)The next section that you see in the window are the dimensions. This is only really useful if you want to post a full image and then resize it to fit your needs. Generally, I don’t recommend using this function as this will make images not look very good - the only time that you should reduce the size of an image is when it is definitely too big for your blog’s design, and you can’t use a thumbnail linked to the original image. The next image will have a setting of only typing in 125 for width, and checking the constrain proportions box. The great thing about that box is that you only need to put one dimension in, and it will automatically sort out the dimensions to keep the image in the same shape it was.Guide Tree

Now, let’s take a look at the vertical and horizontal space functions. In some blog templates, these will have some default values set out in the CSS properties for that theme, others will not. First off is the vertical space. I’ll set the next image to have a vertical space of 30 pixels - just to exaggerate the effect.

Edit: Now that it’s live, I can see that my template doesn’t like the settings. I’ll work on a fix for that. I’m guessing it will involve CSS…

Guide Tree The image is on the “not set” for the alignment, and as you can see, thanks to the vertical spacing, there is now an appreciable white space around the image. For the next image, I’ll change the horizontal space to 30 pixels again.

Guide Tree Now here, you can see that the image is well clear within the same line to the text. There is one last example to use - setting both variables to 30.

Guide Tree With this setting, you have a pseudo-border; one that is transparent and will blend into the background of your blog’s template. However, if you want to use an actual border, use that line; an example of which (set to 15n be seen in the next image.

Guide Tree I just want to note that for this image, I made the color red by putting this line in the style line of the dialog box - border-color: #ff0000. With that, you can see that there is the separation between the image and the text again, but this time it is a colored area.

Edit: OK, I’ve changed everything to a CSS-based property, but it appears that my template likes everything now except for the border example, which it doesn’t like at all…here is what it looks like in the editor (with a manually-added 2 pixel border ;) ) -

This is how it *should* look…

The next line of the box, class, is used to select from the two style classes that are involved in the editor, the same ones in the class drop-down in the toolbar - generally, there won’t be much use to those options. The last line that is in there is the style entry - there you can enter any CSS you would like to use to change the appearance of the image. However, most of the functions covered by style (although they’re the preferred method now) are covered by the other sections of the box.

This will now bring us to the last tab of the dialog box - Advanced. Here, as the term suggests, you can adjust advanced settings. I’m not going to go into the explanation of the options, as, quite honestly, they’re stuff you’re likely never to use - at least I don’t use them. ;)

Advanced Settings

It’s not terribly difficult to work with images in WordPress, and the settings are, as I mentioned, even more powerful than anything you’d ever seen in Blogger - also, you don’t get all the excess code that Blogger dump into their image code (you know, the cursor settings and other stuff that clutter up the code more than anything else).

As always, if you’d like something explained, drop me a line via the contact form. :)

Comments (4)

« Previous entries · Next entries »