Your blog’s design should scream success, but without detracting from your great content. A good design is almost invisible — blending perfectly with your articles. Here are a few simple things you can do to showcase content and encourage visitors to read further.

1. Display Key Content Above The  Fold

The term “above the fold” refers to the portion of a page that can be seen without scrolling. We need to put the most important, attention-grabbing information in that valuable space.

Many readers are like us — they already have 4 or 5 toolbars at the top of  their browser window. Allowing for header and such, it might be a tight squeeze to fit the enticing start of your content.  Is your reader going to bother pressing page-down or scrolling?

What should you put above the fold?

The key components to place at the top of the screen are: 1) Header with logo, title & tagline,  2) Menu with top navigation and 3) Start of post content.

The side bar needs to have your RSS box above the fold, as well as other navigation clues .  Blogs that focus on monetization will want to put their ads at the top.

Where can I save space above the fold for my content?

• Use a narrow header – leave room to add key items on the right side, in the same wrapper as the header. A smaller header can still be bold!
• Use drop-down menus – highlights important pages and saves space. BlogOhBlog has a good explanation for sub-menus and a plugin that helps get the job done.
• Use smaller images above the post -  let the first few sentences of the post show above the fold. Wrap text around larger images or ads.

Here are four ‘above the fold’ snapshots. Which ones make the most of that space?

scroll for next snapshot

scroll for next snapshot

scroll for next snapshot

[ scroll down to see next snapshot; press image to visit the site. ]

2. Properly Align Sidebar Elements

Ever see a sidebar image horribly truncated or bulging out of  a column? If you know the area’s width, you can resize the  image for a proper fit.

Determine the width of the area

Most bloggers hate opening up the template code to find the column information.

Install Web Developer Tool

I suggest you use just one part of the FireFox  tool called Web Developer. While viewing your page, click “Tools” on the browser menu , then select Web Developer, Information and Display Block Size.

BloggingWithSuccess sidebar blocks

This snapshot shows a section of the marked up screen.  The tool outlines each block in red; the CSS identifier and size in yellow.

In our case the sidebar is 332 wide. Text widgets are 252, allowing for sidebar and widget padding. So the largest image or form is 252.

Adjust image size

It’s easy to adjust images you create or upload to your blog. Just use the WP or Blogger Editor. But what if you need to resize an image that is part of someone else’s widget, as in a Grab my button scroll box? In that case, you can use the image width and length parameters in the html view.

For example, part of the copied html for the image tag looks like this:

<img src="http://farm4.static. ... .jpg" width="125" height="125" /> 

If the image is square like this one, just tweak the values for a better fit. Change values to : … width=”120” height=”120“, etc.

For rectangular images you may have to do some guessing to get the right values. An image like  width=”240″ height=”120″ has a rough 2 to 1 ratio. So if you need width=”200″ then try height = “100″. Preview the page and see how the graphic looks.

3. Tame Your Social Icons

We want to make it easy for a reader to refer articles to her favorite social network, but let’s get real. There are way too  many to choose from! Social icons can grow like weeds, choking up critical space. Here’s a site where the icons are over-powering the great content (masked to protect the innocent).

What can the blog owner consider?

• Big is not always better – especially if those beautiful icons take up two lines in your sidebar.
  If you customize your own icons, consider adjusting the width and height as explained in section 2 above. Try these sources for smaller icons:
  DryIcons:
  Smashing: 3D icons :
• Consider placement – I prefer to place multiple icons below the article and a favorite one (Topsy Tweet) at the top of the post.
• Use plugins that let you pick the top favorites and pop-up the rest. The sexybookmarks plugin does just that — so sleek, we switched from our custom icons. If you can’t pick favorites, then use a pop-up button :
  ShareThis or  AddToAny

Summary

It never hurts to step back and look at your site from the reader’s point of view. After all, you know your way around pretty well! Are you hiding the good stuff below the fold or even worse, several pages below?  Are your graphics too fantastic, super-sized?  Do you overload the header or sidebar with blinding trinkets and massive button/link choices?

Be sure to leave a comment to add to the discussion. You can reply for a “friend” if not for yourself (‘wink’).

Download Your Free Report: 1 Follower Per Minute.

Related posts:

1. Do Not Give Your Readers a Choice, Place Exit Points Intelligently! Do you get good traffic but very few comments? Do you get very few submissions to social sites? If you are not converting your readers well, then this post is for you! As a blogger, I have always been concerned about Exit Points. Exit points are the choices you...
2. Does Your Blog Design Scream Success? As a blogger you have big plans for success. Starting with the right topic, great content and a core set of readers, you're going places. But is your blog design on board? Does it look professional, dress the part and scream success?...
3. Blogger Sequel: Add Custom Social Bookmarking Icons Recently we learned how to add custom social bookmarking  icons for WordPress. Well, that lovely feature is “NO LONGER JUST FOR WP!” I wrote a Blogger tutorial at BPWebNews, “Adding Custom Social Bookmarks to Blogger.” In this BWS sequel post I’ll talk about the Blogger hack and some more...

