Ditulis oleh: Ditulis pada: 12/28/2014
Pada Template Kompi Ajaib yang kemarin saya bagikan, saya menyertakan widget label cloud dengan tampilan tombol dengan memberikan background pada widget-contant. Namun jika kemudian Anda menghapus widget labelnya dan kemudian memasangnya kembali, maka ada tampilan yang error.
Tampilan yang error tersebut adalah background widget content-nya yang seperti gambar di bawah ini.
Screenshot widget label saya ambil dari blog Masasha
Dan ini bisa terjadi pada template apa saja yang menggunakan widget label cloud jika ikon obeng dan tang (ikon quickedit widget) dihapus agar valid html5. Background pada widget-content tidak akan berfungsi (akan menggulung ke atas).
Nah untuk mengatasi hal tersebut di atas, silahkan ikuti langkah perbaikannya seperti di bawah ini.
Silahkan temukan kode widget labelnya seperti di bawah ini.
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if><div class='clear'></div>
</div>
</b:includable>
</b:widget>
Kemudian tambahkan kode
<div class='clear'></div> persis seperti kode yang saya marking (block kuning) di atas. Dan pastikan ada kode CSS seperti di bawah ini. Jika tidak ada silahkan tambahkan.
.clear {clear:both;}
Untuk menambahkan title pada linknya silahkan simak postingannya DI SINI.
Dan jika Anda tidak menggunakan template Kompi Ajaib namun ingin menggunakan tampilan widget label cloud seperti pada gambar di atas, silahkan gunakan CSS berikut.
#Label1 .widget-content{padding-top:10px;padding-bottom:2px;padding-right:10px;}
.label-size{margin:0;padding:0;position:relative}
.label-size a,.label-size span{text-decoration:none;float:left;height:18px;line-height:18px;position:relative;margin-bottom:9px;margin-left:10px;padding:6px 10px 8px;box-shadow:inset 0 1px 0 0 #c9c9c9;background:linear-gradient(to bottom,#778085 5%,#27323d 100%);background-color:#778085;border-radius:3px;border:1px solid #142133;color:#000;font:bold 12px verdana;text-align:center;text-shadow:0px 1px 0px #999}
.label-size a:hover,.label-size span:hover{background:linear-gradient(to bottom,#27323d 5%,#778085 100%);background-color:#27323d;}
Kemudian silahkan lakukan trik memberi background pada widget label cloud seperti di atas. Dan jika Anda baru menambahkan widget label tersebut di blog, jangan lupa untuk menghapus ikon quickedit widget tersebut agar dapat mengurangi error pada validasi html5.