まず、<head>内に以下のコードを貼る（これが無いとPreviewやCookie処理がされない）。
<script type="text/javascript">
function sh (id) {
whichpost = document.getElementById(id);
if (whichpost.className=="show") {
whichpost.className="hide";
}
else {
if (whichpost.className=="hide") {
whichpost.className="show";
}
}
}
<ItemPage>
var hasChanged = 0;
var hostName = 'blogspot.com';
function setCookie (name, value, expires) {
document.cookie = name + '=' + escape(value) + '; expires=' + expires.toGMTString() + '; domain=' + hostName + '; path=/';
}
function getCookie (name) {
var key = name + '=';
var c = document.cookie;
var i = c.indexOf(key);
if (i < 0) return '';
var j = c.indexOf(';', i + key.length);
if (j < 0) j = c.length;
return unescape(c.substring(i + key.length, j));
}
function rememberMe (f) {
var now = new Date();
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
setCookie('author', f.anonName.value, now);
setCookie('site', f.anonURL.value, now);
}
function setFormValues (f) {
f.anonName.value = getCookie("author");
f.anonURL.value = getCookie("site");
}
function doLoaded () {
if (!document.frmComment) return;
setFormValues(document.frmComment);
if (document.frmComment.anonName.value)
document.frmComment.rememberInfo.checked = 1;
}
onload = doLoaded;
function escapeQuotes(text) {
text=text.replace(/'/g,"\\'");
text=text.replace(/\n/g,"\\n");
return text;
}
function insertTags(tagOpen, tagClose, sampleText) {
var txtarea = document.cFrm.postBody;
// IE
if(document.selection) {
var theSelection = document.selection.createRange().text;
if(!theSelection) { theSelection=sampleText;}
txtarea.focus();
if(theSelection.charAt(theSelection.length - 1) == " "){
theSelection = theSelection.substring(0, theSelection.length - 1);
document.selection.createRange().text = tagOpen + theSelection + tagClose + " ";
} else {
document.selection.createRange().text = tagOpen + theSelection + tagClose;
}
// Mozilla
} else if(txtarea.selectionStart || txtarea.selectionStart == '0') {
var startPos = txtarea.selectionStart;
var endPos = txtarea.selectionEnd;
var myText = (txtarea.value).substring(startPos, endPos);
if(!myText) { myText=sampleText;}
if(myText.charAt(myText.length - 1) == " "){ // exclude ending space char, if any
subst = tagOpen + myText.substring(0, (myText.length - 1)) + tagClose + " ";
} else {
subst = tagOpen + myText + tagClose;
}
txtarea.value = txtarea.value.substring(0, startPos) + subst + txtarea.value.substring(endPos, txtarea.value.length);
txtarea.focus();
var cPos=startPos+(tagOpen.length+myText.length+tagClose.length);
txtarea.selectionStart=cPos;
txtarea.selectionEnd=cPos;
// All others
} else {
tagOpen=tagOpen.replace(/\n/g,"");
tagClose=tagClose.replace(/\n/g,"");
document.infoform.infobox.value=tagOpen+sampleText+tagClose;
txtarea.focus();
}
if (txtarea.createTextRange) txtarea.caretPos = document.selection.createRange().duplicate();
}
//Preview
function PreviewpostBody(){
if (cFrm.postBody.value=='') return;
var preview=window.open('','Preview','width=500,height=200');preview.document.open();
var text=cFrm.postBody.value;while(text.indexOf("\n") > -1)
text=text.replace("\n","<br/>");
preview.document.write('<html><style>*{font-size:11px;font-family:Verdana,Arial,Sans-Serif}<\/style><bo'+'dy>'+text+'<\/body><\/html>');
preview.document.close();
}
</ItemPage>
</script>
次に、コメント投稿フォームを実際にBlogger上に表示するには
テンプレートで<!$BlogItemCreate$>を以下のコードに置き換える。
<!-- comment form -->
<form name="form" id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">
<div class="comments-open">
<h2 class="comments-open-header">Add a comment</h2>
<div class="comments-open-content">
<div>
<input type="hidden" name="blogID" value="<$BlogID$>"/>
<input type="hidden" name="postID" value="<$BlogItemNumber$>"/>
<input type="hidden" name="isPopup" value="false"/>
<input type="hidden" name="iden" value="Other"/>
</div>
<p><label for="uname">Name:</label>
<input type="text" id="uname" name="anonName" maxlength="100" size="30" /></p>
<p><label for="url">Website:</label>
<input type="text" id="url" name="anonURL" maxlength="100" value="http://" size="30" /></p>
<p><label for="comment-body">Comment:
<img class="out" src="http://www.blogger.com/img/gl.bold.gif" width="18" height="18" align="middle" onMouseOver="this.className='over';sh('bold')" onMouseOut="this.className='out';sh('bold')" onClick='insertTags("<b>","</b>","")' /> <img class="out" src="http://www.blogger.com/img/gl.italic.gif" width="18" height="18" align="middle" onMouseOver="this.className='over';sh('italic')" onMouseOut="this.className='out';sh('italic')" onClick='insertTags("<i>","</i>","")' /> <img class="out" src="http://www.blogger.com/img/gl.link.gif" width="18" height="18" align="middle" onMouseOver="this.className='over';sh('link')" onMouseOut="this.className='out';sh('link')" onClick='var lien = prompt("URL :","http://");if(lien!=""&&lien!=null&&lien!="http://"){insertTags("<a href=\"" + lien +"\">","</a>","")} else {}' /> <span id="bold" class="hide">Convert to <b>bold</b></span><span id="italic" class="hide">Convert to <i>italic</i></span><span id="link" class="hide">Convert to <a href="#">link</a></span></label>
<textarea id="comment-body" name="postBody" cols="40" rows="10"></textarea></p>
<script type="text/javascript">
//<![CDATA[
document.write('<p><label for="remember"><input type="checkbox" id="remember"> Remenber me ?</label></p>');
//]]>
</script>
</dl>
<script type="text/javascript">
//<![CDATA[
var bgPosted = false;
var cFrm = document.getElementById('cFrm');
cFrm.target = 'bgpost';
cFrm.onsubmit = function(){return cFrmPost()};
if (document.cookie != '') {
cFrm.anonName.value = document.cookie.replace(/^.*anonName=?([^;]*);?.*$/, '$1');
cFrm.anonURL.value = document.cookie.replace(/^.*anonURL=?([^;]*);?.*$/, '$1');
}
cFrm.postBody.value = '';
function cFrmPost() {
with (cFrm) {
anonName.value = anonName.value.replace(/^\s+|\s+$/g, '');
anonURL.value = anonURL.value.replace(/^\s+|\s+$/g, '');
postBody.value = postBody.value.replace(/^\s+|\s+$/g, '');
if (anonName.value == '') {
alert('Please enter your name');
anonName.focus();
return false;
}
if (postBody.value == '') {
alert('Please enter a comment');
postBody.focus();
return false;
}
anonURL.value = anonURL.value.replace(/^http:\/\//g, '');
}
bgPosted = true;
document.form.post.disabled=true;document.form.post.value="Please wait...";
return true;
}
function bgpostLoad() {
if (bgPosted == true) {
if (cFrm.remember.checked) {
var expires = new Date();
expires.setFullYear(expires.getFullYear()+1);
document.cookie = "anonName=" + unescape(cFrm.anonName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "anonURL=" + unescape(cFrm.anonURL.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "fromName=" + unescape(cSend.fromName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "fromEmail=" + unescape(cSend.fromEmail.value) + "; path=/" + "; expires=" + expires.toGMTString();
}
window.location.reload();
}
}
document.write('<iframe style="position:absolute;left:-9999px;top:0" name="bgpost" onload="bgpostLoad()"></iframe>');
//]]>
</script>
<div class="buttons">
<input type="button" id="comment-preview" value=" Preview " onclick="javascript:PreviewpostBody()" /> <input style="font-weight:bold" type="submit" name="post" value=" Post "/>
</div>
</form>
