Ads Banner

Cara Menandai Label Aktif Menggunakan Tags Kondisional

Cara Menandai Label Aktif Menggunakan Tags Kondisional
Cara Menandai Label Aktif Menggunakan Tags Kondisional

Setelah sebelumnya membahas cara menandai label aktif dengan Javascript, kali ini saya akan coba dengan menambahkan kelas selected menggunakan tags kondisional. Saya asumsikan widget label sobat memiliki kerangka seperti pada kode di bawah ini.  Tags kondisional yang digunakan seperti ini <b:if cond='data:blog.searchLabel == data:label.name'>.

Kerangka widget label

<b:widget id='Label1' locked='false' title='Category List' 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;'>
<!-- Markup widget bertipe `list` -->
      <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/>
<!-- Markup widget bertipe `cloud` -->
        <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>

Cara / Tahapan Menandai Label Aktif Menggunakan Tags Kondisional

  1. Untuk menambahkan tag kondisional, anda harus mencari kode ini <b:loop values='data:labels' var='label'> pada widget label. kemudian tambahkan kode <b:if cond='data:blog.searchLabel == data:label.name'> tepat dibawahnya.
  2. Tambahkan kode <b:else/> setelah </li> Hasilnya seperti ini :
    <b:loop values='data:labels' var='label'>
              <b:if cond='data:blog.searchLabel == data:label.name'>
                <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:else/>
              </b:loop>
  3. Copy kode di atas dari mulai <li> s/d </li> kemudian pastekan dibawah <b:else/>.
  4. Tambahkan class="selected" pada <li> yang pertama (dicopy).
  5. Tambahkan </b:if> setelah </li> Hasilnya menjadi seperi ini :
    <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: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: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 dir='ltr'>(<data:label.count/>)</span>
                  </b:if>
                </li>
     </b:if>
              </b:loop>
  6. Untuk menambahkan jumlah posting perlabel cukup dengan menambahkan class="label-count" pada kedua kode ini <span dir='ltr'>(<data:label.count/>)</span> menjadi seperti :
    <span class="label-count" dir='ltr'>(<data:label.count/>)</span>
  7. Langkah terakhir tambahkan CSS ini dibawah ini.
    .you_wrap-sidebar .widget.Label .selected .label-count {
        background-color:#7828C2;
        color:#fff;
        margin-right:-6px;
        box-shadow:none;
        border:1px solid #6E1DAD;
        font-size:10px
    }
    .you_wrap-sidebar .widget.Label li.selected a {
        color:#fff;
    }
    .you_wrap-sidebar .widget.Label li.selected {
        background-color:#8941CC;
        padding:6px 7px;
        border:none;
        -webkit-box-shadow:0 2px 2px rgba(0, 0, 0, .4);
        box-shadow:0 2px 2px rgba(0, 0, 0, .4);
        color:inherit;
        font-size:15px;
    }
    .you_wrap-sidebar .widget.Label li:hover .label-count, .you_wrap-sidebar .widget.Label li a:focus+.label-count {
        background:#fc391e;
        color:#FFF;
        box-shadow:none
    }
    .you_wrap-sidebar .widget.Label .label-count {
        background:#292929;
        border:#313131 solid 1px;
        border-radius:3px;
        padding:0 5px;
        float:right;
        text-align:center;
        margin:-1px -15px 0 0;
        box-shadow:1px 1px 1px #1a1a1a inset
    }
a. Sesuaikan CSS yang ditandai dengan struktur elemen sidebar pada template anda.
b. Untuk tampilan lainnya silahkan sesuaikan dengan minat dan template anda
6. Simpan

Print/Save

Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.!
Share This :

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar