/*
 * get a hook on the buttons (> or < or >> or <<) of a Click PickList control.
 * call in domloaded() passing the name of the PickList and a js callBack method to be envoked.
 * the callBack method should have one parameter to receive the clicked button element.
 * an additional attribute ('forid') is also set on the button element, 
 * which will contain the requested PickList name.
 *
 * DEMO:
 * The Java Click component...
public Form form = new Form("myForm");
public PickList myPicker = new PickList("myPicker", "My Picker");
@Override
public void onInit() {
    super.onInit();
    form.add(myPicker);
}
 * Now for the JavaScript...
function domloaded() {
    attachToPickListButtons("myForm_myPicker", demoCallBack);
}
function demoCallBack(el) {
	if (!(typeof(el.forid) == 'undefined')) {
		var id = el.forid;
		var directionClicked = el.value; // > or < or >> or <<
		var toSelected = null != directionClicked.match(">");
		var moveAll = null != (directionClicked.match(">>") || directionClicked.match("<<"))
		var plh = new pickListHelper(id);

		var toString = "id = '" + id + "'\n";
		toString += "directionClicked = '" + directionClicked + "'\n";
		toString += "toSelected = '" + toSelected + "'\n";
		toString += "moveAll = '" + moveAll + "'\n";
		toString += "SelectedList = '" + typeof(plh.getSelectedList()) + "'\n";
		toString += "UnSelectedList = '" + typeof(plh.getUnSelectedList()) + "'\n";
		toString += "HiddenList = '" + typeof(plh.getHiddenList()) + "'\n";
		alert(toString);

		if (!moveAll) {
            if (confirm("Just for fun, let's move ALL items to " + (toSelected ? "unselected" : "selected") + " \n(opposite direction you just chose).")) {
                plh.moveAll(!toSelected);
            }
        }
	}
}
*/
function attachToPickListButtons(id, fn) {
    $$("input[onclick^='pickListMove'][type='button']").each(function(field) {
        if (!(typeof(field.onclick) == 'undefined')) {
            var fieldOnclick = "" + field.onclick;
            if (null != fieldOnclick.toLowerCase().match(id.toLowerCase())) {
                Event.observe(field, 'click', function(event) {
                    var element = Event.element(event);
                    element.forid = id;
                    fn(element);
                });
            }
        }
    });
}
/*
 * a wrapper around a Click PickList control
 */
function pickListHelper(id) {
	var _selectedList = $(id);
	var _unselectedList = $(id+ "_unselected");
	var _hiddenList = $(id+ "_hidden");

	this.getSelectedList = function() {
		return _selectedList;
	}

	this.getUnSelectedList = function() {
		return _unselectedList;
	}

	this.getHiddenList = function() {
		return _hiddenList;
	}

	this.moveAll = function(toSelected) {
		// call pick list method from click control to do the heavy lifting
		var fromList = toSelected ? _unselectedList : _selectedList;
		var toList = toSelected ? _selectedList : _unselectedList;
		pickListMoveAll(fromList, toList, _hiddenList, toSelected);
	}
}

There seems to be a conflict between the SyntaxHighlighter javascript and the BlogEngine.NET Widget Zone administration drag-and-drop javascript. When the SyntaxHighlighter Extension is enabled, the drag-and-drop in the Widget Zone does not work although there doesn't seem to be any javascript errors.

Luckily we don't need to rearrange the widget zone that often. So when you need to do that just disable the SyntaxHighlighter Extension temporarily, rearrange your widgets and enable the SyntaxHighlighter Extension again.

As promised in a previous post here is the Grass And Sky template adapted for BlogEngine.NET 1.4

This theme is not a 100% complete yet, but maybe you can make it work for yourself.

Download and give it a go.

Looking for ways to add syntax highlighting to my blog I came accross Scott Dougherty's article for Adding SyntaxHighlighter to BlogEngine.NET and then Chris Blankenship's SyntaxHighlighter Extension for BlogEngine.NET.

I really like his extension, but I wanted the installation path and loaded language scripts to be configurable so I've updated his extension to use the BlogEngine Extension Manager.

1. Download SyntaxHighlighter
2. Extract and upload the SyntaxHighlighter code to your blog (I renamed the dp.SyntaxHighlighter directory to just SyntaxHighlighter)
   eg. ~/extensions/SyntaxHighlighter
3. Download, extract and upload the SyntaxHighlighter.cs file into the ~/App_Code/Extensions directory

   NOTE:
   If you already had the SyntaxHighlighter Extension from Chris Blankenship installed, you might have to delete the "~/App_Data/datastore/extensions/SyntaxHighlighter.xml" file before the new extension settings will be loaded.

4. Login to your blog and go to "Extensions" under the "Control panel"
5. Click on "Edit" next to the "SyntaxHighlighter" extension and configure as required (see preview below)

For a list of supported languages see the syntaxhighlighter wiki

For Windows Live Writer support:

1. Download and install Windows Live Writer and the SyntaxHighlighter for Windows Live Writer plugin (Requires .Net 3.5 framework)
2. Update the blog style (In Live Writer under the "Weblog" menu then "Edit Weblog Settings..." and click on the "Editing" tab)

NOTE:
If you have custom ordered list item styles in your theme, you might have to make a small change to the SyntaxHighlighter CSS. In my case I've got a custom list-style-image so I had to make the following change in the "SyntaxHighlighter\Styles\SyntaxHighlighter.css" file:
in the following bit, I added list-style-image: none;:

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span 
{
margin: 0;
padding: 0;
border: none;
list-style-image: none;
}

Index: /BlogEngine/BlogEngine.Web/extensions/SyntaxHighlighter/Styles/SyntaxHighlighter.css 
=================================================================== 
--- /BlogEngine/BlogEngine.Web/extensions/SyntaxHighlighter/Styles/SyntaxHighlighter.css 
+++ /BlogEngine/BlogEngine.Web/extensions/SyntaxHighlighter/Styles/SyntaxHighlighter.css 
@@ -17,6 +17,7 @@
margin: 0;
padding: 0;
border: none;
+	list-style-image: none;
}
.dp-highlighter a,

I just moved my blog from Blogger to BlogEngine.NET. I done this for various reasons, but mainly because I'm a control freak.

Although I could have used the "blog.importer.application" provided by BlogEngine.NET, I did the export and import manually to have full control of the process.

Normally when moving domains the best way would of course be to setup 301 redirects, So my new blog to keep rankings etc. but Blogger has made that impossible.

I searched for ways for just forwarding all the requests to the Blogger blog to my new blog and found many posts on moving from Blogger to Wordpress. So this post just includes the specifics for BlogEngine.NET.

The main two sources I used was:

• http://www.libertyinteractivemarketing.com/blog/successfully-forwarding-blogger-to-wordpress/
• http://procrastiblog.com/2008/07/12/redirecting-blogger-posts-to-wordpress/

I wanted my old blog to stay up with posts intact so that people that has bookmarked it or any posts can still find what they are looking for and because read this post: why-you-should-never-delete-your-blogger-blogs.

The Walkthrough:

(Remember to replace "YOUR_NEW_BLOG_DOMAIN_HERE" with your blog's address.)

• Setup the auto redirect:
  Log into your Blogger account, navigate to the "Layout" tab and click on "Edit HTML". In the template editor put the following in the <head>...</head>:

  <meta content='5;url=http://YOUR_NEW_BLOG_DOMAIN_HERE/' http-equiv='refresh'/>

  This will handle the front page redirection of the blog.
• To let the users know that your blog has moved, and that they will be redirected, add a message to the page:

  <div style='position: absolute; top: 30px; left: 30px; border: solid 2px #333; color: #000; background-color: yellow; padding: 5px; width: 400px; z-index: 5; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: large;opacity: .4;filter: alpha(opacity=40);'>
  <p><strong>My blog has moved!</strong></p>
  <p>You should be automatically redirected in 5 seconds. If not, visit<br/> <a href='http://YOUR_NEW_BLOG_DOMAIN_HERE/'> <strong>YOUR_NEW_BLOG_DOMAIN_HERE</strong></a> <br/> and update your bookmarks.</p>
  </div>

  Place this right after the opening <body> tag.
  
• Because your new blog will contain all the posts from the old Blogger blog you need to avoid being penalised for duplicate content, add this to the "head" section as in point one...

  <META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW"/>
  <META NAME="GOOGLEBOT" CONTENT="NOINDEX, FOLLOW"/>

  NOINDEX FOLLOW tells the crawler not to index the Blogger page but to FOLLOW the redirect. NOINDEX will also instruct the crawler to drop any already indexed version of page.
• To make the individual posts forward to their new counterparts a few things need to be done:
  1. On the Blogger control panel in “Settings -> Formatting”, change the Timestamps on posts to the MM/DD/YYYY format.
  2. Look for this code in the Blogger Template

  <b:section class='main' id='main' showaddelement='no'>

  and enter the following widget code under it (combine the three bits):

  <b:widget id='Redirector' locked='true' title='Blog Posts' type='Blog' >
  <b:includable id='main' >
  <b:if cond='data:blog.pageType == "item"' >
  <b:loop values='data:posts' var='post' >
  <div id='redirectorTitle' style='visibility:hidden' > <data:post.title/ > </div >
  <script type='text/javascript' >

  var new_domain = 'http://www.lehmkuhl.za.net/blog/post'
  function utf8_uri_encode( str ) {
     var high_code = new RegExp(/[\u0080-\uffff]+/);;
     new_str = str;;
     while( m = high_code.exec( new_str ) ) {
        new_str = new_str.replace(m,encodeURIComponent(m));;
     }
     return new_str;;
  }
  var title = document.getElementById('redirectorTitle').innerHTML;;
  // [INCOMPLETE] Keep percent signs that aren't part of an octet?
  title = title.replace(/<[^>]*?>/g,'');; // remove tags
  title = title.replace(/&.+?;/g,'');; // remove entities
  title = utf8_uri_encode(title);; // handle UTF-8 characters
  title = title.toLowerCase();;
  title = title.replace(/[^%a-z0-9 _-]/g,'');; // remove punctuation
  title = title.replace(/\s+/g,'-');; // turn spaces into hyphens
  title = title.replace(/-+/g, '-');; // collapse runs of hyphens
  title = title.replace(/^-+/g,'');; // remove prefixed hyphens
  title = title.replace(/-+$/g,'');; // remove suffixed hyphens
  var timestamp = ' <data:post.timestamp/ >';
  timestamp = timestamp.split('/');
  timestamp = timestamp[2]+'/'+timestamp[0]+'/'+timestamp[1];
  var new_page = new_domain + '/' + timestamp + '/' + title + '.aspx';;
  document.location.href = new_page;

  </script >
  </b:loop >
  </b:if >
  </b:includable >
  </b:widget >

  
  This will redirect the blogger post...
  http://someblog.blogspot.com/2008/06/some-blog-post.html
  ...to...
  http://YOUR_NEW_BLOG_DOMAIN_HERE/post/2008/06/28/some-blog-post.aspx

To see a working example visit my old blog at http://somethingsubversion.blogspot.com/.

The Grass And Sky theme is loosely based on the Dirtylicious website template by Viktor Persson which which I originally ported to a BlogEngine.NET 1.3 theme and then back into a standard website template.

I will publish the BlogEngine.NET version as soon as I have finished tuning it for the 1.4 release.

Go ahead, download and try it. Please tell me what you think.