Memberi Background Pada Widget Label Cloud

Pada Template Kompi Ajaib yang kemarin saya bagikan, saya menyertakan widget label cloud dengan tampilan tombol dengan menawarkan background pada widget-contant. Namun bila lalu Anda menghapus widget labelnya dan lalu memasangnya kembali, maka ada tampilan yang error.

Tampilan yang error tersebut yakni background widget content-nya yang menyerupai gambar di bawah ini.

Screenshot widget label saya ambil dari blog Masasha

Dan ini sanggup terjadi pada template apa saja yang memakai widget label cloud bila ikon obeng dan tang (ikon quickedit widget) dihapus biar valid html5. Background pada widget-content tidak akan berfungsi (akan menggulung ke atas).

Nah untuk mengatasi hal tersebut di atas, silahkan ikuti langkah perbaikannya menyerupai di bawah ini.

Silahkan temukan instruksi widget labelnya menyerupai 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='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
     <b:if cond='data:display == &quot;list&quot;'>
       <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='&quot;label-size label-size-&quot; + 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 instruksi <div class='clear'></div> persis menyerupai instruksi yang saya marking (block kuning) di atas. Dan pastikan ada instruksi CSS menyerupai di bawah ini. Jika tidak ada silahkan tambahkan.

 .clear {clear:both;}

Untuk menambahkan title pada linknya silahkan simak postingannya DI SINI.

Dan bila Anda tidak memakai template Kompi Ajaib namun ingin memakai tampilan widget label cloud menyerupai 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 menyerupai di atas. Dan bila Anda gres menambahkan widget label tersebut di blog, jangan lupa untuk menghapus ikon quickedit widget tersebut biar sanggup mengurangi error pada validasi html5.

Sumber https://www.kompiajaib.com/

Share this post