Cara Memasang Label Blog pada halaman utama diatas judul postingan

label merupakan salah satu widget yang tersedia pada web atau blog, sehingga apabila tampilannya ingin menarik, harus di modifikasi dengan style yang keren juga

pada kesempatan ini akan saya uraikan Cara Memasang Label Blog pada halaman utama diatas judul postingan Langkah-langkahnya sebagai berikut :

.post .label-info{display:inline-block;margin:0px 0 10px}
.label-info a{position:relative;background:#bcbdc7;line-height:20px;border-radius:2px;display:inline-block;margin-right:1px;padding:0 5px;color:#fff;letter-spacing:.5px;font-size:11px;text-decoration:none;transition:all .3s ease-in-out}
.label-info a:nth-child(1){background:#fda75a}
.label-info a:nth-child(2){background:#a7b0b7}
.label-info a:nth-child(3){background:#ade94b}
.label-info a:nth-child(4){background:#fd00b3}
.label-info a:nth-child(5){background:#672d2c}
.label-info a:hover,.label-info a:hover:nth-child(1),.label-info a:hover:nth-child(2){background:#444;}

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <span class='label-info'> 
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</span> 
</b:if>

.label-hashtag{position:relative;display:block;overflow:hidden;margin-top:20px;padding:0}
.label-hashtag span{text-transform:uppercase;border-radius:3px;float:left;display:inline-block;font-family:Roboto;font-size:11px;height:20px;line-height:19px;border:1px solid #f1c40f;color:#f39c12;padding:0 5px}
.label-hashtag a{float:left;display:inline-block;font-family:Roboto;font-size:11px;height:20px;line-height:19px;border:1px solid #999;color:#555;border-radius:3px;padding:0 5px;margin-left:3px;margin-bottom:3px;text-transform:uppercase;}
.label-hashtag a:hover{color:#000;border-color:inherit;text-decoration:none} 

<div class='label-hashtag'>
                  <span><i class='fa fa-hashtag'/> TAGS</span>
                  <b:if cond='data:post.labels'>
                    <b:loop values='data:post.labels' var='label'>
                      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
                    </b:loop>
                  </b:if>
                </div> 

Widget