Make Post Category use CSS3 for Blogger

Sobat sekalian pasti sudah pada tahu apa yang disebut dengan kategori! Kedudukannya pada blogspot yang dibawah postingan itu loh. Category/label memiliki fungsi mengelompokan postingan yang di tags ketika dipanggil akan berkumpul semua postingan tersebut :D
Penjelasan yang sangat educatif dan membingungkan sekali buat dipahami ;)) Ya sudah tidak apa-apa jika memang tidak ngeuh apa itu si kategory :P Menghias links kategori dengan CSS 3 akan membuat tampilannya terlihat memukau dan profesional sekali. Bagaimana tidak gaya, trik yang dibuat oleh salah satu web developer terkenal ini bisa kita pasangkan ke blog tercinta. This is original article about Pure CSS3 Post Tags by cssglobe.

Pada sumber inspirasi pemakaian menggunakan atribut css <li> = list item. Disini sama Beben Koben si bloglang anu ganteng kalem dihilangkan guna mempermudah penerapan ke dalam template ;) Tapi kalau sobat ada yang pakai kategori dengan atribut itu, tinggal langsung pakai saja kode-kodenya. CSS modifikasi

.tags a{
float: right;
 height: 24px;
 line-height: 24px;
 position: relative;
 font-size: 11px;
 margin-left: 20px;
 padding: 0 10px 0 10px;
 background: #0089e0;
 color: #fff;
 text-decoration: none;
 -moz-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px; 
 border-bottom-right-radius: 5px;
 -moz-border-radius-topright: 5px;
 -webkit-border-top-right-radius: 5px; 
 border-top-right-radius: 5px; 
 }
.tags a:before{
 content:"";
 float: left;
 position: absolute;
 top: 0;
 left: -12px;
 width: 0;
 height: 0;
 border-color: transparent #0089e0 transparent transparent;
 border-style: solid;
 border-width: 12px 12px 12px 0;  
 }
.tags a:after{
 content:"";
 position: absolute;
 top: 10px;
 left: 0;
 float: left;
 width: 4px;
 height: 4px;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 background: #fff;
 -moz-box-shadow: -1px -1px 2px #004977;
 -webkit-box-shadow: -1px -1px 2px #004977;
 box-shadow: -1px -1px 2px #004977;
 }

Bila ingin merubah posisi kanan ke kiri or sebaliknya perhatikan kode yg diberi warna! Urusan warna silahkan rubah sesuai selera masing² Lakukan Expand Widget Templates kemudian cari kode mirip-mirip ini

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data: post.labels'>
<data: postLabelsLabel/>

<span class='tags'>

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

</span>

</b:if>
</span>
</div> Keterangan:

• Kode warna biru bisa saja berbeda, sobat konsentrasi pada kode berwarna hijau itu.
• Sisipkan tags <span class='tags'> diatas persis kode warna hijau dan tutup tags dengan </span> seperti contoh diatas.
• SAVE

Semoga bermanfaat :)
Happy category \m/