Cara membuat badge baru pada postingan terbaru di blog

Hari ini kita akan belajar bagaimana cara membuat badge baru pada postingan terbaru di homepage blog. Fitur yang satu ini cukup indah dan menarik. Diantara Anda mungkin pernah melihat di blog-blog tetangga menggunakan pita baru pada postingan terbaru blog mereka. Dan pada kesempatan kali ini saya akan share ke anda bagaimana menambahkan badge (lencana) baru pada setiap postingan terbaru. Trik yang satu ini benar-benar bagus dan menakjubkan, berharap anda menyukainya dan menerapkannya di homepage blog anda. Jangan lupa backup terlebih dahulu template...

Langkah dan penerapannya di blog

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih-> Template -> Edit HTML

• Kemudian cari tag/kode ]]></b:skin>  
• Setelah ketemu letakan kode berikut tepat diatas kode ]]></b:skin> 

.wrapperwha12
{
margin: 50px auto;
width: auto;
height: auto;
background: transparent;
position: relative;
}
.ribbonwha123
{
font: bold 20px Sans-Serif;
text-align: center;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -25px;
top: 7px;
width: 160px;
background-image: linear-gradient(top, #129, #12f);
background-image: -o-linear-gradient(top, #129, #12f);
background-image: -ms-linear-gradient(top, #129, #12f);
background-image: -moz-linear-gradient(top, #129, #12f);
background-image: -webkit-linear-gradient(top, #129, #12f);
color: #fff;
-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbonwha-wrapper12
{
width: 86px;
height: 88px;
overflow: hidden;
position: absolute;
top: -4px;
right: -4px;
}

• Sekarang cari lagi kode <b:include data='post' name='post'/> dan ganti kode tersebut dengan kode berikut:  

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<div class='wrapperwha12'>
<div class='ribbonwha-wrapper12'><div class='ribbonwha123'>NEW</div></div>
<div id='first-post'>
<b:include data='post' name='post'/>
</div></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>  

• Simpan template...selesai.

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 12.46