Recently I was cleaning up some of my posts on TBODC and I noticed one of my plain bland-looking blockquotes. Naturally, being a designer, I had to do something about this. The blockquote is a highly underrated character on a blog or website. Usually it just sits there looking bored or like a clone of fifty-billion other blockquotes used across the Web. My goal was to change this, at least for my blog anyway.

Keeping to the theme of my blog and the fact that I’m a cartoonist I designed a speech balloon blockquote in Photoshop. Unfortunately, since I’m not a coder by any stretch of the imagination, I had no idea how to make this work on my blog. Designing something is easy, by comparison – you look at it in Photoshop and go, “Super! KaPow!”, but then you have to figure out how to slice and dice it and make it work on a web page.

I had been in correspondence back and forth with SBA here on Blogging With Success and I had mentioned my blockquote dilemma to her. She made several suggestions including links to tutorials and resources right here on this site. I checked them all out, but except for the ones that explained how to use “quotation marks” there wasn’t much I could use. Finally I turned to Google and after about two hours of searching I discovered there wasn’t a whole lot of help there, either.

The design which I had developed was going to have an image for the top, a slice for the middle (background), and one for the bottom (as illustrated below).

The majority of coding tutorials talked about using the CSS syntax “blockquote: before” and “blockquote: after” to place these top and bottom images in the blockquote, but neither of these were working for me. In frustration I turned to a coding friend of mine and asked if he would lend me a hand. He said yes and I sent him the code I had written (thus far) and a screenshot of the finished blockquote design.

Usually blockquotes are pretty boring, but with CSS I knew he could make it better. Now I’m sure there are better ways to accomplish this, but here is the solution my friend came up with. TBODC is on Blogger so I always write my posts in the Post Editor there (usually in the Edit Html window) and so he streamlined the code I would have to insert each time I wanted a blockquote in my post. Here it is ….

<blockquote>
<img src="/img/quotetop.png" alt="" />
The blockquote is a highly underrated character on a blog or website. Usually it just sits there looking bored or like a clone of fifty-billion other blockquotes used across the Web. My goal was to change this, at least for my blog anyway. So I designed a blockquote with a personality and character to match my own site and voila - here it is!
<p class="cite">- Doug Cloud, <a href="http://dcblog.net">TBODC</a></p>
<img src="/img/quotebtm.png" alt="" />
</blockquote>

Unfortunately, I would have to add the top and bottom images manually since we could not find a proper work around, but it’s better than what I had originally. Next he wrote up the CSS which would style this blockquote ….

blockquote img {display: block;}

blockquote {
  width: 345px;
  margin: auto;
  background: url(/img/quotemid.png) repeat;
}

blockquote p {
  font-size: 1.0em;
  font-style: italic;
  padding-left: 25px;
  padding-right: 15px;
  color: #663300;
}

p.cite {
  text-align: right;
  font-size:0.8em;
  font-style: normal;
  color:#663300;
}

p.cite a:link, p.cite a:active {
  font-weight: bold;
  font-style: normal;
  color:#663300;
}

p.cite a:visited, p.cite a:hover {
  font-weight: bold;
  font-style: normal;
  color:#993300;
}

Because I was using a background image for the center this caused that image to be displayed above and below the blockquote. To fix this I saved the top and bottom images with a background color (the same as the content area on which they would be displayed) and my friend added the “blockquote img {display: block;}” to the CSS to prevent the background image from overlapping. The “p.cite” codes are there so I can add a citation after the quote if I want to. And with the above code written and in place we have the finished blockquote design ….

Not bad, eh? How about you? Are you singing the blockquote blues? Are you ready for a change? Then I suggest taking what I have done here and incorporating it onto your own site or perhaps using this as a building block to create your own unique design.

Download Your Free Report: 1 Follower Per Minute.

Related posts:

1. Four Things To Avoid When Replying To Reader Comments Image by subsetsum via Flickr Readers can be good or evil;  it depends on how you interact with them. So you’ve got a successful blog? Great. So many loyal readers? Brilliant. Readers are the heart of  your blog, along with well written posts and a carefully designed layout. If...
2. Blog Styling Tip: Text Shadows This tutorial is part of a series.  Need more background on CSS? Check out our index of published blog styling tips where you will find an introduction to CSS/Html basics and some other resources. We welcome any suggestions. Description: Text-shadow is a simple styling element to create cool text...
3. Quick Design Checkup: Color Contrast Most of us don’t think much about our current blog design unless someone complains or we get tired of the theme. We go merrily along creating great content. But not taking stock of existing design flaws is like skipping your annual doctor visit or car inspection – just waiting...

As you may have noticed, I have been missing from Blogging With Success. (In fact, I am absent from the internet!)

I have decided to take a break from blogging. Why? Read on!

Who am I?

I am Ishan Sharma, 18-year-old guy from a small town called Hamirpur in India. I use the pen name “Mr. I”.

