Loading...
Sabtu, 29 Juni 2013

Cara Membuat Label Dengan Efek Scroll

LABEL akan semakin menarik dan praktis bila menggunakan scroll.
Untuk membuat scroll pada LABEL ini tidak jauh beda dengan membuat scroll pada gadget blogger/blogspot yang lain, yaitu sebagai berikut:

  1. Masuk dulu ke Acount Blogger atau Dashboard
  2. Pilih Layout , lalu klik Edit HTML
  3. Centang dulu  Expand Widget Templates
  4. Cari kode yang seperti ini: <b:widget id='Label1' locked='false' title='Label' type='Label'>
  5. Untuk memudahkan mencarinya , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next. 
  6. Kalau sudah,  tambahkan di bawahnya,( kode warna merah itu sebagai scollnya
  7. Lengkapnya kode tersebut seperti dibawah ini :
      <b:section class='sidebar' id='sidebar' preferred='yes'>
              <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:200px;'>    <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>
    </div></b:includable>

  8. Angka 200px adalah tinggi kotak scroll itu, silahkan disesuaikan.
  9. Mungkin saja diblog sobat kodenya beda,Oleh karena itu carilah yang mirip dan perlu dicoba, terus jangan lupa templatenya dibackup dulu.
  10. Kalau sudah jangan lupa save template .
  11. Selesai.
Hasil akhirnya adalah seperti ini : 



















Semoga bermanfaat :)





0 komentar:

Posting Komentar

 
TOP