Menambahkan Pita penanda posting baru dan lama di blog

Membuat ribbon pada post. untuk membuat blog menarik dilihat merupakan keinginan semua blogger trik berikut ini dibuat untuk mempercantik tampilan posting pada homepage dengan menambahkan pita diujung kanan post, tidak hanya mempercantik tapi pita ini juga menandakan sebuah posting baru dan posting lama dengan pita itu sendiri karensa pita ini terbagi dua yaitu pita old yang menandakan posting lama dan pita new yang menandakan posting baru

dalam memasang pita pada posting, pita old dan new di filter menggunakan tag pengkondisian <b:if cond="data:post.IsFirstPost"> yang artinya post yang paling baru akan ditandai dengan pita new sebaliknya post yang sudah lama akan ditandai dengan pita old

Menambahkan pita penanda posting baru dan lama

1. login blogger >> template >> edit html
2. cari kode berikut pada template

<div class='post hentry'>

3.copy paste kode berikut tepat dibawah kode <div class='post hentry'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.isFirstPost'> 
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo5BM8Twyx6QHBGJcVF4HAcQNrtASF9HpFyDhNgffjW9FNhqPVoGNrf6B1-OYsvzdo76JM_qh4Oi3qCA3Jw08YIaULTmr9ts6JGSVT0BtR7EisR8xJSae-PARc1FZu9PIwWCvnmTfziA/s56/New-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/>
<b:else/>
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB_PZTthyphenhyphen-Da68l12C6qAXO9C1f-rpbWo6YS_BUgLYHhrNfjY1Rql4B1s6h1dZq9sZp6JvGcoKPcnfis71FHIR8anQxuSnX0RlEUMvW2AI930Tk7pWp9IwXReoIZR4xIw9LqtgupsB3A/s56/Old-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/> 
</b:if></b:if></b:if>

pita hanya akan tampil pada halaman home saja, jika ingin menampilkannya juga pada halaman posting hapus kode yang di stabilo biru

4. cari kode </head>. kemudian paste kode berikut tepat diatas </head>

<style>.post{position:relative;}</style>

5. simpan template dan lihat hasilnya


jika ada yang perlu ditanykan silakan tulis di kotak komentar dibawah ini. semoga bermanfaaat~