How I became a Blogger

Three years ago, in 2007, I got a small handbook with my favorite tech mag Digit, called Fast Track To Blogging. Back then, I did not have an internet connection. However, I still liked the idea of blogging. I read that book almost 10 times!

In 2008, when I finally got a connection, the first thing I did was to start a blog at Blogger.com. I did a lot of experimenting and learned a lot with my first blogs. In September 2008, I found two good online friends, Fransiska from Indonesia and SBA from the U.S. At that time, I did not have any idea they would become so important for me. In November that year, I started Blogging With Success with them. Unfortunately, Fransiska retired some months ago, but then Cheryl Bryan recently joined us as Contributing Editor.

And the rest is what I would describe as a fairy tale. It may sound like a regular story to you, but for me, this has been a life-changing experience.

Why I am taking a break

Well, in one word: studies!

While I am ready to leave my studies and become a full time blogger, I can not! I live in a country where people still think that only doctors and engineers are successful (and also that the internet is only for email, chatting and viewing adult websites!).

The only way for me to become a blogger is to get a degree (that too from a reputable institute) so that I can “prove” (as my parents said) that I am “brilliant”! And to get a degree from a good institute, I need to study hard and get a good score in the AIEEE (All India Engineering Entrance Examination).

Now, blogging takes a lot of time, and I don’t want to bombard readers with time pass posts, so I decided to take a break.

The AIEEE is on April 25. Results will be declared before June 7. If I do not get a good score, my blogging career will be over, but if I get a good score, I will get a new PC and a good broadband connection. (And if I am lucky, I might get the option of leaving my studies!)

What do you think?

Should I take a break? And the most important question is:

What do you think about me? Do I have what it takes to become a full time blogger?

SBA will be handling BWS till I come back. Till then, Goodbye!

This is not a goodbye forever. I hope I’ll see you all again!

Image from PhotoXpress.

Download Your Free Report: 1 Follower Per Minute.

Related posts:

1. Dare you hope to be the next SuperStar – Blogging Idol? Don’t confuse the search for the next blogging superstar with the TV show ‘American Idol‘. Sure some contestants for both “shows” may have delusions of grandeur, but the bloggers are a bit more realistic. They don’t have stage Moms to push them along and they know how hard it...
2. Starting down the path to successful blogging Learning what's most important about earning with your blog, your time and commitment to writing and promoting....
3. Windows Live Writer: Good or Bad? I had been using Blogspot’s native editor for a while until several weeks ago I finally got Windows Live Writer (WLW). This tool is absolutely free of charge –something rare from Microsoft– and excellent help for writing blog posts. (click the screenshot for a larger view) Windows Live Writer...

Image: William Hook

With so much competition out there, keeping your blog up to date and popular might seem like a full-time job. Just when you think you have your blog looking good with a great group of followers behind you, someone else comes along with something bigger and better. To make sure you stay in the game when it comes to keeping your blog attractive, here are some tips that might keep you on the path to success.

1. Pick Your Blog Topics Carefully

Consider doing a little research before you put too much time and effort into your blog in order to see what kind of competition you’re up against. This isn’t to say that you can’t be a leader amongst the crowd even if you do find there are similar blogs already out there, but doing your homework can prepare you for the amount of work you will likely have to do to beat out the competition. If you find a relatively unexplored subject and get your foot in the door early, you could be on the fast track to a popular blog site.

2. Stay Current

Letting your blog site sit unattended while people make comments or ask questions will make it appear as if you’re asleep at the wheel. Answering your followers’ questions and comments in a timely manner will hopefully keep them coming back for more.

3. Don’t Abuse Your Followers

It’s bound to happen. Someone disagrees with something you’ve posted and has gone about letting you know their opinion in all the wrong ways. Well, get used to it. You’re running a blog, not a happy ranch. People won’t always agree with you. But don’t let it deter you from your work or responding to your followers. Stay professional and don’t let your emotions get the better of you when responding to your visitors.

4. Don’t Rehash Old Topics

Rehashing the same content time and again is likely to lose your old fans and probably won’t bring in many new. It’s fine to update an old topic once in a while or revisit a popular subject that received a favorable response from followers, but beating certain subject matters into the ground will tire your audience quickly and turn them elsewhere for their information.

5. Reduce Clutter

Ads, pictures or too many links can detract from the overall appearance and usefulness of your blog to its users. Waiting for photos, videos, pages or the site itself to load can make people impatient and lead them to search for better sites. While a few related ads, a couple of informative short video clips or pictures are fine, remember that overdoing it can detract from the effectiveness and usefulness of your blog.

6. Balance Appearance and Substance

Just as with finding a significant other, finding the proper balance between looks and substance on your blog is often difficult. Look for ways to keep your blog’s appearance appealing, but, just as important, make sure you keep the information upon your blog up to date and pertinent.

7. Aesthetics Count

