Membuat Tag New Post With Efek Lipat Kertas

Tag New Post With Efek Lipat kertas - yaitu menampilkan post terbaru dengan sebuah tanda seperti ribbon. Pada tag new post ini menggunakan efek kertas lipat diatasnya agar terlihat lebih menarik. Berikut ini Screntshotnya :

Jika sobat tertarik berikut ini langkah-langkahnya :

Pertama-tama seperti biasa silahkan sobat masuk ke Blogger , kemudian masuk ke editor HTML, lalu salin CSS di bawah ini dan pasangkan di atas kode  ]]></b:skin>

.newer-post {
margin: 50px auto;
width: auto;
height: auto;
background-color: none;
position: relative;
}
.newer-post2 {
font: bold 20px Sans-Serif;
text-align: center;
position: relative;
padding: 1px 0;
left: 725px;
top: 54px;
right: -4px;
width: 112px;
background-color: #0256D1;
border-width: 0 16px 16px 0;
color: #fff;
-webkit-transform:rotate(45deg);
z-index: 999;
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.newer-post2:before {
content: "";
position: relative;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #0256D1 #0256D1;
background: #0256D1;
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
display: block;
width: 0;
}
.newer-post3 {
width: 120px;
height: 88px;
overflow: hidden;
position: absolute;
top: -2px;
right: -4px;
}

Jika sudah, selanjutnya dengan menggunakan CTRL+F silahkan sobat cari kode <b:include data="post" name="post">  . Apabila sudah ditemukan silahkan sobat ganti dengan kode di bawah ini

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<div class='newer-post'>
<div class='newer-post2'><div class='newer-post3'>NEW</div></div>
<div class='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>

Jika kedua langkah diatas sudah dilakukan, sobat simpan Template.
Bila sobat ingin menghilangkah efek kertas lipat, hilangkan pada kode css .newer-post2:before 

Semoga bermanfaat

Subscribe to receive free email updates: