mengenal label pada blog lebih fokus

26 Des 2013

Kita para blogger pastinya sudah pada hafal sama yang namanya label dan biasa di pasang pada sidebar kanan ataupun kiri.

Di label itu sendiri terdapat 2 jenis tampilan lebel dalam 1 paket yaitu list dan cloud sudah pasti kita memasang salah satu nya dari jenis tampilan yang sudah tersedia antara list dan cloud.

Tanpa disadari dengan memilih salah satu dari jenis tersebut kode html yang tidak terpilih jadi nganggur dan akan tetap memperberat loding blog walaupun tidak tampil akan tetapi mesin akan tetap membacanya sebagai sistem.

Untuk itu kita harus bisa mengantisipasi kode kode yang tidak perlu di dalam template biar blog jadi lebih cepat dengan cara menghapus kode html pada label dan kita ambil yang perlu nya saja.

Di bawah ini HTML asli bawaan blogger:

<b:widget id='Label1' locked='false' title='Label' 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>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

Kode yang di block warna adalah label dengan jenis list sedangakan kode yang di block warna adalah label dengan jenis cloud

Untuk bisa di bagi jadi 2 antara list dan cloud kode nya seperti dibawah ini

label dengan tampilan LIST:

<b:widget id='Label1' locked='false' title='Tutorial Blog' 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'>
          <b:if cond='data:blog.searchLabel == data:label.name'>
            <li class='selected'>
              <b:if cond='data:blog.url == data:label.url'>
                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
              <b:else/>
                <a 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>
            </li>
      <b:else/>
            <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 class='label-count' dir='ltr'> <data:label.count/> </span>
              </b:if>
            </li>
    </b:if></b:loop></ul></b:if></div></b:includable>
  </b:widget>

label dengan tampilan CLOUD:

<b:widget id='Label2' locked='false' title='Jumper Ponsel' 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: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>
  </div>
</b:includable>
  </b:widget>

Kode label yang sudah di bagi tadi sudah bisa langsung di pasang, sesuaikan dengan selera masing masing mau yang tampilan LIST atau tampilan COLUD

html

Taufik 22.36