Yeah, I know, I just said find a balance between appearance and substance. That doesn’t mean you have to make your blog boring, though. People like pretty pictures and fancy graphs and charts. There is nothing wrong with using eye-catching graphics to pull visitors to your site as long as you make the information they gain there worth their time.

8. Keep It Simple

By keeping your blog simple and on topic, you diminish the chances of losing fans. Branching off on too many topics or making your subject too broad can lead to more work than you expected and pull focus away from the main theme of the blog.

9. Reference Other Posts

Referencing posts or other blogs you are maintaining is a great way to get exposure for your work. As you build your blogs, you might post some great information early in the site creation that may not initially get the readership it deserves. To get the full potential from your posts, it is important to direct future traffic to them.

10. Sing Your Praises

While you don’t want to come off as cocky, it’s up to you to market yourself and your successes. When you’re right, you’re right, and pointing out this fact is a great way to bolster not only your confidence, but that of your readers in your expertise as well.

Download Your Free Report: 1 Follower Per Minute.

Related posts:

1. Pillar Posts… How to write posts that really matter Toss conventional definitions and learn a different approach for building your blog. How to make ever post a pillar posts....
2. PostRank: Find and Read the Best! Internet is full of crap. Finding good content is not easy. PostRank lets you find the best content and make custom feeds from it....
3. How To Focus On Your Blog And Avoid Distractions Remaining focused is very difficult for anyone. For bloggers, it is even more difficult. We do most of our work (writing, promoting etc.) online and there are lot of things to distract here. Let’s take an example. When you write, do you completely focus on your blog and the...

This post looks at two Word Press plugins that allow direct editing of content. Front-end Editor and Inline Editor let you bypass the WP back-end to edit posts and pages. These plugins are good when developing a site where your client provides lots of content pages. It’s even more useful if the client is new to WP. The client needs to log in, but then simply presses “visit site.”

I’m developing a site for a client who needed to tweak the existing page content. So I installed the Inline Editor for her to use. No need to send me an e-mail about a minor word change. No need to fear going into the WP post editor.

Inline Editor Plugin

Wpexand’s editor is fairly limited. You can change only text and images in posts or pages. Titles and other WP elements are off-limits. But it works for my purposes.

Activate the inline editing by checking one of the first two boxes under “settings”; the third is optional.

Show edit button—adds a clickable pencil icon that opens the edit feature.
Convert Wordpress edit link—uses the WP link instead of the icon but only works if theme has one. [edit]
Edit content on double click—you can double click to open edit feature.

Also under “settings” you can specify the level of editing allowed:

- a simple panel of icons for only bold, italic, underline, alignments, lists and linking.
- a full panel of all NicEdit buttons.
- a custom panel of icons you select.

The user interface is a bit strange. To save your edit, you need to press the blue disc icon — the gray button only cancels. I’d expect two buttons or just one saying “save.”

If you want to keep it simple, restricting the editing tools that the client can access, then this might be the plugin for your site.

Front-end Editor Plugin

Scribu’s editor is more tightly hooked into Word Press, giving you a great number of elements to control inline. It’s nice to be able to edit comments inline without going to the dashboard (text only). You can also customize your own elements.

The image lists the standard editable fields.

Activate the inline editing by checking one or more of these boxes:

Enable the WYSIWYG editor—rich text editor with familiar icons. Otherwise, you see plain text. That’s a step backward…
Edit one paragraph at a time, instead of an entire post—the edit window shows only what you select.
Highlight editable elements—you’ll see a light yellow background behind areas you can click.

Here’s the rich text editor in the edit window:

To save your edit, you need to press the “save” button, otherwise “x” to cancel. The buttons are at the end of the content.

The Front-end Editor is probably meant for developers or experienced WP users who want to move fast.

Is in-line editing right for you?

Imagine. The client simply double-clicks on the screen to update a business address. Imagine. You just published a post and spotted a typo. Just click and edit the displayed article! If your premium theme has no “edit” link, imagine no longer going through the dashboard to find the page you want to change.

Based on my brief experience with these plugins, I found they keep the integrity of your WP post revisions list. Each save will update your database and allow you to restore to earlier versions. You can use the plugins for draft articles. It also may be useful for Editors who need to make a quick pass of a post before or just after it publishes.

If you decide to try in-line editing of drafts, always preview from the “Edit Pages” list. If you work in the preview from the post-edit window, they could be out-of-sync.

Does this type of direct editing seem like something you could use? Is the client being coddled? Does it add a layer of complexity—or make the blogger lazy? Leave a comment about your opinion and experience with in-line editing.

Download Your Free Report: 1 Follower Per Minute.

Related posts:

1. How To Add And Manage Tables In WordPress Posts Image via Wikipedia The TinyMCE editor of WordPress is feature rich and easy to use. But by default, it does not have any options to add and edit tables, a headache for beginners who do not know much HTML. If you always wanted to add nice tables in your...
2. Making WordPress Faster: Top Caching Plugins In the post about making your blog faster, I mentioned using Caching plugins for WordPress. In this article, I will be explaining how a cache plugin usually works and how it makes your blog faster. Of course, I will also talk about caching plugins available for WordPress. How A...
3. HeadSpace: Ultimate SEO Plugin for WordPress Blogs Lot of SEO Plugins are available for WordPress. But nothing can beat HeadSpace, the ultimate SEO plugin. Read how to set it up in this post....

