Cara Membuat Widget Fungsi Scoll

Selamat malam semua...
kali ini saya mau memberikan sedikit trik, yang juga karena ini permintaan dari salah satu pembaca Republic Of Note. Nah dengan judul ini Cara membuat Widget Fungsi Scroll kalian tentunya sudah tahu bukan apa yang dimaksud?

Nah lihatlah pada gambar di atas yang berkotak merah dan biru, itu adalah salah 1 contoh dari cara bagaimana agar widget kita berfungsi sebagai scroll, banyak manfaat dengan adanya kita memberikan scroll pada widget kita selain menghemat tempat tentu juga mempercepat loading pada blog kita dan lain-lain...

Akan tetapi pasti kalian bingun bagaimana caranya fungsi scroll pada widget-widget tertentu seperti Label, Popular Post, Arsip dan lainnya...
Tetapi saat kita untuk menambahkan widget pada kolom kosong kita bisa langsung otomatis memasukan script fungsi scrollnya...

Ok, pertama kita bahas dulu bagaimana memberikan fungsi scroll pada Label, Popular Post atau bahkan yang lain. SImak dibawah ini :

1. Login akun blogger anda
2. Pilih Template » Edit HTML » Lanjutkan » Checklist Expand Template Widget
3. Cari kode berikut,atau yang mirip seperti ini

<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;'>
<div style='overflow:auto; width:ancho; height:170px;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>

perhatikan kode yang bertulisan berwarna orange, itu adalah kode yang harus kalian cari, INGAT !! contoh diatas hanyalah contoh untuk pada widget Label, jika kalian ingin menggunakan di widget seperti Popular post atau yang lain tinggal Kalian sesuaikan saja id dan titlenya seperti yang bertuliskan kode yang berwarna orange, jika sudah tinggal sisipkan saja kode yang bertulisakan berwarna merah seperti pada contoh diatas, sedangkan yang berwarna biru itu adalah tingginya, sesuaikan saja tinggi yang anda inginkan...

4. Lalu cari kode berikut

 </b:loop>
    </b:if>
  </div></div>
</b:includable>
</b:widget>

Nah lihat kode yang bertuliskan berwarna merah, itu adalah kode yang harus anda tambahkan di akhir...

Penampakan script penuhnya kira-kira seperti ini

<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;'>
<div style='overflow:auto; width:ancho; height:170px;'>
    <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></div>
</b:includable>
</b:widget>

Nah itulah sedikit ulasan dari saya,mengenai Cara Membuat Widget Fungsi Scoll semoga berguna dan bermanfaat...

• Tweet
• Share
• Share
• Share
• Share