日曜日, 11月 20, 2005

アーカイブの並びを逆転する

どういったことかといえば、サイドバーのArchivesは古い順に上から並ぶが、
このコードを使うことで上下を逆転し、新しいものを上に持っていくことが出来る。

<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</ul>

土曜日, 11月 19, 2005

Backlinksについて

BloggerHelp>バックリンクとその使用方法について教えてください。
相手のBlogにリンクすると、その記事へのリンクをGoogleが発見し相互にリンクする仕組み。
トラックバックとは違い、タイトルだけ表示されるが利用価値は十分である。

注意:公式以外のテンプレートを使用する場合、設定→コメントで解除する必要がある。
だが、このときに表示されるコードをそのままコピーしてする際に注意してもらいたいのは、

  1. コードに"¥(\)"が余計に入っているので、$前後にあるものは消すこと。
  2. <a href="<$BlogItemPermalinkURL$>#links">の>の位置が<a href="<$BlogItemPermalinkURL$#links>">となっているので、訂正すること。
以上の2点に注意すれば、問題なく使えるようになる。
BacklinksはBlogger以外のBlogでもリンクを貼ることで表示されるので、気にせず使える。

JavaScriptを使った記事の省略

BloggerHelp>投稿に表示/非表示のリンクを設定するにはどうすればよいですか。

JavaScriptを使うことで利用できる。
Read Moreとは違い、本文がすべて略されるので注意。

Read Moreを搭載するには

Read More、日本のBlogでよく見かける「続きを読む」を搭載する方法。

BloggerHelp>省略版の投稿の要約部分を作成するにはどうすればよいですか。

但し、このコードを使用すると追記が無いのにもかかわらす"Read More"が入ってしまうので、
PrestonCafeより、次のコードを代用するとよい。


<mainorarchivepage><a href="http://www.blogger.com/%3C$BlogItemPermalinkURL$%3E">
title="Read More!">More...</a></mainorarchivepage>
<p class="post-footer">posted by <$BlogItemAuthorNickname$>
at <a href="http://www.blogger.com/%3C$BlogItemPermalinkUrl$%3E" title="">link"><$BlogItemDateTime$></a> |
<mainorarchivepage><blogitemcommentsenabled><a class="comment-link" href="http://www.blogger.com/%3C$BlogItemPermalinkURL$%3E#comments">
title="comments"><$BlogItemCommentCount$> comments</a>
</blogitemcommentsenabled></mainorarchivepage>
<$BlogItemControl$></p>

E-mailコメント投稿フォームを搭載するには

通常のコメントではなく、E-mailによるコメント投稿フォームのコード



<div class="hide" id="sendmail">
<form id="cSend" action="http://www.blogger.com/email-post.do" method="post">
<div class="comments-open">
<h2 class="comments-open-header">E-mail this post</h2>
<div class="comments-open-content">
<input type="hidden" name="blogID" value="<$BlogID$>" />
<input type="hidden" name="postID" value="<$BlogItemNumber$>" />
<input type="hidden" name="returnTo" value="<$BlogURL$>" />
<input type="text" name="fromName" class="inputCom" id="fromName" size="20" value="Your name" onfocus="value=''" />
<input type="text" name="fromEmail" class="inputCom" id="fromEmail" size="20" value="Your email" onfocus="value=''" />
<input type="text" name="toEmail" class="inputCom" id="toEmail" size="20" value="Your friend's email" onfocus="value=''" /><br />
<input type="text" name="messageBody" class="inputCom" size="60" id="messageBody" value="Your message here" maxlength="300" onfocus="value=''"></textarea>

<script type="text/javascript">
//<![CDATA[
var bgSended = false;
var cSend = document.getElementById('cSend');
cSend.target = 'bgSend';
if (cSend.addEventListener) {
cSend.addEventListener('submit', function(){return cSendPost()}, false);
} else {
cSend.onsubmit = function(){return cSendPost()};
}
if (document.cookie != '') {
cSend.fromName.value = document.cookie.replace(/^.*fromName=?([^;]*);?.*$/, '$1');
cSend.fromEmail.value = document.cookie.replace(/^.*fromEmail=?([^;]*);?.*$/, '$1');
}
function cSendPost() {
with (cSend) {
fromName.value = fromName.value.replace(/^\s+|\s+$/g, '');
fromEmail.value = fromEmail.value.replace(/^\s+|\s+$/g, '');
if (fromName.value == '') {
alert('Please enter your name');
fromName.focus();
return false;
}
if (fromEmail.value == '') {
alert('Please enter your email');
fromEmail.focus();
return false;
}
if (toEmail.value == '') {
alert('Please enter your friend\'s email');
toEmail.focus();
return false;
}
}
bgSended = true;
return true;
}
function bgSendLoad() {
if (bgSended == true) {
if (cSend.notforget.checked) {
var expires = new Date();
expires.setFullYear(expires.getFullYear()+1);
document.cookie = "fromName=" + unescape(cSend.fromName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "fromEmail=" + unescape(cSend.fromEmail.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "anonName=" + unescape(cFrm.anonName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "anonURL=" + unescape(cFrm.anonURL.value) + "; path=/" + "; expires=" + expires.toGMTString();
}
alert('Your message has been sent');
}
}
document.write('<iframe style="position:absolute;left:-9999px;top:0" name="bgSend" onload="bgSendLoad()"></iframe>');
//]]>
</script>

<input type="submit" class="inputCom" name="post" value="Envoyer" /><br />
<input type="checkbox" id="notforget"> Remenber me (<a href="javascript:sh('explanation')">?</a>)
<p class="hide" id="explanation">
<br />
<br />
All personal information that you provide here will be governed by the Privacy Policy of Blogger.com. <a href="http://www.blogger.com/terms.g">More...</a>
</p>
</div>
</div>
</form>

</div>
</div>

サイドバーに"最近のコメント一覧"を搭載する

BloggerHacksより引用。
完成度は高いが、テンプレートによっては障害を伴う。
その都度、修正するよう。

尚、コード上部のOPTIONSで詳細設定が可能。


次のコード(もしくはそれに近いもの)をテンプレートで見つけ出す。

<h2 class="sidebar-title">Previous</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

<MainOrArchivePage>
<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</ul>
</MainOrArchivePage>


それに続く形で次のコードを貼り付ける。

<!-- **** FARRAGO RECENT COMMENTS HACK **** -->
<!-- Version 1.03 -->
<!-- Copyright © 2004 Ebenezer Orthodoxy -->
<!-- http://boggerhacks.blogspot.com -->
<!-- ************** OPTIONS *************** -->
<script type="text/javascript" language="JavaScript1.2">
var titleText = "Recent Comments";
var numberToShow = 5;
var displayTemplate = "[name]:<br/>[title]";
var nameIsLink = true;
</script>
<!-- ********* CODE DO NOT CHANGE ******** -->
<script type="text/javascript" language="JavaScript1.2">
var comments=new Array(0);var title = "";
var itemurl = "";
function getSortDate(strDate){var d=new Date(strDate);
var day=''+d.getDate();if(day.length==1)day='0'+day;
var month=''+(d.getMonth()+1);if(month.length==1)
month='0'+month;var hour=''+d.getHours();
if(hour.length==1)hour='0'+hour;var min=''+
d.getMinutes();if(min.length==1)min='0'+min;var sec=''+
d.getSeconds();if(sec.length==1)sec= '0'+sec;
var sortDate=''+d.getFullYear()+month+day+hour+min+sec;
return sortDate;}
function recentComment(t,u,i,a,d){var rcmnt=
document.getElementById('frch'+i).innerHTML;
while(rcmnt.indexOf("\n") > -1)rcmnt=
rcmnt.replace("\n","");while(rcmnt.indexOf(" />") > -1)
rcmnt=rcmnt.replace(" />","/>");
while(rcmnt.indexOf(" <a/>") > -1)rcmnt=
rcmnt.replace(" <a/>","<a/>");var author=a;var pos=
rcmnt.toLowerCase().lastIndexOf('<br><a></a>posted by');
var pos2=
rcmnt.toLowerCase().lastIndexOf('<br><a></a><a></a>');
var pos3=
rcmnt.toLowerCase().lastIndexOf('<br/><a/><a/>');
var pos4=
rcmnt.toLowerCase().lastIndexOf('<br/><a></a><a></a>');
var aoffset=pos+6;if (pos3 > -1) pos2=pos3;
if (pos4 > -1) pos2=pos4;
if (pos2 > -1){pos=pos2;aoffset=
rcmnt.toLowerCase().lastIndexOf('<a><b> </b></a>');
if (aoffset==-1)aoffset=
rcmnt.toLowerCase().lastIndexOf('<a><b></b></a>')-1;}
if (pos > -1){author=
rcmnt.substr(aoffset+15,rcmnt.length-1);var expt="";
expt=rcmnt.substr(0,pos-4).replace(/(<([^>]+)>)/ig,"");}
else expt=rcmnt.replace(/(<([^>]+)>)/ig,"");
author=author.replace("<A ","<a ");
if (expt.length > 50){expt=expt.substr(0,50);
if (expt.lastIndexOf(' ') > -1)
expt=expt.substr(0,expt.lastIndexOf(' '));expt+='...';}
expt=expt.replace('"',"\"");expt=expt.replace("'","\'");
if (!nameIsLink)author=author.replace(/(<([^>]+)>)/ig,"");
var st=getSortDate(d)+'<li>'+displayTemplate+'</li>';
st=st.replace('[name]',author);
st=st.replace('[title]','<a title="'+expt+'" href="'+
u+'#c'+i+'">'+t+'</a>');comments.push(st);}</script>
<MainPage><h2 class="sidebar-title">
<script type="text/javascript" language="JavaScript1.2">
document.write(titleText+'</h2>');</script>
<Blogger>
<span id="frcht<$BlogItemNumber$>"
style="visibility:hidden;position:absolute;">
<BlogItemTitle><$BlogItemTitle$></BlogItemTitle></span>
<script type="text/javascript" language="JavaScript1.2">
title=
document.getElementById('frcht<$BlogItemNumber$>').innerHTML;
itemurl='<$BlogItemPermalinkURL$>';</script>
<BlogItemCommentsEnabled><BlogItemComments>
<span id="frch<$BlogCommentNumber$>"
style="visibility:hidden;position:absolute;">
<$BlogCommentBody$></span>
<script type="text/javascript" language="JavaScript1.2">
recentComment(title,itemurl,'<$BlogCommentNumber$>',
'<$BlogCommentAuthor$>','<$BlogCommentDateTime$>');
</script></BlogItemComments>
</BlogItemCommentsEnabled></Blogger><ul>
<script type="text/javascript" language="JavaScript1.2">
comments.sort();comments.reverse();
for (i=0; i<10 && i < comments.length && i < numberToShow; i++){
var s=comments[i];s=s.substr(14,s.length-1); document.write(s);}
</script><br/><br/><span
style="font-size:7pt;text-align:center;width:100%;border-top:1px dashed;">
<a title="Farrago Recent Comments Hack from BloggerHacks"
href="http://bloggerhacks.blogspot.com">BloggerHacks</a> </span>
</ul></MainPage>
<!-- END FARRAGO RECENT COMMENTS HACK -->


また、タグの最後の部分に開発者Blogへのリンクが張られるが、気になるのであれば削除してもかまわない。

コメント投稿フォーム Ver.3

コメント投稿フォームVer.1およびVer.2以上で完成度の高いもの。
以下、BloggerHacksより引用。


<!-- ** BLOGGER COMMENTS METEMPSYCHOSIS HACK ** -->
<!-- Version 1.03 -->
<!-- Copyright © 2004 Ebenezer Orthodoxy -->
<!-- http://boggerhacks.blogspot.com -->
<!-- -->
<!-- Modify the styles and options below to -->
<!-- customize the look of the comment form. -->
<!-- ***************** STYLES ***************** -->
<style type="text/css">
<!--
.commentForm
{ border-top:1px solid rgb(0,0,0);
border-bottom:1px solid rgb(0,0,0);
font-size:8pt;
width: 100%;}

.caption
{font-size:10pt;
text-align:center;
width: 400px;}

.nameBox
{width: 200px;
font-size:8pt;}

.emailBox
{width: 200px;
font-size:8pt;}

.urlBox
{width: 355px;
font-size:8pt;}

.toolbarBox
{width: 397px;
font-size:8pt;
padding:2px;
}

.commentBox
{width: 400px;
font-size:8pt;}

.buttonsDiv
{width: 400px;
text-align:center;}

.commentButton
{font-size:8pt;}

.previewButton
{font-size:8pt;}

a.toolbarButton
{text-decoration:none;
color: rgb(0,0,0);
border-width: 1px;
padding: 0px 3px 0px 3px;
border-style: outset;}

a.toolbarButton:hover
{text-decoration:none;
cursor: default;}

a.toolbarButton:visited
{color: rgb(0,0,0);
text-decoration:none;}

a.toolbarPressed
{text-decoration:none;
color: rgb(0,0,0);
border-width: 1px;
padding: 0px 3px 0px 3px;
cursor: default;
border-style: inset;}
-->
</style>
<!-- ***************** OPTIONS ****************** -->
<script type="text/javascript" language="JavaScript1.2">
var formCaption= "Post a Comment";
var labelWidth = 40;
var nameLabel = "Name";
var emailLabel = "Email";
var urlLabel = "URL";
var rememberLabel = "Remember Me";
var postedByText = "Posted by";
var commentButtonText = "Post Comment";
var previewButtonText = "Preview";
var previewWindowTitle = "Comment Preview";
var confirmBeforePost = true;
var confirmText = "Post this comment?";
var boldButtonText = "B";
var italicsButtonText = "I";
var linkButtonText = "Link";
var linkPrompt = "Link Text:";
var urlPrompt = "Link URL:";
var quoteButtonText = "Quote";
var quotePrompt = "Use your mouse to select the text"+
" in the comment you want to quote.\n"+
"Then press the quote button.";
</script>
<!-- ******************* CODE ******************* -->
<!-- ************** DO NOT MODIFY *************** -->
<div class="commentForm">
<script type="text/javascript" language="JavaScript1.2">
var blogId;var postId;var clink='<$BlogItemCreate$>';
var today=new Date();var expiry=new Date(today.getTime()+
90*24*60*60*1000);var bpos=clink.indexOf('?');
var endpos=clink.indexOf('">');
var ppos=clink.indexOf('&'+'amp'+';postID=');if(bpos > -1){
blogId=clink.substring(bpos+8,ppos);}if (ppos > -1){
postId=clink.substring(ppos+12,endpos);}
function getAuthorInfo(frm){
var text="";var author=frm.author.value;
var email=frm.email.value; var url=frm.url.value;if
(author=="")author="Anonymous";if(url || email){
email=email.replace('@',' at ');
while(email.indexOf(".") > -1)
email=email.replace("."," dot ");
text+=postedByText+'<a><b> </b></a>'+
'<a title="'+email+'" href=';
if (url)text+='"'+url+'"';
else text+='"'+document.location+'"';
text+='>'+author+'</a>';}else
text+=postedByText+'<a><b> </b></a>'+author;
return text;}
function addTags(ltag,rtag){
if (document.all){var txt=
document.selection.createRange().text;
if (txt!=""){
document.selection.createRange().text=ltag+
txt+rtag;}}else if
(document.getElementById){
ta=document.CommentForm.Comment;
var sLen=ta.textLength;
var sStart=ta.selectionStart;
var sEnd=ta.selectionEnd;
if (rtag != '' && sStart==sEnd)return;
if(sEnd==1 || sEnd==2)sEnd=sLen;
var s1=(ta.value).substring(0,sStart);
var s2=(ta.value).substring(sStart,sEnd)
var s3=(ta.value).substring(sEnd,sLen);
ta.value=s1+ltag+s2+rtag+s3;}}
function makeLink()
{var ta = document.CommentForm.Comment;
if (document.all &&
document.selection.createRange().text){
linkurl=prompt(urlPrompt,'http://');
if (linkurl==null || linkurl=='' ||
linkurl=='http://')return;
addTags('<a href="'+linkurl+'">','</a>');
}else if (document.getElementById &&
ta.selectionStart < ta.selectionEnd)
{linkurl=prompt(urlPrompt,'http://');
if (linkurl==null || linkurl=='' ||
linkurl=='http://')return;
addTags('<a href="'+linkurl+'">','</a>');
}else{var txt=prompt(linkPrompt,'');
if (txt==null || txt=='')return;
var linkurl=prompt(urlPrompt,'http://');
if (linkurl==null || linkurl=='' ||
linkurl=='http://')return;
insertText('<a href="'+linkurl+'">'+
txt+'</a>');}}
function storeCaret(ta){if
(ta.createTextRange)ta.caretPos=
document.selection.createRange().duplicate();}
function insertText(txt)
{var ta=document.CommentForm.Comment;
if (document.all){if
(ta.createTextRange && ta.caretPos){
var caretPos = ta.caretPos;caretPos.text=
caretPos.text.charAt(caretPos.text.length-1)==
' '?txt+caretPos.text+' ':txt+caretPos.text;}
else{ta.value = ta.value + txt;}}else if
(document.getElementById){addTags(txt,'');}}
function boldText(){addTags('<b>','</b>');}
function italText(){addTags('<i>','</i>');}
function quoteText()
{var txt=(document.all)?
document.selection.createRange().text:
window.getSelection();if(txt==null || txt==''){
alert(quotePrompt);
return;}insertText('"<i>'+txt+'</i>"');}
function press(lnk){lnk.className="toolbarPressed";}
function unpress(lnk){lnk.className="toolbarButton";}
function PreviewComment(frm){if (frm.Comment.value=='')
return;var preview=window.open('','Preview',
'width=400,height=300,resizable=yes,toolbar=no,'+
'location=no,directories=no,status=yes,scrollbars=yes,'+
'menubar=no');preview.document.open();
var text=frm.Comment.value+"<br/><br/>"+
getAuthorInfo(frm);while(text.indexOf("\n") > -1)
text=text.replace("\n","<br/>");
preview.document.write('<html><head><title>'+previewWindowTitle+
'</title></head><bo'+'dy>'+text+'</body></html>');
preview.document.close();}
function PostComment(frm){if (frm.Comment.value=="" ||
(confirmBeforePost &&
confirm(confirmText)==false))return;
if(frm.rememberMe.checked){
setCookie('author',frm.author.value);
setCookie('email',frm.email.value);
setCookie('url',frm.url.value);
setCookie('remember','true');}else{
setCookie('remember','false');}
var txt=frm.Comment.value;
txt=txt.replace('</i>','</i>&'+'#'+'160;');
txt= txt.replace('</b>','</b>&'+'#'+'160;');
txt=txt.replace('</a>','</a>&'+'#'+'160;');
frm.postBody.value=txt;
frm.postBody.value+="&"+"#1"+"60;\n\n<a></a><a></a>"+
getAuthorInfo(frm);
frm.submit();}
function toggleRemember(frm){if(frm.rememberMe.checked)
setCookie('remember','true');else
setCookie('remember','false');}
function getCookie(name){var rexp = new RegExp(name +
"=([^;]+)");var val=rexp.exec(document.cookie);
return (val!=null)?unescape(val[1]):"";}
function setCookie(name, value){document.cookie=name+
"="+escape(value)+";expires="+expiry.toGMTString();}
document.write('<div id="post" class="caption">'+
formCaption+'<br/>');if(!document.all)
document.write("<br/>");</script></div>
<form name="CommentForm"
action="http://www.blogger.com/add-comment.do"
method="post"><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">'+nameLabel);</script>:</div>
<input type="text" name="author" class="nameBox"
tabindex="1"/></div><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">'+emailLabel);</script>:</div>
<input type="text" name="email" class="emailBox"
tabindex="2"/></div><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">'+urlLabel);</script>:</div>
<input type="text" name="url" class="urlBox"
tabindex="3"/></div><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">&'+'#160');</script></div>
<input type="checkbox" name="rememberMe"
tabindex="4" style="vertical-align: middle;"
onclick="toggleRemember(document.CommentForm);">
<script type="text/javascript" language="JavaScript1.2">
document.write(rememberLabel);</script></input></div>
<div class="toolbarBox" style="text-align:right">
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:boldText();"><b>
<script type="text/javascript" language="JavaScript1.2">
document.write(boldButtonText);</script></b></a>
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:italText();"><i>
<script type="text/javascript" language="JavaScript1.2">
document.write(italicsButtonText);</script></i></a>
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:makeLink();">
<script type="text/javascript" language="JavaScript1.2">
document.write(linkButtonText);</script></a>
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:quoteText();">
<script type="text/javascript" language="JavaScript1.2">
document.write(quoteButtonText);</script></a></div>
<script type="text/javascript" language="JavaScript1.2">
document.write('<input type="hidden" name="blogID" value="'+
blogId+'"/>\n<input type="hidden" name="postID" value="'+
postId+'"/>');</script><textarea name="Comment" rows="10"
class="commentBox" tabindex="5" onselect="storeCaret(this);"
onclick="storeCaret(this);" onkeyup="storeCaret(this);"></textarea>
<input type="hidden" name="postBody"/>
<input type="hidden" name="anonymous" value="y"/>
<div class="buttonsDiv">
<script type="text/javascript" language="JavaScript1.2">
document.write('<input type="button"'+
' class="commentButton" tabindex="6" name="post"'+
' onclick="PostComment(document.CommentForm);" value="'+
commentButtonText+'"/>');
document.write('<input type="button" class="previewButton"'+
' tabindex="7" name="preview"'+
' onclick="PreviewComment(document.CommentForm);" value="'+
previewButtonText+'"/>');</script><br/>
<span style="font-size:7pt;text-align:center;">
<a title="Metempsychosis Comments Hack from BloggerHacks"
href="http://bloggerhacks.blogspot.com">BloggerHacks</a>
</span></div></form>
<script type="text/javascript" language="JavaScript1.2">
var cfrm=document.CommentForm;var remember=
getCookie('remember');if(remember=="true")
{cfrm.rememberMe.checked=true;cfrm.author.value=
getCookie('author');cfrm.email.value=getCookie('email');
cfrm.url.value=getCookie('url');}
</script></div>
<!-- ***********END METEMPSYCHOSIS HACK********** -->

コメント投稿フォーム Ver.2

コメント投稿フォーム

まず、<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: &nbsp; &nbsp; &nbsp;
<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>","")' /> &nbsp; <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>","")' /> &nbsp; <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 {}' /> &nbsp; <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="&nbsp;Preview&nbsp;" onclick="javascript:PreviewpostBody()" /> &nbsp; <input style="font-weight:bold" type="submit" name="post" value="&nbsp;Post&nbsp;"/>
</div>
</form>


コメント投稿フォーム Ver.1

コメント投稿フォーム(一般のBlogにみるやつ)をBloggerで実装するには

まず、<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;
}


//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 -->
<tr>
<h3>Add a comment</h3>
<form name="cFrm" id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">
<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"/>
Name:<br />
<input type="text" name="anonName" maxlength="100" size="30" /><br />
Website:<br />
<input type="text" name="anonURL" maxlength="100" value="http://" size="30" /><br />
Comment:<br />
<textarea name="postBody" cols="40" rows="10"></textarea><br />
<script type="text/javascript">
//<![CDATA[
document.write('<input type="checkbox" id="remember"> Remember me<br \/>');
//]]>
</script>

<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.cFrm.post.disabled=true;document.cFrm.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>
<input type="button" value="&nbsp;Preview&nbsp;" onclick="javascript:PreviewpostBody()" /> &nbsp; <input style="font-weight:bold" type="submit" name="post" value="&nbsp;Post&nbsp;" id="FinalPublish" />
</div>
</form>