Translation, please.

This poll asks how you feel about using codes that you recognize but may not understand: CSS, Html and Php.

Do you feel forced to know scripting and programming to properly support your blog? How much of a headache is it?

We’ve published several posts on using CSS for styling your blog. Likewise, you’ll find some articles about how Html can get you out of a tight spot:   Sweet ‘n Simple HTML or Codes for Comments.  However, there are times when you have no choice but to go under the hood to add or modify code.

Vote in our poll so we know where you stand.  Also leave us a comment about your experiences in coping with these strange and non-visual things.

How much should  blog owners know about Php, etc.?  Are there times you feel you are forced to learn more than you want about these coding languages? Let’s hear it.

Note: You may select more than one answer.

Download Your Free Report: 1 Follower Per Minute.

Related posts:

1. Sweet ‘n Simple HTML: Use those codes for Comments Surely no one can call you a ‘dummie’ if you have one or two html tricks up your sleeves.  You may have noticed that  many comment boxes state: “  some HTML allowed: img code em strong ul ol li “ This gives you the go-ahead to use html codes...
2. Are You Bored With Boring Poll Widgets? Are you a regular user of Poll widgets? Are you happy with what you get? Poll widgets that come with different platforms are somewhat limited in customization and options. There are other choices to solve this. Take a look at this service from PollDaddy. They offer two types of...
3. Sweet ‘n Simple HTML: Helping Html to Escape This post shows you how to include snippets of code in blog posts or comments — in such a way that they don’t disappear. The only way to display real code is to help the html  “escape” your platform’s  built-in editor. Why do I need to see html code?...

Okay, what is an iframe? How will I know if it breaks? How can I fix it?
Only recently did I realize I should know more about iframes. Often your knowledge expands out of necessity — when a problem hits you square in the face! Read this article, and store it in your memory to be called up when you face a similar problem.

The Problem

I had finally selected a good service, ChatRoll.com, to support my client’s new Chat Room. But try as I might, I could not embed the virtual chat room within a page! WP seemed to gobble up the html code, leaving only the link for a pop-up version. Sort of reminded me of the post on helping Html to escape WP’s built-in editors.

Definition of IFrame:

An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert (interactive) content from another source, such as an advertisement. … an IFrame behaves like an inline image …  – TechTarget

The Chat Room software provided code that contains an IFrame html tag to embed the interactive document (chat room). Such software often uses AJAX – Asynchronous JavaScript and XML. One of the prime examples is a Google Maps IFrame. If the IFrame software changes, site owners don’t have to upgrade anything in the post.

The Solution

As happens with Serendipity, while searching for an unrelated plugin, I discovered one that could solve my problem. It’s called “Insere Iframe” (Insert IFrame). Basically, it stops WP from stripping your code. Instead, you use a shortcode framed in square brackets to escape WP’s axe.

Here’s what I wanted my code to look like:

<iframe width=’750′ height=’600′ frameborder=’0′ scrolling=’no’ marginheight=’0′ marginwidth=’0′ allowtransparency=’true’ src=’http://chatroll.com/unitedswap-room/embed?fgcolor=4076b3&bgcolor=ffffff&textbgcolor=ffffff&textfgcolor=000000&sound=1&border=1&w=$0′></iframe>

Instead, WP removed all of the above! Without a word!

The Plugin version: (see differences highlighted in red)

