Cara menambahkan label pita pada postingan terbaru di blog

(Klik gambar diatas untuk memperbesar)

Hampir semua para blogger memiliki mentor/pembimbing, baik pembimbing secara online maupun offline. Penulis pun demikian. Saya mulai tertarik dan serius mengikuti tutorial blogging atau ngeblog saat menemukan salah satu website yaitu Mybloggertricks.com. Author Mybloggertricks adalah salah satu master blogger yang cukup terkenal di kalangan para blogger. Saya mengikuti sedikit demi sedikit tutorial yang diberikan oleh master Blogger tersebut.

Tutorial kali ini saya akan share ke anda Bagaimana cara menambahkan label pita pada postingan terbaru di blog, meskipun diantara para master Blogger tidak asing lagi dengan tutorial yang akan saya sampaikan. 

View Demo

Prosedur :   

• Masuk ke akun blogger anda -> Klik Template -> Edit HTML
• Biasakan membackup template terlebih dahulu
• Kemudian cari kode / tag ]]></b:skin>  (untuk memudahkan pencarian tekan CTRL + F )
• Pastekan kode berikut di bawah ini diatas kode  ]]></b:skin>

#first-post{background:#DAD6D6}
.wrapper {
  margin: 50px auto;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 10px;
  position: relative;
  z-index: 90;
}
.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}
.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;  
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

• Langkah berikutnya cari kode   <b:include data='post' name='post'/> kemudian setelah ketemu 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='wrapper'>
       <div class='ribbon-wrapper-green'><div class='ribbon-green'>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>

• Klik Pratinjau terlebih dahulu, kalau semuanya sudah Ok Simpan Template.

Lihat hasilnya and Happy Blogging..!

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 13.09