Blogging Basics 101» HTML

How do I customize my blockquotes in Blogger?

Melanie Nelson — Mon, 20 Sep 2010 11:00:14 +0000

READ THIS: Before you start changing anything in your template code, please for the love of all that is sacred to your blog, back up the template. Blogger makes this really easy. On the Edit HTML page, just click the Download Full Template link and choose where to save the file. Make a note of it so you can find it if you need it.

OK, now that we have that out of the way, let’s figure out this customized blockquote business.

Log in to Blogger.com
Go to Design > Edit HTML
Find this code in your HTML: blockquote {

The entire code string will look similar to (though probably not exactly like) this:

blockquote {
margin:.75em 0;
border:1px dotted #619644;
border-width:1px 0;
padding:5px 15px;
color: #000
}

In a blog post, the code above would tell your browser to display the blockquote between two green dotted lines:

Below are three different ideas for customizing your blockquotes. I show you how the blockquote will look, then I show you the code to use. To change your current blockquotes to one of the customized versions below, just copy the code from here and use it to replace the current blockquote code in your template.

Vertical Line Blockquote

Use this code for a vertical line beside your blockquote:
blockquote {
font: 14px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #619644;
}

Colored Background for Blockquote

Use this code for a colored background for your blockquote:
blockquote {
margin: 1em 3em;
padding: .5em 1em;
background-color: #b1d2a3;
}

To change the color to match your blog’s design, simply change the hex color.

Box Around Blockquote

Use this code to put a box around your blockquote:
blockquote {
margin:1em 20px;
border: 1px solid #619644;
padding: 10px;
}

Where it says “solid” you can change that to “dashed” or “dotted” (without the quotes) to see if you like that look better.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

How do I format recipes on my blog?

Melanie Nelson — Tue, 06 Apr 2010 11:00:13 +0000

Reader Question:
I have trouble with formatting recipes and getting the columns lined up. I usually do several lines of ingredients and amounts and hit return. Then I will highlight the ingredients and amounts and click on the bullet feature and then un-do it. Then is when the ingredients come together, but they are not aligned! What am I doing wrong?

Melanie’s Answer:

It doesn’t sound like you’re doing anything wrong. There just isn’t a great way to format some things without specific HTML (like that for a table, which I’ll show you in sec). Since you want to format the ingredients of recipes, I think you have a few choices.

Instead of trying to format the list with a bulleted list, you can simply type the amount of the ingredient, hit the space bar, then type your ingredient (which is how most recipe sites I’ve visited do it). Example:

10 roma tomatoes
1 yellow onion
1 lime
1 bunch fresh parsley
1 jalapeno pepper

If you like the simple typed list above, but want it indented, you can do that without a bulleted list. Just type your list, highlight it, then click the blockquote button in your editor. It looks like this: Your list will look like this:

10 roma tomatoes
1 yellow onion
1 lime
1 bunch fresh parsley
1 jalapeno pepper

It’s a very subtle difference from the list in #1 above, but you should notice it’s indented a little. NOTE: Your blockquotes will likely look different than mine because my template automatically adds the gray color to the text and the line to the left as part of the formatting. Your template will likely just indent your text.
If that’s not what you want, you can implement an HTML table. I’ll be honest with you: the method above is easier, especially if you don’t have experience with HTML. Putting a table together with HTML is easy, but you have to keep track of what you’re doing or the cells won’t line up properly. Here’s what your ingredients list might look like with a simple table:

1	can tomatoes
1	bunch parsley
1	yellow onion
1	lime
1	jalapeno pepper

The HTML for that table looks like this (notes in red just tell you what the HTML is doing and shouldn’t be used in the HTML you write for your table):

signals the beginning of the table
signals the beginning of a table row
signals the end of that cell. You can have as many table cells () on a row as you like.

signals the end of that table row
(repeated from above)

1	cantomatoes	signals the beginning of a table cell;
1	bunch parsley
1	yellow onion
1	lime

signals the end of the table

As you can see, there’s not a lot of difference between a basic table and simply typing your ingredients. You can adjust the padding of each cell (the white space around the cell; it makes it appear there is more space around each table cell) to get the table to look just right, but it takes some tweaking and experimenting to figure out what works for you. To learn how to make an HTML table, please see the W3 Schools Tutorial on HTML Tables.

photo credit: Leo Reynolds

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Learning HTML Can Help You Take Control of Your Blog

Melanie Nelson — Wed, 24 Mar 2010 11:00:13 +0000

If you’re blogging and you don’t know even a little bit of HTML, you’re doing yourself a disservice. HTML tells a web browser how to display text elements on your web page. Learning and using HTML is fairly intuitive; I think you’ll find it very easy to learn. Knowing how to use HTML on your own web site or blog allows you to enhance your own posts and troubleshoot small issues that arise (like when your posts don’t appear quite the way you intended).

The ironic thing about computers is that, for all their apparent smarts, they have to be told what to do. And to tell a computer what to do, you have to speak its language. There are many programming languages out there that help browsers interpret web sites or make them function, but for today we’re talking about the most basic level of coding your web site: HTML. HTML stands for HyperText Markup Language and it’s the code that tells your browser how to read and display text elements on your web page.

HTML is pretty intuitive. If you use the HTML tab on your blog’s compose editor, you can see how your posts are marked up with HTML code. If you look at it closely, you’ll notice a few recurring things:

HTML tags usually (but not always) come in pairs. These pairs are the opening tag (which tells the software that a command is coming) and a closing tag (which tells the software that the command is finished). For example, paragraphs are usually coded with
(the opening command) at the beginning and
at the end. The / is what tells the software that the command is ending.
References (or URLs) are always in quotes. If you look at the HTML for a link, you’ll see something like this: Blogging Basics 101. That link looks like this on your page: Blogging Basics 101. The key to making sure the browser reads the link correctly is to ensure the URL you’re linking to is enclosed in quotes. And not just any quotes. If you use smart quotes (i.e., curly quotes), the browser doesn’t always read those and your link doesn’t work. To avoid curly quotes, don’t write HTML in Microsoft Word or Mac Pages. You can use your blog’s editor or even TextEdit or Notepad.

There are many good basic HTML tutorials online so I’m going to point you to them instead of trying to cover everything here:

HTML Primer provides tutorials for beginning or advanced users.
W3 Schools gives you everything you need to know about HTML and then a little more.
Tizag has tutorials on learning HTML, but also provides tutorials for CSS, PHP, scripting, and databases so you can continue to learn.

Technically speaking, HTML is not a computer programming language; it’s a markup language. What I mean by that is, if you want to ensure a line of text is seen as a header (or bold or italics) in a browser, you have to tell the browser to display that text as you want it seen — you have to markup the text. In the case of a header, you would decide which level of header you want to display (e.g., Header 1, 2, or 3) and then use the HTML for that header. A header 3 would be marked as follows:

Text for Header Example

That text would appear in a browser as follows:

Text for Header Example

As you learn HTML and begin applying it, you’ll see that there are different markups for text emphasis. For example, you may see the markup to bold a word as text or text. Or, if you want your text italicized you may see it marked up as text or text. Does it really matter which HTML markup you use? Well, yes. It does. If you’ve ever debated someone, you probably understand the importance of semantics of the spoken word. Semantics in HTML are just as important. As Virginia DeBolt of Web Teacher explains,

“The tag is indeed bold. It is purely visual and carries with it no semantic meaning to indicate importance or emphasis. Therefore, non-visual browsers (such as screen readers) get nothing from the tag. It’s as if it doesn’t exist. The tag means strongly emphasized. It is interpreted visually in different ways by various browsers–often as bold. The tag always carries the semantic meaning of strong emphasis, even for non-visual browsers.

The sister tag means emphasized, and it is often rendered in italic–but not always in italic. The tag always conveys semantic meaning for emphasis. If you want italic for purely visual reasons (no attached emphasis), use . If you want italic because you are giving the title of a book or movie, use , which conveys the semantic message that the words in italic are a citation.”

But semantics aren’t just important for interpreting text decoration correctly. Semantic HTML is important in SEO as well. Laura Scott of Rare Pattern explains:

“The use of semantic markup helps search engines index your content correctly. If you wrap a sub-header in tags, then Google *may* consider it somewhat important, but Google will not consider it as important as a
tag (commonly used to show a sub-header). Wrapping citation text in and gives you italics, but wrapping citation text in and not only gives you visual styling, it tells Google, Bing, etc. that this text (or link) is a citation. All these things will get increasingly important as search gets more sophisticated and smarter. The more ‘robot food’ we can give the search bots, the better for SEO.”

As you spend more time blogging, you’ll find that even a little knowledge about how to use HTML will help you control how your web pages are displayed. Take a little time and peruse the tutorials I’ve linked to and try out some of the things you learn, then please let me know if they’ve helped you.

photo credit: Jesper Rønn-Jensen

A version of this post was published at BlogHer.com.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Helpful Blogging Links: Blissdom Recaps, Women in Public Speaking, Create a Sliding Button

Melanie Nelson — Fri, 19 Feb 2010 11:00:03 +0000

photo credit: mrhayata
Every day I share links to all the tech articles I love on the Blogging Basics 101 Tumblr blog! Subscribe to the Tumblr blog and never miss another article.

Crafty Love by Arianne at To Think Is To Create. Arianne was part of a panel on writing well. She (along with Megan of Velveteen Mind, Deb of Deb on the Rocks, and Amber of The Run a Muck) shared their writing resources, tricks, and processes. This article is an overview of that session and contains links to even more resources.

4 Myths to Stop About Women and Public Speaking by Denise Graveline at The Eloquent Woman. Although the problem of too few women speakers at conferences is not new, it’s only lately been a discussion in the world of social media in the past year or so (most likely because social media is so much more personal and pervasive). Here are just four of the reasons (and the rebuttals to that logic) heard over and over about why women aren’t asked to speak at events.

Blissdom Blogging Session Notes via Angela England. Five hundred women attended Blissdom and many of us have been sharing the wisdom we heard. Angela has a list of the recaps people have written for specific sessions.

Create an Animated Sliding Button Using MooTools by David Walsh. If you’re in the mood to learn something new or just practice your coding, head over to David Walsh’s blog and try out this tutorial. He shows you a demo of what you’re making, then gives you the HTML, CSS, and MooTools JavaScript.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Blogging Tutorial Links: HTML, CSS, WordPress

Melanie Nelson — Wed, 14 Oct 2009 05:00:56 +0000

I have been a collector my entire life. I think I come by it naturally since my mother’s side of the family tends to “collect” things in the form of never throwing anything away on the off chance it might be valuable or hold the key to the family’s history. From reality television, I now know they are hoarders, not collectors. Me? I tend to deny my problem because what I mostly collect are links. That is, when I read an article online that I think may come in handy some day, I save the link. I have a folder on my computer’s desktop called mhl, (short for Mighty Helpful Links). Within that folder are sub-folders for specific categories for things like SEO, vlogging, analytics, etc. Oh, yes. Make no mistake: I hoard links. Today, though, that may work in your favor–especially if you’re at all interested in learning the basics of HTML or CSS or have a WordPress blog you’d like to tweak. That’s right, folks, I’m sharing some of my links to tutorials.

HTML

HTML Tutorial Series via Beep the Geek. HTML is the most basic part of structuring web pages. You’ll need to understand a little HTML and the logic behind it if you want to move up to CSS and PHP and some other stuff I don’t pretend to know a lot about. You’ll be surprised by how much you can fake it if you know a little HTML.

Web Basics via Web Monkey. Rather than point you to a specific article at this site, I’m pointing you to the main page for the Web Basics category. Here you’ll find tutorials for HTML, CSS, and XML.

CSS

20 Websites To Help You Learn and Master CSS via Six Revisions. If you aren’t currently following Six Revisions, you should be. I noticed that many of my hoarded links are from this site. I learn a lot there. And they use the word “grok”, so, you know, I love them and stuff. This particular article lists and describes 20 sites with tutorials. You’re sure to find at least a few that can help you get started with CSS.

30 Exceptional CSS Navigation Techniques via Six Revisions. Are you fairly comfortable with CSS and want to try your hand at a nav bar? This is the article for you. It provides sample nav bars and, when you click on the title of the nav bar, you’re taken to a page with instructions on how to build that nav bar.

Custom Styling for Posts via Blogging Tips. As the author, Sarah, points out, customizing the style of individual posts can be handy if you’re using a platform like WordPress as a content management system (CMS). This article shows you how to customize a single post, all posts in a specific category, or all posts in a sub-category.

CSS Builder via MetaTitan. This is a simple tool to help you build CSS on the fly. There you go. Done.

Resetting Your Styles with CSS Reset via Six Revisions. I told you I learn a lot here. This article shows you how to set the styles of your page elements “to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.”

WordPress

WordPress.tv. The tagline says it all: WordPress.tv is your visual resource for all things WordPress. If you are at all interested in learning about WordPress, this should be your first stop. The web site is categorized so you can find what you’re looking for easily. On the home page you’ll see options that offer Latest Videos, WordCamp Videos (WordCamps are mini conferences where WP fans congregate to share their knowledge; all levels welcome), and Popular Videos.

100+ WordPress Video Tutorials, from Basic to Advanced via SpeckyBoy. This article provides a list of tutorials grouped by web site. The tutorials listed cover everything from installing WP to configuring your Google site map to inserting an image in PHP list.

25+ Essential Articles for Every WordPress Beginner via Elite by Design. This list points you to information about the WP Codex, using SEO with WordPress, choosing plug-ins and widgets, using your admin settings, and more.

How to Create a WordPress Theme via ThemeShaper. Are you ready to make your own theme? Perfect it and sell it? I applaud your tenacity and drive. Start here.

Miscellaneous

A List of Essential Web Design Skills via Hub Pages. Liz is one of my favorite tech gals. In this article she explains what you need to know if you want to design web sites or, at least what you should be looking for if you’re hiring it out.

Web 2.0 in just under 5 minutes. An interesting visual overview of Web 2.0, how we got here, and where we’re going.

This article was cross-posted at BlogHer.com.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

FAQs from Beginning Bloggers

Melanie Nelson — Wed, 05 Aug 2009 05:00:34 +0000

Last year, at BlogHer 2008 in San Franciso, I appeared on a panel with four other women called FAQs for Beginning Bloggers. Our panel was flat-out amazing. We met fantastic bloggers and answered many beginner questions.

Below you will find my notes from my portion of the panel. In addition, you can find Nelly’s notes at WebGrrrls.

How do I find basic html resources to help me remember how to do things like strike-thrus etc.?

When I research information for Blogging Basics 101, I start with a Google search of key words. I also go to each of the three main platforms (Blogger, TypePad, and WordPress) and search their help files with those same key words. More often than not, I find what I’m looking for.

The following five sites are excellent resources for all bloggers to refresh your memory on how to do things like strike-throughs or add a button to your sidebar.

Blogging Basics 101: This site starts from the beginning and walks you through everything from choosing your blog host and choosing a blog name to figuring out how to do a strike-through and customize your sidebars.

Blogger Buster: Blogger users should have this one in their bookmarks. Everything you want to know and then some about how to manage and customize your Blogger blog.

Edublogger: This site is specifically written for people who design, develop, and use educational blogs. However, the information spans niches and is valuable to all bloggers. The author uses many screen captures to make instructions especially easy to follow.

BlogWell: This site offers everything from theory and design articles to HTML and CSS instruction for WordPress. It is targeted to small businesses and non-profits.

What are and how do I create permalinks?

A permalink is the link to an individual blog post. These are important because if you ever need to link to an exact blog entry (e.g., for a carnival or an archived post), you use the permalink as your link. It’s poor blog etiquette not to use the permalink.

If you don’t use the permalink, you’ll just be linking to your main blog page. The problem with that is that, as you post new blog entries, the newest entry appears at the top of your main blog page and the other entries are pushed down on the page. The entry your readers are looking for may be down at the bottom of the page or already in the archives; your reader has no idea where to find the entry! If they click over to your site expecting to see a post specific to a carnival and they see a different post, they may not take the time to find the “real” post they’re looking for.

You can find the permalink link under any blog entry. However, not all blog hosts/designs handle permalinks the same way.

Typepad: There’s a link that actually says Permalink under the entry.

Blogger: The link varies. It’s usually the time stamp of the post or the title.

WordPress: Has a link at the bottom of the post named Permalink and/or the title of the post.

What kind of basic sections should I have in my blog?

I take this to mean What should I place in my sidebar? Your sidebar is your list of things you want to keep handy for your readers and for yourself. Your sidebar is offering your readers something in addition to the day’s post. However, too many links in the sidebar can clutter your design and overwhelm your audience. Keep things clean and orderly.

Recent Posts/Most popular posts/Archives: You don’t need all three. Just choose one of these.

Categories or Search: I find that search works well for my blogs, because I have a long list of categories.

About Me/E-mail/Contact information: This is your opportunity to explain your blog. E-mail or other contact information should be readily available so your readers (or PR and marketing people) can contact you.

RSS subscription button: Blogging Basics 101 has an entire section on RSS and installation and you can review Nelly’s notes at WebGrrrls as well.

Blogroll (if you choose to do one)

Hosted vs. Non-Hosted?

Hosted: A blog that resides on the host’s server (e.g., Blogger or TypePad or WordPress.com).

Non-hosted: A blog that resides on the user’s (yours) server. You pay a third-party to host your blog (e.g., Moveable Type or WordPress.org).

Hosted Pros: Easy to get started because you don’t have to worry about server issues.

Hosted Cons:

Blogger blogs can appear to be less professional

Platform limitations (e.g., archiving can be less than
user-friendly; TypePad can have issues with comment spam and trackback
spam; difficult SEO)

Less control over HTML and CSS

WordPress.com does not allow advertising.

Non-Hosted Pros:

Control over permalinks (articles aren’t randomly named) which can help with SEO

Control over how archives are managed

Control over CSS/HTML

Non-Hosted Cons:

WordPress.org only supports one blog per installation; however, Moveable Type supports multiple blogs per installation.

Moveable Type isn’t as malleable as WordPress.org.

How do I make a custom header?

Using GIMP (free to download) to make custom blog banner (via Simply A Musing Blog)

How to use PhotoShop or PhotoShop Elements to design a custom blog header (via DesignMom)

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Beginning Blogger Checklist: 5 Mistakes to Avoid When Starting a New Blog

Melanie Nelson — Mon, 08 Jun 2009 05:00:08 +0000

Congratulations! You’ve decided to join the ranks of bloggers. You’re going to love it! Before you get too far into it, though, I’d like to help you avoid some common mistakes new bloggers make. These mistakes are almost a rite of passage, but why waste that time with mistakes you can easily avoid?

1. Mistake: Auto-loading music.

Please. I beg you, your readers beg you: ditch the auto-loading music! Auto-loading music is not only annoying and surprising, but it’s a bandwidth hog. It makes your blog load slowly. Do you really want to lose a reader because she couldn’t wait for your site to load? And if she waits for your site to load, will she be annoyed because she didn’t know there would be music, had her speakers on high, and a sleeping husband (or child) right beside her? I can tell you this: She won’t be back.

2. Mistake: Using a design with a dark background & light text.

This issue is less about your aesthetic and more about usability and readability. Reading online is harder on our eyes than reading traditional paper. Using a dark background with light text makes it even harder on your readers’ eyes.

3. Mistake: Too much sidebar clutter.

A sleek, uncluttered design goes a long way with readers. The less clutter, the more space you have. You can use this white space to help lead your readers’ eye toward specific content. Are you proud of your awards, badges, and various trinkets? That’s OK, those things are a right of passage too. You don’t have to get rid of them, but why not put awards on their own page and link to it from your main page? You’ll trade 20 links for just one link and de-clutter the sidebar. De-cluttering your sidebar eases navigation for your reader as well. When there are fewer items competing for your reader’s attention, they’ll be drawn to what’s important.

4. Mistake: Accidental plagiarism (even with photos).

Very few legitimate bloggers plagiarize on purpose. Most likely a new blogger won’t realize what they’re doing. Plagiarism applies to using any content that isn’t originally yours, whether it’s content or photography or music or anything else. I’ll be honest and tell you that when I started blogging I would Google a picture, then copy it to my computer and use it in my blog post. That’s a big problem because it’s the same as plagiarism–even if I cited where I found the picture. I hadn’t asked the owner if I could use it, I just did it. If you’re new to blogging, take a minute to find out about and understand the issues of plagiarism and copyright. U.S. Copyright Office bluntly says: “Acknowledging the source of the copyrighted material does not substitute for obtaining permission.” These links will help you:

I put a Creative Commons license on my blog, but is my material truly protected?

I notice that many bloggers have something on their site telling people not to plagiarize, but how effective is it?

A Few More Links for Copyright Information

5. Mistake: Using “click here” instead of keyword phrases for links.

I advise you to choose your links words carefully. When you are writing a post and need to insert a link, consider how you are going to write that sentence and where you will include the link. For example, which of these is more effective (potential links in bold)?

If you are interested in hosting a giveaway, please review my vendor guidelines.

My vendor guidelines are available here.

The top sentence is more effective for your audience because it tells them exactly what they need to do. It’s also effective for SEO purposes because search engine spiders are looking for unique word strings. Strings like “click here” or even just the word “here” linked to other files or pages are everywhere on the web. Make your pages stand out by being more descriptive with your links. Help the search engines catalog your site effectively.

Rubik’s Cube photo credit: photo credit: wokka

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

How can I make a scroll box for HTML code?

Melanie Nelson — Thu, 28 May 2009 05:00:27 +0000

This post has been the most popular post at Blogging Basics 101 since I wrote it over a year ago. However, it’s also been the most confusing for my readers because it deals with HTML and how your blogging platform & web browsers read that HTML. So I’m tweaking this post and re-posting in the hopes I can clarify these issues a little more.

Sometimes a blog will have a button on its sidebar with a box of HTML code underneath, similar to this:

You already know how to put the button on your sidebar and how to find and display the HTML. Now let’s put that HTML into a handy scroll box.

Below I will walk you through putting the code in your sidebar. First, though, I want to show you the code we’ll be using and explain how it works.

This is the code you’ll place in your sidebar:

YOUR TEXT HERE

This will show up as the button and then a box below with the HTML code (as you see above).

The
and
are the opening and closing HTML tags you need to make the scroll box. Everything between the quotes in the
tag tells the browser how to make the box appear on the screen. Let’s go through each of these items.

border:3px solid green — This tells the browser to make the box with a three pixel border in green. You can change the color by typing another color (e.g., red, orange, etc.) or you can change the line type by typing dashed or dotted.

height:100px — This tells the browser to make the box 100 pixels tall. You can change this variable by typing a different number (e.g., 200). You can play around with this until you like the appearance.

width:150px — This tells the browser to make the box 150 pixels wide. Again, you can control the width by typing in a different number.

color:black — This is the color of the text within the box. You can type the name of any color here (e.g., red, orange, green, etc.).

background-color:white – This is the color of the inside of your box. I encourage you to use black text on a white background as this is the easiest to read. However, you can change this color by simply typing another color name in place of white.

Now that you understand how the tag works, let’s look at what HTML you need to put use to make the box reflect your personalized HTML. Instead of YOUR TEXT HERE you should type your HTML code. For example, if you are going to put the HTML for putting the BB101 button on your site it would look like this:

<a href=”http://www.bloggingbasics101.com”><img src=”http://www.bloggingbasics101.com/images/bb101_125x125.jpg” /></a>

(Note that you don’t need the bold, I just added that for ease of seeing where your code goes. If you need more help with what code you’ll need, see this post on HTML code for buttons.)

If you’re at all familiar with HTML, you’ll notice that the code above does not have the regular < and > you usually see when inserting links and images. Your button code would normally look like this if you were typing it in your HTML compose tab:

><img src=”http://www.bloggingbasics101.com/images/bb101_125x125.jpg” /></a>

However, if you type the HTML above into the Compose tab or the Edit HTML tab, it is processed as HTML and will not show up properly for your readers (it will just show the button in the box instead of the HTML code). There is a work-around: Type < for every < character and > for every > character. The code for your button HTML will look like this:

<a href=”http://www.bloggingbasics101.com”><img src=”http://www.bloggingbasics101.com/images/bb101_125x125.jpg” /></a>

This works because < is the HTML code for the < sign and > is the HTML for the > sign. In other words, your editor and your browser will both read < as a < character (and display it as such) and > as a > character (and display it as such). Placing < in place of all < and > in place of all > will allow your raw HTML to show up in the box because it replaces the < and >. You’ll need to put < and > where ever there is an < or > in your code.

NOTE: Do not cut and paste the code from this article. It’s using so-called smart-quotes and those quotes won’t be recognized properly by your blogging platform’s editor or a web browser. You’ll need to either type in the code by hand or, if you choose to cut/paste, replace the quotes manually in your editor.

There are other work arounds as well. You can try wrapping your snippet of code in the following tags:

and
tags OR
and OR
and

Now, let’s put that code in your sidebar!

TypePad

In order to add the code to your sidebar, you will need to make a new Notes Typelist.

Go to Typelists > Create New Typelist.

Choose Notes for the List Type and give it a name.

Click Create New List.

In the Note field type copy and paste this code:
width: 150px; color: black; background-color: white;”>YOUR TEXT
HERE

Click Save.

Click the Publish tab and choose which pages you want to put the scroll box on.

Click Save Changes.

To change where the scroll box appears, use the Content Order tool in your Design toolbox.

Blogger

Log in to Blogger.

Go to Layout > Template > Page Elements > Add a Page Element.

Scroll down until you see HTML/Java Script and choose Add to Blog.

Cut and paste the following code into the Content field (you can leave the Title field blank):
width: 150px; color: black; background-color: white;”>YOUR TEXT
HERE

Click Save Changes.

Preview your blog to see how it looks. Move the element around as needed (simply drag and drop with your mouse).

Click Save.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Choosing Movable Type as Your Blogging Platform

Melanie Nelson — Mon, 02 Mar 2009 08:00:44 +0000

Movable Type is the self-hosted blog platform offered by SixApart (also owner of Typepad). Ostensibly, Movable Type is the equivalent of WordPress.org. Put simply: Both are non-hosted blogging platforms that allow you to tweak your own code.

Movable Type, at one point several years ago, was set to be a “potential successor to the kingdom of Blog, Blog Away“. What happened, though, was WordPress came along and was truly open source. Users had been treating Movable Type as if it was open source, but Movable Type decided to enforce licensing–essentially making users pay for the privilege of using MT. These days Movable Type is once again free and offers an open source version.

The Princess at Flooded Lizard Kingdom is a user and lover of Movable Type and was kind enough to e-mail with me about why she likes the MT platform:

I moved my personal blog, Flooded Lizard Kingdom from Blogger to Movable Type in October of 2003 because I wanted more control over my blog. Movable Type is just as powerful and customizable as WordPress, and easily supports multiple blogs, which is one reason that I love it. All my blogs are in one dashboard when I log in.

In addition, she cites the following as reasons to use Movable Type instead of another platform:

Movable Type’s template code separates content, function, and appearance more strictly than WordPress.

It’s fairly easy to customize the available styles with your own banner. (I think it’s important to note here that Movable Type has significantly fewer themes available than WordPress. This may be a consideration if you are considering this platform.)

The Princess has written a thorough and thoughtful post called Six Apart Doesn’t Want Me to Use or Recommend Movable Type (But I Do It Anyway). In it she discusses the pros and cons of using Movable Type as your blogging platform.

The Smartalyx guys have tried all the major online publishing systems (WordPress, Joomla, Drupal, Movable Type). Their recommendation? Why use Movable Type when the installation for the others is so easy and the communities are so open and accessible? Movable Type was not as easy to install as it seemed to be when reading the instructions:

Installation seemed straight forward. Reading the directions anyways. The install itself was painful and overly complicated. Nothing worked quite the way it should and the instructions did not help much. Where WordPress has what they call “famous 5 minute guide”, I could not find a similar overview for Movable Type. I am familiar with creating sub-domains, databases and all that so those concepts are not foreign. . .Needless to say after multiple attempts it never worked.

You can read more about their Twitter experience with @SixApart (who own Movable Type and Typepad) in Movable Type vs. WordPress.

However, The Princess e-mailed me the following links that should help you with any problems you encounter when installing MT:

Movable Type 4 Installation Step-by-Step With Screenshots

Movable Type Forums

Tutorials

It is true that Movable Type doesn’t have quite the expansive community of WordPress or number of tutorials to help new users. However, there are some excellent sites out there that can get you up and running.

BlogHer’s own Elise Bauer is a Movable Type guru and hosts a site (Learning Movable Type) that can walk you through setting up your new blog at Movable Type or importing an existing blog. From the web site:

Learning Movable Type (LMT) is a growing set of tutorials, presented in blog format, aimed at helping users of the Movable Type (MT) web publishing platform. These tutorials are geared for those with a good understanding of HTML, a fair understanding of CSS, but who are not necessarily programmers or web designers.

Eat, Drink, Sleep Movable Type also offers discussions, tutorials, Plug-ins, and advice about using Movable Type to its fullest extent.

Related Posts:

Choosing a Blogging Platform

Using Blogger (Blogspot) as Your Blogging Platform

Choosing TypePad as Your Blogging Platform

Choosing WordPress as Your Blogging Platform

Special thanks to The Princess at Flooded Lizard Kingdom for taking the time to e-mail with me for this article.

This article is cross-posted at BlogHer.com (with subtle differences).

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

How do you make a scroll box for HTML code? *Updated*

Melanie Nelson — Fri, 13 Feb 2009 08:00:00 +0000

This post has been the most popular post at Blogging Basics 101 since I wrote it over a year ago. However, it’s also been the most confusing for my readers because it deals with HTML and how your blogging platform & web browsers read that HTML. So I’m tweaking this post and re-posting in the hopes I can clarify these issues a little more.

Sometimes a blog will have a button on its sidebar with a box of HTML code underneath, similar to this:

You already know how to put the button on your sidebar and how to find and display the HTML. Now let’s put that HTML into a handy scroll box.

Below I will walk you through putting the code in your sidebar. First, though, I want to show you the code we’ll be using and explain how it works.

This is the code you’ll place in your sidebar:

YOUR TEXT HERE

This will show up as the button and then a box below with the HTML code (as you see above).

The
and
are the opening and closing HTML tags you need to make the scroll box. Everything between the quotes in the
tag tells the browser how to make the box appear on the screen. Let’s go through each of these items.

border:3px solid green — This tells the browser to make the box with a three pixel border in green. You can change the color by typing another color (e.g., red, orange, etc.) or you can change the line type by typing dashed or dotted.

height:100px — This tells the browser to make the box 100 pixels tall. You can change this variable by typing a different number (e.g., 200). You can play around with this until you like the appearance.

width:150px — This tells the browser to make the box 150 pixels wide. Again, you can control the width by typing in a different number.

color:black — This is the color of the text within the box. You can type the name of any color here (e.g., red, orange, green, etc.).

background-color:white – This is the color of the inside of your box. I encourage you to use black text on a white background as this is the easiest to read. However, you can change this color by simply typing another color name in place of white.

Now that you understand how the tag works, let’s look at what HTML you need to put use to make the box reflect your personalized HTML. Instead of YOUR TEXT HERE you should type your HTML code. For example, if you are going to put the HTML for putting the BB101 button on your site it would look like this:

<a href=”http://www.bloggingbasics101.com”><img src=”http://www.bloggingbasics101.com/images/bb101_125x125.jpg” /></a>

(Note that you don’t need the bold, I just added that for ease of seeing where your code goes. If you need more help with what code you’ll need, see this post on HTML code for buttons.)

If you’re at all familiar with HTML, you’ll notice that the code above does not have the regular < and > you usually see when inserting links and images. Your button code would normally look like this if you were typing it in your HTML compose tab:

><img src=”http://www.bloggingbasics101.com/images/bb101_125x125.jpg” /></a>

However, if you type the HTML above into the Compose tab or the Edit HTML tab, it is processed as HTML and will not show up properly for your readers (it will just show the button in the box instead of the HTML code). There is a work-around: Type < HTML Code Here > . The code for your button HTML will look like this:

<a href=”http://www.bloggingbasics101.com”><img src=”http://www.bloggingbasics101.com/images/bb101_125x125.jpg” /></a>

(Note: The bold isn’t necessary, it’s just my way of showing you where I’ve inserted the < and >)

This works because < is the HTML code for the < sign and > is the HTML for the > sign. Placing < in place of all < and > in place of all > will allow your raw HTML to show up because it replaces the < and >. You’ll need to put < and > where ever there is an < or > in your code.

There are other work arounds as well. You can try wrapping your snippet of code in the following tags:

and
tags OR
and OR
and

Now, let’s put that code in your sidebar!

TypePad

In order to add the code to your sidebar, you will need to make a new Notes Typelist.

Go to Typelists > Create New Typelist.

Choose Notes for the List Type and give it a name.

Click Create New List.

In the Note field type copy and paste this code:
width: 150px; color: black; background-color: white;”>YOUR TEXT
HERE

Click Save.

Click the Publish tab and choose which pages you want to put the scroll box on.

Click Save Changes.

To change where the scroll box appears, use the Content Order tool in your Design toolbox.

Blogger

Log in to Blogger.

Go to Layout > Template > Page Elements > Add a Page Element.

Scroll down until you see HTML/Java Script and choose Add to Blog.

Cut and paste the following code into the Content field (you can leave the Title field blank):
width: 150px; color: black; background-color: white;”>YOUR TEXT
HERE

Click Save Changes.

Preview your blog to see how it looks. Move the element around as needed (simply drag and drop with your mouse).

Click Save.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.