Bloggerの投稿日をタイムスタンプにして表示形式と位置を変更

投稿日
×同日に複数投稿すると2件目以降には日付が表示されない
○表示フォーマットが多い

タイムスタンプ
○全記事に表示される
×表示フォーマットが少ない

投稿日を非表示にして、タイムスタンプの表示形式と位置を変更して代用する。

レイアウト → ブログの投稿の設定 にて

時刻:の表示形式を m/dd/yyyy (例:6/19/2013)に変更

テンプレート → HTMLの編集 にて
<data:post.timestamp/>
↑を
↓に書き換える
<span expr:id='"post-timestamp-" + data:post.id'>
<script type='text/javascript'>
changeDateFormat('<data:post.id/>', '<data:post.timestamp/>');
</script>
</span>
↓こうなる
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<span expr:id='&quot;post-timestamp-&quot; + data:post.id'>
<script type='text/javascript'>
changeDateFormat('<data:post.id/>', '<data:post.timestamp/>');
</script>
</span>
</abbr>
</a>
</b:if>
</b:if>
</span>
Javascriptを追加する
※ここではレイアウト → HTML/Javascriptガジェットに追加した
<script type="text/javascript">
//<![CDATA[
// タイムスタンプ
function changeDateFormat (id, date)
{
var div = document.getElementById('post-timestamp-' + id);
var splDate = date.split("/");
var change_date = splDate[2] + "/" + splDate[0] + "/" + splDate[1];
div.innerHTML = change_date;
}
//]]>
</script>
日付のリンク部分(↓)を削除する
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
</a>
↓こうなる
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<span expr:id='&quot;post-timestamp-&quot; + data:post.id'>
<script type='text/javascript'>
changeDateFormat('<data:post.id/>', '<data:post.timestamp/>');
</script>
</span>
</abbr>
</b:if>
</b:if>
</span>
↑の部分をまるごと↓に入れる
<div class='post-header-line-1'/>
ついでにラベルも移動させると↓な感じ
<div class='post-header'>
<div class='post-header-line-1'/>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<span expr:id='&quot;post-timestamp-&quot; + data:post.id'>
<script type='text/javascript'>
changeDateFormat('<data:post.id/>', '<data:post.timestamp/>');
</script>
</span>
</abbr>
</b:if>
</b:if>
</span>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
日付を太字にしてラベルとの間隔をあける為にCSS追加
.post-timestamp{
margin-right: 5px;
font-weight: bold;
}

0 件のコメント:

コメントを投稿