May 26th 2009 09:00:54 am

MARKDOWN TUTORIAL by Deana Barker (muincat)

These days, it seems just about every Swap-Bot Forum I go into, someone has a question about how to change their profile, whether it be to add a badge, picture, link or whatever. Usually, the person doesn’t know a thing about Markdown language and is asking for help. I never ran across Markdown until I became a member of Swap Bot and it frustrated me at first, too. I followed the link provided by Swap-Bot to Daring Fireball: Markdown Basics, but still found it difficult to work out what to do without specific examples pertinent to Swap-Bot, so that’s what I’m going to try to do for you all here in this post. With any luck, we’ll have you off into the land of customizing bliss in no time!

PICTURES & BADGES:

This is the one I see the most questions on. “How can I add this badge/picture to my profile?”

Well, badges and pictures are really the same thing. First, you need to know the location of the image you want to use. It has to already be uploaded online somewhere since Swap-Bot does not have the capability of uploading graphics for profiles.

Let’s say I want to post the “I Pledge To Rate” badge created by pgk:

This badge is located on the Swap-bot server at: http://static.swap-bot.com/purplebadge.jpg – In the case of most badges, however, the image location information will be provided for you by whomever created the badge. The graphics may be located on Photobucket, or Flickr, or on someone’s personal website. The location will always need to be an internet URL address – not a link to your personal computer.

Next, you’ll go into “Edit Profile” and decide where you want this badge to show up on your profile. When you find the spot, click on it, so that your cursor is in that spot, ready to type.

What you type to make the image appear on your profile page (the reason you’re all reading this!):


If you want to get fancy and add a description for folks who might not be able to load graphics for whatever reason, you would type something like this:


Lets say you want “alt text” to read “I pledge to rate.” It would look like this:


———-

You add other types of photos and pictures exactly the same way! How cool is that?! Let’s pretend you’ve got this really cute animated clip art you want on your profile, like this little kitty:

You would need to have him available somewhere online, like Flikr, Photobucket or your own personal website. I uploaded this little guy to my web server so I could show you how to do it. He is located at http://www.muincat.com/images/DancinCat.gif, so I would would find the place in my profile where I wanted to put him and type:


OR


———-

MAKING HYPERLINKS:

Great news! Hyperlinks are made the same way! The only difference is that you’re linking to a website instead of a picture file. Going back to the “I Pledge to Rate” example, you could put a link under the page that goes to the webpage that explains exactly what it is that you pledged like this:

What I Pledged

To make a link you type the words you would like hyperlinked in brackets, followed by the URL in parenthesis:

