Cara Membuat Badge Pada Postingan Terbaru
Cara Membuat BADGE Pada Posting Terbaru - Badge ini merupakan tanda saat kita memposting artikel terbaru,badge memang sangat cocok untuk blog yang model bentuk posting nya read more dan selain itu biasanya banyak di pergunakan juga oleh blog dengan model posting gallery pada situs download template.
Langsung aja..
Langkah pemasangan nya :
Letakan kode css ini diatas ]]></b:skin>
Masukan kode CSS:
.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;
}
Selanjutnya cari kode <b:include data='post' name='post'/> dan jika sudah ketemu ganti dengan kode ini
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<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>
Save template dan lihat hasil nya...!!!
NB : jika peletakan badge kurang pas,tinggi,pendek silahkan edit kode css yang pertama diatas !! (width, height, left,top,right)
Category: INTERNET
0 comments