buena suerte!

はじめに

基本赤文字部分をコピーして貼り付けていくだけで設置が可能ですが
一度メモ帳などのテキストエディタに個別記事のHTMLテンプレートをコピーし、エディタ側で編集した後
もう一度HTMLテンプレート編集ウィンドウにコピーする形をとったほうが失敗しづらいと思います。
また、引用表示幅が狭い為に自動的に改行されている所がありますのでご注意くださいませ。

では解説はじめます。まず個別記事のHTMLテンプレートの

<td><textarea id="text" name="body" rows="10" cols="50"></textarea></td>

ここに

<td><textarea id="text" name="body" rows="10" cols="50" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea></td>

このように赤文字部分を追加します。

つぎにプレビューを表示する場所を作成します。

<td><textarea id="text" name="body" rows="10" cols="50" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea></td>
</tr>

この下に

<td><textarea id="text" name="body" rows="10" cols="50" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea></td>
</tr>
<tr>
<td valign="top"><label for="coment_preview">プレビュー: </label></td>
<td><div class="comments-body" id="comment_preview" style="padding:0;margin:0;">ご利用のブラウザ、設定ではご利用になれません。</div></td>
</tr>

のように赤文字部分を追加します。
ただし、最近のテンプレートではコメントフォームのテーブルの構造が若干違うようですので、上の当該部分を

<td valign="top" nowrap><label for="coment_preview">プレビュー: </label></td>
<td colspan="3"><div class="comments-body" id="comment_preview" style="padding:0;margin:0;">ご利用のブラウザ、設定ではご利用になれません。</div></td>

このように青文字部分を追加されると良いかと思います。
他にも構造が違うコメントフォームがある事も考えられますので適宜対応してください。

次に表示する為にjavascriptを記述していきます。

</form>
</table>

この下に

</form>
</table>
<script type="text/javascript">
<!--
function doCommentPreview(mode) {
//コメントプレビュー
var textAreaId = 'text'; //textareaのidとあわせてください。
var previewAreaId = 'comment_preview';
var initString = 'ここにコメントのプレビューが表示されます。';

if (!isDoCommentPreview()) return;

if (!getElementCommentPreview(textAreaId) || !getElementCommentPreview(previewAreaId)) {
return;
} else if (null != mode && mode == 'init') {
getElementCommentPreview(previewAreaId).innerHTML = initString;
return;
}

var s = getStringCommentPreview(textAreaId);


if (null == s || '' == s || '<br />' == s) {
s = initString;
}

if (getElementCommentPreview(previewAreaId)) {
getElementCommentPreview(previewAreaId).innerHTML = s;
}
}

function getStringCommentPreview(e) {
var s = '';
s = getElementCommentPreview(e).value;
s = s.split('&').join('&amp;');
s = s.split('<').join('&lt;');
s = s.split('>').join('&gt;');
s = s.split('\'').join('&quot;');
s = s.split('\n').join('<br />');
return s;
}

function getElementCommentPreview(e, f) {
var l = (document.layers) ? 1 : 0;
if(l) {
f=(f) ? f : self;
var a = f.document.layers;
if (a[e]) return a[e];
for (var w = 0; w < a.length;) {
return getElementCommentPreview(e, a[w++]);
}
}
if (document.all) return document.all[e];
return document.getElementById(e);
}

function isDoCommentPreview() {
var ua = navigator.userAgent;
var doNotAgentList = [
ua.indexOf('Opera/6') != -1,
ua.indexOf('Mac') != -1 && ua.indexOf('MSIE 5') != -1
]

for (var i = 0; i < doNotAgentList.length; i++) {
if (doNotAgentList[i]) return false;
}
return true;
}

doCommentPreview('init');
//-->
</script>

この赤文字部分を追加してください。

livedoor Blog標準の絵文字もプレビューさせるには。

livedoor Blogには標準で絵文字がついていますが、コメントに挿入してもこのプレビューには <emoji:sun> などとそのまま表示されてしまいます。
このままだと完璧なプレビューとはいえませんので、これを画像に変換してプレビューにも反映させる方法を紹介します。
※絵文字のプレビューが必要ない方はこの手順は必要ありません。

まず、上記スクリプト部分の

var s = getStringCommentPreview(textAreaId);

この直後に

var s = getStringCommentPreview(textAreaId);
// livedoor Blog標準絵文字用
s = getStringEmojiTag (s);

と入力します。

つづいて

doCommentPreview('init');

この直前に

function getStringEmojiTag (s) {
for (var i = 0; i < emojiList.length; i++) {
var imageUrl = emojiImages[emojiList[i]].src;
s = s.split('&lt;emoji:' + emojiList[i] + '&gt;').join('<img src="' + imageUrl + '" alt="' + emojiList[i] + '" />');
}
return s;
}
doCommentPreview('init');

こちらの赤文字部分を入力します。

ココまで編集が終りましたら、エディタから全て選択してコピーし、個別記事HTMLテンプレートの編集ウィンドウに全て貼り付けて保存してください。
つぎにBlogを再構築するわけですが、エラーが出る可能性もありますのでまず「最新記事」のみを再構築して
ブログのトップページより一番上の記事にアクセスして確認してみてください。

確認して何もエラーが出ないようでしたら最後に「全アーカイブ」で再構築をしてあげて下さい。
以上で設置完了です。