[What I Pledged](http://www.swap-bot.com/forums/topic/7681)

The whole thing with the graphic and link would look like this:


[What I Pledged](http://www.swap-bot.com/forums/topic/7681)

If you want to only post the graphic and make it a link, your code would look like this:

[](http://www.swap-bot.com/forums/topic/7681)

Another example would be if you wanted to make a link to your Amazon Wish List. Find the place in your profile that you’d like to add the link. You’d like it to say This is my Amazon Wishlist . Type:

[This is my Amazon Wish List](http://www.amazon.com/gp/registry/wishlist/1QLOE6JUSKNJ2)

Just make sure you type YOUR wish list URL and not the one above, since its mine. But then again, if you’d like the whole world to send me gifts from Amazon, I’m fine with that!

———

OTHER FORMATTING:

OK, pictures and links are the two biggest things that everyone wants to do. There are, however, a few other things that can make things look nice.

If you’d like to make a

Big Headline

(Heading 1), just type equal signs under it like so:

Big Headline
==========

If you’d like a

Smaller Headline

(Heading 2), like for a subcategory, just type dashes on the line under it like so:

Smaller Headline
————————

The next level down is considered

Heading 3

and would be typed with 3 pound signs before it like this:

###Heading 3

Bulleted lists are probably the easiest thing of all to make. All you have to do is put an asterisk before each item in the list and it will make it for you:

* Item 1
* Item 2
* Item 3

Gives you:

• Item 1
• Item 2
• Item 3

If you want a numbered list, just do the same as above, but use a number with a period after it:

1. Item
2. Another Item

Gives You:

1. Item
2. Another Item

If you’d like to make something show up in italics on your profile, all you have to do is add an asterisk on either side of the word or phrase you’d like emphasized. If you want something written in bold, use TWO asterisks on both sides of the word or phrase.

———-

Last, but not least, the “Preview” button is your friend! If you’re not sure that you typed something correctly, just hit the preview button and you’ll be able to check your work. Also, you can go to the code generator at Daring Fireball to do a trial run. The first box is where you type what you want to try. Below the box, you’ll find two drop down menus. Leave the first one (“Filter”) set to “Markdown” and the “Results” drop down should be set to “Preview.” Click “Convert” and the next box shows you what it will really look like to the rest of the world.

Good Luck!

———-

Thank you to Deana for such a detailed and helpful tutorial! We (Travis & Rachel) chose to allow Markdown (as opposed to HTML) on Swap-bot for formatting because it helps keep the site safe from HTML code which could cause problems. Markdown is also meant to be a simpler language that is easier to learn. You can use any of the formatting options discussed above on your profile page, within swap descriptions, and within the Swap-bot Forums. There is more helpful information about using Markdown on the Swap-bot Wiki. Have fun!

6 Comments » Categories: Tuesday Tip

6 Responses to “So You Wanna Trick Out Your Profile”

1. Reese on 02 Jan 2010 at 4:19 pm #

   Hi,
   I am trying to use the markdown to add an image that I have on flikr, the issue is that it is not recognizing it and I was wondering if you knew how to do this?
   here is what i tried: 
   I think it has to do with the lack of a .jpg or .png but I am not sure how to find that on flikr?

2. Jim on 28 Jan 2010 at 7:24 pm #

   Hey there. I found this interactive Markdown Tutorial that I thought you might be interested in. It lets you see the HTML output real time. Just thought I’d share.

   [Markdown Tutorial](http://slekx.com/the-markdown-tutorial/)

   -Jim

3. Lynn on 12 Aug 2010 at 2:55 pm #

   This is exactly what I was looking for!
   Thank you so much :]

4. Retagene Hanslik on 24 Aug 2010 at 7:48 am #

   I think maybe this site is for people with no lives…especially after reading some of the profiles in a swap I’m signed up for. I’ve never seen another site where I couldn’t figure out how to put a picture of myself in the profile. I guess you think it’s fun to frustrate your users with your expertise, but I don’t find it amusing. I don’t sit around all day playing on my computer (I create my art on it)…and ads still appear over text after rebooting, which is a mystery since my husband is in charge of computer operations at a bond company so I have a good computer. I’m outta here.

5. Ari on 12 Jan 2011 at 12:17 pm #

   “The graphics may be located on Photobucket, or Flickr, or on someone’s personal website.”

   This tutorial assumes that everyone you “borrow” a graphic from won’t mind you piggybacking on their bandwidth. This practice is known as “hotlinking” and is generally considered a clumsy faux pas of internet etiquette:

   http://altlab.com/hotlinking.html

   (If you have no idea what I’m talking about, please read the link. It explains what hotlinking is, why it’s a bad idea, how to avoid doing it, etc.)

   I realize that Swap-Bot is not the most tech-savvy place, so a lot of members either don’t understand the issue or just plain don’t care. This is a little discouraging, because I like Swap-Bot very much, and I know that its members generally mean well. But people should know this: the rest of the internet considers hotlinking to be stealing.

   If you’re okay with that, then fine. It’s like stealing your neighbor’s cable– your chances of actually getting caught are slim, and even if you are, it’ll probably be a slap on the wrist. But if you’re NOT okay with this, then you might want to look into this hotlinking thing and figure out how not to do it. It would be nice to have a tutorial which addresses this issue.

6. Allison on 22 Sep 2011 at 10:08 pm #

   Thank you for this! I couldn’t for the life of me figure out how to put images on my profile!!!

Comments RSS

Leave a Reply