___
Hat tip: Kinchie.

WordPress Inspiration from blogan.

Newest feature: the sidebar menu collapses yet retains full functionality.

Click the pictures for more description.

WordPress 2.7 User Interface from blogan.

• Audio player. Audio player creates an inline player for mp3 files. Using it is simple:

  [audio:hillarylaugh.mp3]

  [See post to listen to audio]

  The filename after “audio:” is either in a defined directory on your web host or can be an absolute web address to anywhere on the Internet. Remember, hot linking to someone else’s mp3 file is bad form.

• Easy tube. Easy tube embeds a YouTube video in a post. Using it is similar to audioplayer:

  [youtube:http://www.youtube.com/watch?v=OXAH3WVhhwg]

  The web address after “youtube:” is the YouTube address of the video, that is, the address that shows in your browser’s address bar.

Both plugins can be used in WordPress’ visual editor or HTML editor — neither converts the square brackets to anything else.

What plugins do you use to help display multimedia content on your blog?

Next up: stopping spam.

Update. I’m now using Viper’s Video Quicktags to display YouTube and other videos.

Update 2. Embedding of videos is being added to the WordPress core for version 2.9 — no plugin needed.

Starting a Blog — Multimedia Content Plugins from blogan.

I chose the K2 theme for Impolite Company and blogan.net for the following reasons:

• K2 Sidebar Manager. WordPress supports widgets that display recent comments, calendars, blogrolls, etc., on your blog’s sidebar without programming or editing your theme’s files. Unfortunately, WordPress’ widget support displays the same widgets on every page of your blog.

  K2 Sidebar Manager lets you control where on your blog each widget appears: the main page, individual pages, single post pages, the archives page, or even individual posts. I use K2 Sidebar Manager’s display feature to restrict my lengthy blogrolls and Google Reader shared items to the long main page.

  Note: WordPress is planning to add most of K2 Sidebar Manager’s functionality. Once that happens, all themes will be able to take advantage limiting where widgets appear.

• Configurable columns. K2 can have zero to two sidebars in addition to the main content column. The width of the header and page automatically adjusts and K2 Sidebar Manager automatically supports placing widgets in these sidebars. If you want, the blog can be screen width aware and move the sidebars to the bottom of the page if a visitor’s screen width is too narrow to display the sidebars beside the main content.
• Archives page. K2 creates an archives page that allows visitors to browse your posts by tag, category, or date. Nice!
• Page menu. When you create a WordPress page, K2 places its title in a horizontal menu in the bottom of the header. This is handy for “About” and the archives pages.
• Custom CSS file. K2 supports a custom CSS file that changes the appearance of your theme and can be selected from your K2 Options screen. It operates like the child themes mentioned above. Keeping your custom CSS separate from the core K2 files simplifies the upgrade process when a new K2 version becomes available. The custom CSS file also defines the size of your header, enabling WordPress’ header upload function to crop to the correct proportions for your blog.

  My custom CSS file changes my colors, background images, fonts, link styles, and supports some plugins. I also use it to unclutter my blog by hiding some extraneous icons and messages I don’t want to display.

  K2 comes with two sample custom CSS files to get you started.

K2 has some other features that I’m not currently using, but you might find useful.

• Asides. K2 allows you to designate a category as an “aside.” K2 will display all posts in this category with different styling. If you choose inline asides, the post title uses a smaller font. For sidebar asides (which uses K2 Sidebar Manager), the an aside’s title doesn’t display, just its text.

  Asides are useful for short posts. For now, I use Twitter as a “microblog” and import the “tweets” into my sidebar using Twitter Tools. Josh Bancroft uses Twitter Tools to save his tweets as asides in his WordPress database and have them displayed in a sidebar.

• Advanced navigation. K2′s advanced navigation is an AJAX capability that can load older posts without having to reload the entire page. I go back and forth as to whether I like it. I’m not using it right now.
• AJAX commenting. When someone leaves a new comment, AJAX commenting displays it at the bottom of the list of comments without reloading the entire page.
• Live search. Live search displays search results as someone start entering letters in the search box.

What theme did you choose and why?

Next up, content plugins.

Update 10/1/08. The latest K2 nightly build now supports threaded comments, but no longer supports AJAX commenting.

Starting a Blog — Choosing a WordPress Theme from blogan.

WordPress Admin

You are using a development version (2.7-hemorrhage).

The latest SVN version of WordPress now incorporates the admin user interface developed in its Crazyhorse branch. Looks like the WordPress gang changed the version from 2.7-bleeding to 2.7-hemorrhage in the process.

Very nice!

Quote of the Day — WordPress from blogan.

• K2 sidebar modules. Widgets on steroids — K9 uses plain widgets
• Custom CSS files. Nice to maintain style changes when K2 updates
• Asides. Short posts for the sidebar — not much need anymore with Twitter
• Archives page. Automatically generated archives page with tag-, category-, and time-based archiving
• Live search. AJAXy search capabilities — no fun if your page loads slowly
• Advanced navigation. AJAXy loading of previous pages

Although I’ve grown attached to the first couple, I don’t really care about the latter three or four.

K9 sticks with K2′s use of blue and adds a bunch of speed. Wow!

I’m concerned. With a theme like this, I’ll need to focus more on content than appearance.

I’ll experiment a little longer, at least long enough to get my >>--> in the header. Maybe…

For now, my initial opinion is K9′s no dog.

K9 WordPress Theme from blogan.

It’s time to try a new comment system. I’ve chosen Disqus. Features I like:

• Threaded comments. You can respond to a specific comment.
• E-mail notification. I’ll know when you leave a comment and I’ll be able to respond via e-mail and have it posted here. As a commenter, you’ll have the same benefits.
• Gravatar support. Pretty pictures of us. I don’t know whether I can control the ratings or get wavatars or identicons.
• Comments can be edited. At least if you have a Disqus account.

Issues about Disqus that concern me:

• No import feature. To keep all the old comments visible, I end up with two different commenting systems on Blogan.net. Supposed, this will be fixed “real soon now.”
• No useful export feature. Yeah, I can export the comments into XML or RSS. That doesn’t do me much good unless I can also the import that into WordPress’ standard comment database. If I decide I don’t like Disqus, I may end up walking away from the comments that get posted using Disqus.
• Spam filtering. I have had good luck with Akismet and Spam Karma 2. I hope this is just fear of the unknown instead of a real problem.
• No control over no-follow, at least not easily. I know of only one commenter that knew and cared that Blogan.net has (had?) no-follow turned off.
• Comments can be edited. (Yeah, I know — I listed that as a feature I like.) After a certain time period, I’d like the comments to stick.
• Less ability to edit. I don’t have the same ability to edit my comments I have as the administrator of Blogan.net. How do I easily upload pictures, what HTML works, what doesn’t? I guess some experimentation is in order.

In short, I’m (temporarily?) leaving an underutilized commenting system that works to experiment with an unknown that might increase comments here on Blogan.net.

What do you think? Try leaving a comment. Can you edit it? Do you have a Disqus account?

Update. Okay. I’ve spent a little more time with Disqus. Time to update my lists. Pros:

• Daniel Ha, who trolls the Disqus support forums and writes the Disqus blog, also watches Twitter and responds quickly. He also has a new follower on Twitter.
• Comment consolidation. All the comments I leave on Disqus-enable blogs appear on my Disqus community page. It will be easier to follow the conversations I’ve joined.

Cons:

• Strange markup. The Disqus editor does not do markup like WordPress. Disqus puts an entire comment in a single <p> tag. Attempting to create paragraphs by hitting the return key twice result in <br><br> instead of closing the paragraph and starting another one. This prevents me from easily styling my comment’s line and paragraph spacing to match the rest of my blog.
• Documentation. Disqus’ documentation isn’t there, yet. I haven’t found a way to search the forums, either.

The experiment continues…

Update. Not anymore.

The Disqus Experiment from blogan.

WordPress 2.3 is Available from blogan.

Blogan.net now uses the following CSS in its custom CSS file to display both sidebars display on the right:

/* Page Layout */
h1 { padding-top: 5px; }
.columns-three #page {
	width: 950px;
	padding: 0;
	border: 0px solid #333;
	border-top: none;
	clear: both;
	}
