Ada trik sederhana untuk membuat keempat elemen tersebut di atas tampil hanya di halaman posting atau dengan kata lain tidak muncul di "home page" yaitu dengan mengapit kode "span class" dari keempat unsur tersebut dengan kode <b:if cond='data:blog.pageType == "item"'> serta </b:if> pada HTML template blog.
Span class masing-masing untuk keempat unsur tersebut adalah 'post-author vcard', 'post-timestamp', 'post-labels', dan 'reaction-buttons'. Biasanya kode-kode tersebut berada di deretan kode "post footer line". Untuk itu kita perlu mencarinya dengan teliti agar dapat meletakkan kode <b:if cond='data:blog.pageType == "item"'> serta </b:if> dengan tepat.
 |
| Tampilan "Diposkan oleh", Waktu Posting", "Label", serta "Reaksi" di Beranda |
Berikut ini saya akan mencoba menjelaskan bagaimana cara membuat "Diposkan oleh", "Waktu Posting", "Label", dan "Reaksi" hanya muncul di halaman posting. Template yang saya gunakan untuk tutorial ini adalah template "Jendela Gambar" dari Blogger.
1. Masuk ke akun Blogger Sobat.
2. Klik "Opsi lainnya" >> "Template".
3. Bila ingin membuat salinan template, silakan klik tombol "Cadangkan / Pulihkan" kemudian klik tombol "Unduh template lengkap".
4. Klik tombol "Edit HTML" >> "Lanjutkan".
5. Berikutnya beri tanda centang pada "Expand Template Widget".
6. Pertama kita akan menyisipkan kode <b:if cond='data:blog.pageType == "item"'> serta </b:if> agar "Diposkan oleh" sekaligus "waktu posting" tampil hanya di halaman posting.
Carilah kode yang mirip atau mengandung kode span class 'post-author vcard' sekaligus 'post-timestamp' seperti di bawah ini. Gunakan fitur pencarian cepat browser (Ctrl+F atau F3) untuk menemukan dengan mudah.
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span> <span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>
</b:if>
</b:if>
</b:if>
</span> <span class='post-icons'>
<!-- email post links -->
Lalu sisipkan kode <b:if cond='data:blog.pageType == "item"'> sebelum kode <span class='post-author vcard'> dan kode penutup </b:if> setelah kode <data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span> sehingga hasilnya akan seperti di bawah ini.
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><b:if cond='data:blog.pageType == "item"'><span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span></b:if> <span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>
</b:if>
</b:if>
</b:if>
</span> <span class='post-icons'>
<!-- email post links -->
Selanjutnya untuk "Label", carilah kode seperti di bawah ini.
<div class='post-footer-line post-footer-line-2'> <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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>
Lalu letakkan kode <b:if cond='data:blog.pageType == "item"'> sebelum kode <span class='post-labels'> dan penutupnya </b:if> setelah kode </span> sehingga hasilnya akan menjadi seperti di bawah ini.
<div class='post-footer-line post-footer-line-2'><b:if cond='data:blog.pageType == "item"'><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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span></b:if> </div>
Yang terakhir untuk tombol "reaksi", cari kode seperti di bawah ini.
<div class='post-footer-line post-footer-line-3'> <span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span> <span class='post-location'>
Sisipkan kode <b:if cond='data:blog.pageType == "item"'> sebelum kode <span class='reaction-buttons'> dan kode </b:if> sesudah kode </span> sehingga hasil menjadi seperti di bawah ini.
<div class='post-footer-line post-footer-line-3'><b:if cond='data:blog.pageType == "item"'><span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span></b:if><span class='post-location'>
7. Klik tombol "Simpan template".
8. Selesai. Jika berhasil maka tampilan di halaman "home" akan menjadi seperti gambar di bawah ini.
 |
| Tampilan di Halaman Beranda setelah Pengeditan |
Sedangkan pada halaman posting, pada bagian bawah artikel akan tampak seperti gambar berikut ini.
 |
| Tampilan di Halaman Artikel |
Tidak ada komentar:
Posting Komentar