[iframe: width='750' height='600' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' allowtransparency='true' src='http://chatroll.com/unitedswap-room/embed?fgcolor=4076b3&bgcolor=ffffff&textbgcolor=ffffff&textfgcolor=000000&sound=1&border=1&w=$0']

Success

The Chat Room is now entirely within the post page:

Now you know all I know about IFrames and how to fix them, should something break or disappear! There’s a WP plugin for everything!

Download Your Free Report: 1 Follower Per Minute.

Related posts:

1. How a Sitemap Can Help Visitors Navigate Your Blog The Dagon Sitemap Generator is a WP plugin that provides a visual site map for your visitors. I recently added this feature to a new client site. That site has a drop-down menu for static pages and a blog category menu on the blog section. A site with many...
2. How To Add And Manage Tables In WordPress Posts Image via Wikipedia The TinyMCE editor of WordPress is feature rich and easy to use. But by default, it does not have any options to add and edit tables, a headache for beginners who do not know much HTML. If you always wanted to add nice tables in your...
3. Making WordPress Faster: Top Caching Plugins In the post about making your blog faster, I mentioned using Caching plugins for WordPress. In this article, I will be explaining how a cache plugin usually works and how it makes your blog faster. Of course, I will also talk about caching plugins available for WordPress. How A...

The Dagon Sitemap Generator is a WP plugin that provides a visual site map for your visitors. I recently added this feature to a new client site. That site has a drop-down menu for static pages and a blog category menu on the blog section.

A site with many pages makes it easier for visitors to lose their place or miss an interesting sub-page! Site maps give visitors another reason to explore your blog, read more posts and lower the bounce rate.

The Dagon site map plugin installed so easily that I was confident enough to add the feature to BloggingWithSuccess. Mr. I, our official plugin/theme breaker, would be proud. Our new site map has the advantage of listing every post under its category. You can exclude pages and categories if you want.

What Is a Site Map?

There are two types of site maps. One is for your visitors (html/page version), and the other is for search engines (xml version). The xml version lays out all of your pages and all urls that might otherwise be missed by search engine spiders. This post discusses the site map for humans.

You can customize the Dagon Sitemap Generator from your WP admin panel. You have options to show multi-level pages (drop-down menu), multi-level categories and exclude pages or categories. The software creates a page list (prev/next) to avoid a gazillion links on one page. You can list posts by title or date within categories. The site map easily replaces the standard WP or theme archives. Actually, you can have both if you want, as you can see in the examples below.

Archives Before and Site Map After

Click image to enlarge	Click image to enlarge
Archives	Site Map

How to Create Your Site Map

1. Go to “Add a new plugin” and search for Dagon Design Sitemap Generator. Install and activate the plugin.
2. Go to Settings for “ddsitemapgen” and customize your map.
   Here are some of my options:
   - show posts and pages, with pages listed first
   - sort pages by title (you may want them by date)
   - show comment count for each post (you may want to add dates)
   - exclude 3 categories (uncategorized, misc, featured) and 7 pages
3. Create a new page called SiteMap. Add this shortcode in the html:
   <!– ddsitemapgen –>
4. Add the page to your menu or put a text link in a sidebar widget.

Quick Tip:How to find a page ID to exclude from site map or other widget

If you want to exclude pages from the site map, you must specify the numerical page ID, not the page name! WP hides the page ID — I’m not sure why.
To find the page ID, go to Pages->Edit and hover over the title of the page. The status bar of your browser will display a URL with a numeric ID at the end. This is the page ID.

- (WP widget support)

Similarly, for category ID’s, go to Administration > Posts > Categories. Hover over the category name to see the ID at the bottom of the browser window.

Benefits of a Site Map/Archive

• As the blog owner, you can refer to the list when you add internal links to new posts. The shortcut is already formatted.
• Visitors who don’t find what they want with the search box can scan down the site map as an alternate search tool.
• You see what posts inhabit each category and determine if some posts have too many categories. You may need to realign a few posts.
• Readers may spot useful content that would otherwise remain buried within your blog.

Do you have a site map or archive that lists all posts? If so, take a look and let us know what treasures you found, but don’t remember writing! Leave a comment with your thoughts about using this feature.

Download Your Free Report: 1 Follower Per Minute.

Related posts:

1. 5 Plugins To Make Your WordPress Blog Intelligent Is it 1995? No? Well, then nobody will like a dull (static) blog! So, let’s make your blog a little bit intelligent! By dynamic, I do not mean flashing scrolling text or anything like that! In fact, you should avoid that kind of “dynamic” blog! In this post, I...
2. HeadSpace: Ultimate SEO Plugin for WordPress Blogs Lot of SEO Plugins are available for WordPress. But nothing can beat HeadSpace, the ultimate SEO plugin. Read how to set it up in this post....
3. How to Keep Track of Your Blog Visitors Well, you started a blog and day by day you nurtured it with constant and relevant postings. You also filled your sidebar(s) with great gadgets. And, submitted your blog link to the major search engines like Google, Yahoo, Live, and Askjeeves. One month passed, and it seems no visitors...

There are times when you need to blackout your entire blog, allowing access to administrators only. This article discusses some of the reasons and predicaments that make the Maintenance Mode plugin so useful. I’ll give you information to create your own custom page for a ‘coming soon’ or launch type announcement. You can use these instructions to personalize the default  ‘back in 6o minutes’ page that comes with the plugin.

Why Would I Want To Hide Blog Content?

As blog owners or consultants, ‘dig we must’ —  to maintain the underpinnings of our blogs. We routinely upgrade themes, WordPress and plugins. But sometimes ‘maintenance’ is anything but ‘routine.’  There are three basic scenarios that may warrant a message to all visitors when the site is having a very ‘bad hair day.’

1. An upgrade or plugin installs ’successfully’, but when you view the blog, you see extraneous text (html, php code) and/or error messages you never heard of. Nothing less pleasant than that. Don’t panic! Switch to maintenance mode and tell readers to come back in an hour.
2. You use a framework-type design theme like Thesis or Frugal. No doubt you get a knot in your stomach whenever there is an upgrade announcement. You’ve make dozens of customizations and fear the site will be garbled in the process of upgrading. Don’t panic — activate your maintenance mode and start scrambling for that custom code.
3. You have a new hosting account and plan to move an existing blog or create a brand new one for your client.  You don’t want anyone who knows or stumbles on the domain name to be able to see an incomplete site. Talk about a bad first impression. You want them to know the site is under renovation or soon to be launched. Don’t panic, create a custom launch page and activate the maintenance mode plugin. If you client or someone you trust needs to see the site  during development, just give them administrator access.

Maintenance Mode Plugin – the Basics

Activating/Deactivating

When you install and activate the WP plugin for Maintenance Mode,  you can easily turn blocked access on and off. Use the Settings section on your WP Dashboard to quickly adjust the mode.

Settings to Block Access

On the same page, you can modify the basic message to include your blog’s name, url and how long the blackout will last. For this basic message, only Html is allowed — no PHP. Here’s a sample of the basic default:

The default splash screen

You’ll see a warning at the top of the dashboard reminding you to turn off the block when all is well again.

Granting Access

By default, only administrators have access when maintenance mode is on. But you can grant access to others such as a Contributor or Editor, by using the Role Manager plugin. Those with access don’t see the splash page and therefore have access to all capabilities defined for that role. The plugins accomplish this by allowing the new capability ‘access_on_maintenance’ to be turned on for different roles.

Beyond the Basics – Use the 503.php page

The way the plugin controls access is by using a standard host message type:

503 Service Temporarily Unavailable

Similar to the 404Page Not Found error, blog owners and template developers can customize the 503 page for service interruptions.  The Maintenance Mode plugin has an option to use your theme’s 503.php instead of the basic message described above.

use custom maintenance page

So this is your opportunity to modify the page as you please. Except you can’t use WP theme functions like ‘get_sidebar().’

How to customize the 5o3.php

1. To compose your custom message, create a new temporary page or post . Remember it will be on a plain screen, no sidebars or footer.  Here’s one I composed:

custom splash page

2. When you’re satisfied with the page, view and copy the Html which you’ll need for the next step.

3. To open the theme’s 503.php, press Editor under Appearance on the Dashboard. Paste your custom message  (step 2) after the < body > and before the < /body > tags. Save the file. Delete the temporary page or post you used.

Find your theme's 503.php

You’re now ready to activate maintenance mode. Test it by logging out of WP or opening a different type of browser to see the splash screen!

Have you used this handy plugin?  If not, how do you handle situations when your blog has unexpected appearance or functional problems after an innocent modification?

Download Your Free Report: 1 Follower Per Minute.

Related posts:

1. HeadSpace: Ultimate SEO Plugin for WordPress Blogs Lot of SEO Plugins are available for WordPress. But nothing can beat HeadSpace, the ultimate SEO plugin. Read how to set it up in this post....
2. How To Add And Manage Tables In WordPress Posts Image via Wikipedia The TinyMCE editor of WordPress is feature rich and easy to use. But by default, it does not have any options to add and edit tables, a headache for beginners who do not know much HTML. If you always wanted to add nice tables in your...
3. Blogger Sequel: Add Custom Social Bookmarking Icons Recently we learned how to add custom social bookmarking  icons for WordPress. Well, that lovely feature is “NO LONGER JUST FOR WP!” I wrote a Blogger tutorial at BPWebNews, “Adding Custom Social Bookmarks to Blogger.” In this BWS sequel post I’ll talk about the Blogger hack and some more...

Many of our visitors use Google’s Blogger platform, so in this series I’ll focus on Blogspot Widgets and Hacks. A sidebar widget such as “recent posts” can be created through Blogger’s “add gadget” feature. A hack is tutorial code that the owner must carefully introduce into her template to make a feature such as the tabbed widget work. This post gives some tips on popular features you can add to your Blogspot blog with little effort: post summaries (ReadMore), recent comments, and recent posts.

The Blogger team has been furiously adding features that work seamlessly with your blog. Blogger is giving authors a decent alternative to heavy template editing. Having several third parties involved in your code carries risks, not the least of which is the complexity of finding the right spot for the hack or the heartache of having JavaScripts stop working. And what about those annoying credit links below each widget? Hopefully, soon a thing of the past.

ReadMore

If your blog publishes several long articles on the home page, don’t make the readers scroll forever. With the readmore feature you can specify a summary for the homepage articles, followed by a “continue reading” link to the full post. Many refer to this as a “magazine style” design. Readers can scan down, read your tantalizing summaries and decide which post to read.

There are plenty of template hacks for this style, but most of them are too complicated for the non-techie to install. I recommend Blogger’s Integrated ReadMore feature. Blogger refers to it as “After the Jump summaries.”

How to Install Blogger’s ReadMore:

1. For each post that appears on the home page, you need to decide where the summary text ends and insert the “jump” marker. Use Blogspot’s new Editor toolbar to make this task even easier.Edit the post in Compose mode, place the cursor at the end of the summary and click the “jump to” icon – looks like a torn page.
   

   The separator appears across the page of your draft post, reminding you where the summary ends. This is where the “read more” link will appear after publishing.

   If you don’t use the new Editor you can put the correct code in the HTML view of your draft post. It’s just an html comment tag, a place holder for Blogger to separate the summary:
   <!— more –>

2. Just publish the post and you’re done. Unless – the “read more” is not there. Then your template is heavily modified and you have to dig in even further! This can happen with customized third-party templates. Google’s help article for creating these ‘”jump” summaries tells you what to do (read the bottom of the article). Drop a comment if you need further clues.
   

TIP 1: Use Blogger’s post template feature to remind you about the jump indicator. Blogger automatically seeds each new post with the text your specify. Go to Blogger Settings, Formatting and scroll to the “Post Template” section. For the ReadMore you might specify:
Summary Here
Place readmore here (icon or html tag)
Remainder Here
In fact, you can have any preformatted text here, e.g. your signature or reminders to subscribe. Links and image references must be in html.

Recent Comments

Many visitors are interested in community dialog. The recent comments widget gives you another way to direct readers to popular discussions. Until a few months ago the only way to add such widgets was via an HTML/JavaScript gadget. BloggerBuster provided the most reliable script. However, Amanda created a widget that is now featured (integrated) in Blogger’s bag of gadgets. Installing the Blogger gadget is as easy as pie.

The older one has more functionality, but you can’t argue with reliability — Blogger’s new gadget is the clear winner. Today I could not get the original BloggerBuster script to work. That situation is caused by third party hosting being unavailable. Sometimes scripts stop working in certain browsers. So I’ll give you both methods and you can see the tradeofff and decide for yourself.

This picture shows the differences: (the JavaScript is on the left)

The new one eliminates the offsite credit link, but does not show the post title and did not interpret special characters like apostrophes (&#39; on first comment).

How to Install JavaScript Recent Comments Widget:

1. Go to Layout on the dashboard. Click “Add Gadget” and select the Html/Javascript gadget.
2. Copy and paste this code, but be sure to change the blog url to your own!

   <span style="align:left;">
   <script style="text/javascript" src="http://kunoichi.info/blogger_buster/comments.js"></script><script style="text/javascript">var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=60;</script><script src="http://bpwebnews.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></span>

3. Save and move to the sidebar. Hope it works every day. This is the one I use, and it has been pretty reliable.

How to Install Blogger’s Recent Comments Widget:

1. Go to Layout on the dashboard. Click “Add Gadget.” Instead of Basic gadgets, click “Most Popular” in the left sidebar.
2. You’ll see this image:
   Click and follow the steps that let you define the height (e.g. 200px), number of comments to display (e.g. 10) and comments summary length (e.g. 150 characters).
3. Save and move to the sidebar.

Recent Posts

The directory of integrated Blogger widgets just keeps growing. Take a look and keep your Blogger gadgets current. Recent Posts are yet another way to attract new visitors to go more deeply into your blog. They will surely find great content.

For displaying recent posts, I use the BloggerWidgets version, shown on the left of this image. The other is from BloggerBuster.

BloggerWidgets (left) and BloggerBuster

Obviously, the BloggerWidgets version shows the post thumbnails.You can also display the posts from any blogger blog by supplying the url. Other options include

How to Install Advanced Recent Posts Widget:

1. Go to Layout on the dashboard. Click “Add Gadget.” Search for “recent posts.”
2. You’ll see this image:
   
   Click and follow the steps that let you define the options you want.
   By Blogger Widgets
3. Save and move to the sidebar.

How to Install Standard Recent Posts Widget:

1. Go to Layout on the dashboard. Click “Add Gadget.” Search for “recent posts.”
2. You’ll see this image:
   
   Click and follow the steps that let you define the options you want.
   By Blogger Buster
3. Save and move to the sidebar.

TIP 2: If you use the ReadMore feature, then it makes sense to list your Recent Posts in the sidebar for single pages only. To do that, you need to use a template hack that sets a conditional display of the Recent Posts widget.
Go to this post for a simple tutorial on hiding Blogger widgets. You can use the technique for any widget.

Conclusion of Blogger Series Part 1

Blogger has indeed come a long way in modernizing its publishing interface. It all started in August as part of their 10th Anniversary Celebration. Join us for future segments in this series. Be sure to sign up for our RSS feed.

Of course, leave a comment about your experience with these blogger widgets and let me know what you’d like to see next.

Download Your Free Report: 1 Follower Per Minute.

Related posts:

1. 15 Useful Blogspot Widgets and Hacks Blogspot is a good platform but lacks many simple features. Here are 15 widgets and hacks including Recent Posts, Popular posts and Related Posts....
2. Poll: Do You Use Recent Visitors Widget? Recent Visitors is one of the most seen widgets on Blogs these days. For those who don’t know, it is a widget that usually displays the Avatars of Recent Visitors from a specific network. For example, if I place a Recent Visitors widget from Blog Catalog, Avatars of Blog...
3. Widget Checklist for New Bloggers When designing a blog, which widgets are essential? Listed here are the most useful widgets for any successful blog....