* html .columns-three #page {
	width: 952px; /* for IE5 and IE6 in quirks mode */
	w\idth: 950px; /* for IE6 in standards mode */
	}
#page {
	margin-top: 10px;
	border-top: 0px solid #333;
}
.columns-three .content {
	padding: 0;
	overflow: hidden;
	}
.content {
	border-bottom: 1px solid #888888;
	}
.columns-three #primary {
	margin-left: 0; /* override style.css */
	float: left;
	width: 499px;
	padding: 20px 25px 20px 25px;
	overflow: hidden;
	border-right: 1px solid #888888;
	}
* html .columns-three #primary {
	width: 550px; /* for IE5 and IE6 in quirks mode */
	w\idth: 499px; /* for IE6 in standards mode */
	}
.columns-three #sidebar-main {
	float: left;
	width: 210px;
	padding: 10px 10px 10px 20px;
	overflow: hidden;
	}
* html .columns-three #sidebar-main {
	width: 240px; /* for IE5 and IE6 in quirks mode */
	w\idth: 210px; /* for IE6 in standards mode */
	}
.columns-three #sidebar-alt {
	float: right;
	width: 125px;
	padding: 10px 25px 10px 10px;
	overflow: hidden;
	left: 0; /* override style.css */
	margin-left: 0; /* override style.css */
	}
