Cara Membuat Badge Pada Postingan Terbaru

Azka trimbell | 05:20 | 0 comments


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 == &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>

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:

Info Newz2:
Merupakan Kumpulan dan berita tentang Dunia Seputar Entertainmen Gatget INTERNET KOMPUTER Love And Sex MOZAIK Seo TRIK DAN TIPS Umum Videos Wanita World in the news !

Disclaimer:
Semua Grafis di blog ini bukanlah milik kita atau gambar apapun bukan dibawah Hak Cipta kami, Semua grafis diambil dari sumber yang berbeda, Jika ada Gambar / artikel yang menyinggung atau di bawah Hak Cipta Anda maka silakan E-mail kami ke Trimbelboy@gmail.com untuk dihapus dalam waktu 24 jam!

0 comments