新着トラックバックに「New」をつける｜Materializing [マテリアライジング]

テンプレート追記

最近のトラックバック を表示させている部分に、下記のように「New」の表示部を追記する

<MTPings lastn="10">
<MTPingedEntry>
・ <a href="<$MTPingedEntryLink$>"><$MTPingedEntryTitle$></a>
</MTPingedEntry><br />
⇒<a href="<$MTPingURL$>" target="_blank"><$MTPingBlogName$>at<$MTPingDate format="%m./%d"$></a> <span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span><br />
</MTPings>

recently_pinged_on プラグインの場合

<span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span>

Recents プラグインの場合

<span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span>

表示判定用のスクリプトを追加する

<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        time = spans[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//-->
</script>

※4行目で表示時間を設定する
※6行目で表示メッセージを設定する

CSS追記

下記コードをCSSに追記する

span.new {
    display: none;
    color: red;
    font-weight: bold;
}

以上。

参考記事：

■小粋空間: 新着トラックバックに New マークをつける　[小粋空間]

2006/11/03 11:32:13：記事書き直し