* html #sidebar-alt {
	width: 160px; /* for IE5 and IE6 in quirks mode */
	w\idth: 125px; /* for IE6 in standards mode */
	}
#s {width: 70%; }

I also updated the K2 Community Forums with this information.

K2 Three Columns, Both Sidebars on the Right, Part II from blogan.

Finally, thanks to all the help on the kaytwo Google Code forum and Avi Alkalay’s blog, Avi’s Google Maps Plugin for WordPress now works on my K2 blog in both Firefox and Internet Explorer!

This is a test in hybrid display mode.

Need two maps for the full test…

To duplicate my success, you’ll need to do a few things. The first two involve modifying your CSS.

K2′s most serious problem with the Inline Google Maps Plugin is displaying a gray background instead of the map. To fix this, search style.css for the following text:

#primary .entry-content img {
	margin: 0 5px;
	padding: 4px;
	border: 1px solid #ccc;
	max-width: 100%;
	}

The max-width declaration is the culprit. You have three options:

• Delete or comment out the max-width line of text.
• Change the 100% value to a lower percentage. You’ll need to experiment to find the appropriate value.
• Replace 100% with none.

I recommend using the third option by placing the following in your custom scheme file:

#primary .entry-content img {
	max-width: none;
	}

You will only have to do this once. Updating your K2 theme should have no effect.

If you’re not using a scheme file, place the text at the end of your style.css file. You’ll then need to remember to make this change every time you update the K2 theme.

K2′s second problem is displaying the “map,” “satellite,” and “hybrid” buttons too tall. This was traced by people smarter than me to another portion of the style.css file. You can solve this issue by inserting the following text in your custom scheme file:

.entry-content div {
	margin: 0;
	}

The next change needs to be done each time you insert a map. After you create the anchor link, wrap it in <div> tags. For example, the map above is created with:

<div><a href="http://maps.google.com/maps?f=q
&hl=en&q=4440+Winding+Way,+Sacramento,+CA+95841
&sll=37.0625,-95.677068&sspn=47.033113,68.115234
&layer=&ie=UTF8&z=16&ll=38.641931,-121.360645
&spn=0.011397,0.023668&t=h&om=1&iwloc
=addr" title="googlemaps">This is a test in hybrid display mode.</a></div>

Notice the <div> tags surrounding the rest of the information. (I also arbitrarily broke the lines in the example listing so it would fit within my margins.)

That should do it!

This is a republication of an earlier post, heavily edited for simplicity.

Google Maps Plugin Works for K2 Theme in Internet Explorer and Firefox from blogan.