Cara Membuat Scroll Pada Label

Nemu tutorial yang menarik lagi nih.Pastinya menarik dan berguna buat blogger-blogger pemula sama yang udah master.Tapi kayaknya yang udah master udah pada tau.


Tutorial yang mau aku bahas kali ini adalah membuat scroll pada label.Bagi yang labelnya banyak pasti ribet kalau labelnya memanjang sampe ke bawah gitu.Mangkanya ditambahin scroll biar lebih hemat tempat dan pastinya bikin loading blog cepet.
Caranya simpel aja kok.Pertama mulai dengan Login ke blogger.com
2. Masuk ke Tata Letak dilanjutkan ke Edit HTML
3. Kemudian cari kode dibawah ini :  (kalo gak ada berarti widget labelnya belum ditambahin.Tambahin dulu sana!)

<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 class='widget-content'>
<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>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>

Kalo udah tambahin kode

<div style='overflow:auto; width:ancho; height:300px;'>

dan

</div>

Masukan kode berwarna merah dalam format

<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 class='widget-content'>
<div style='overflow:auto; width:ancho; height:300px;'>
   <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>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div> </div> </div>
Yang berwarna merah adalah kode scrollnya.Sedangkan yang berwarna biru adalah kode untuk button.Kode berwarna biru bisa diganti menjadi <ol> dan diakhiri dengan </ol> untuk diganti menjadi angka.

Sekian tutorial kali ini.Nantikan postingan-postingan keren berikutnya.
_____________________________



Kalo enggak ingin ketinggalan postingan di blog ini berlangganan saja di kolom subcribers di bawah.
u comment i follow
Bookmark and Share
Dapatkan Artikel terbaru dari blog ini, langsung ke e-mail anda dengan berlangganan disini.

Enter your email address:

Delivered by FeedBurner

Powered by FeedBurner

Sudah Baca Yang Ini ?



Comments :

20 comments to “Cara Membuat Scroll Pada Label”

Dimas mengatakan...
on 

sep tinggal tambahin 2 kode itu aja ya, mo coba2 dulu ah..

the others... mengatakan...
on 

Makasih infonya ya..., jadi dapat ilmu baru disini.

catatan kecilku mengatakan...
on 

Mampir utk baca-2 disini.
Makasih kunjungannya ya..?

catatan kecilku mengatakan...
on 

Lho.., komenku tadi hilang ya..?
Maaf baru sempat mampir, makasih ya utk kunjungannya.

Pencari Inspirasi mengatakan...
on 

mesti langsung di praktekin neh... maksih sob...

Parenting mengatakan...
on 

makin keren aja tutorialnya. Dg scrolling memang lebih rapi dan tidak terlihat panjang ^_^

Hizrian mengatakan...
on 

gax rugi berlangganan disini
mantaaaaaph

secangkir teh dan sekerat roti mengatakan...
on 

jadi bisa lebih singset blognya, hehehe

Good trik mengatakan...
on 

sob saya mau tanya, mksd dari Width:ancho itu apa y? saya belum pernah menemui seperti itu sob? lg pula kalau mau di kasih scroll cukup menambahkan overflow saja juga cukup, tapi Infonya bermanfaat nie sob.... ^_^

Aditya's Blogsphere mengatakan...
on 

Yup...makasih bro kunjunganya ke blog q...lama bgt lho km ndak nongol.......oh ya...perasaan ganti template yah?sampe ndak tau deh aq, sip memang kode ini :
<div style='overflow:auto; width:ancho; height:300px;'>



</div>

bisa di pakai untuk memasangkan scroll pada semua widget blogger....sip tutorialnya...maju terus

Aditya's Blogsphere mengatakan...
on 

<div style='overflow:auto; width:ancho; height:300px;'>

</div>

Rahad 2 Six mengatakan...
on 

good trik > ancho itu sama dengan kode width:auto.dicoba dulu deh.kan hasilnya langsung otomatis dia...kira-kira begitu penjelasannya.

aditya blogsphere > iya nih sob..lagi sibuk di dunia nyata...hehehe iya, gimana keren gak templatenya?
kode scroll yg lebih lengkap tu yg ini :

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">



</div>

Rizky2009 mengatakan...
on 

keren aq pernah coba cuma aq ganti dengan model cloud tp yg bawan blogger bukan yg model flash

BRI Jakarta Veteran mengatakan...
on 

tipsnya menarik dan bermanfaat, ijin di-save dulu sahabat, salam

Saung Web mengatakan...
on 

Hehe postingannya sama nih.. siiplah.. ohya dah saya follow sob..

Dofollow Blog Community mengatakan...
on 

Hai sob.. dah gabung disini belum ?? yo gabung disini

aan mengatakan...
on 

siplaah,,perlu dicoba nih

Lina Marliana mengatakan...
on 

Nice tips nih bro.. bermanfaat banget
tapi labelku saat ini sedang aku bikin tag could tuh..

andrew mengatakan...
on 

terima kasih infonya.

PIK Remaja mengatakan...
on 

Terimakasih atas tutorialnya, ok Q coba boz

Posting Komentar

Blog ini DoFollow.
Jadi silahkan berkomentar disini.

Yang penting komentar bukan Spam,Porno,maupuun berunsur SARA.Jika ada yang seperti itu akan langsung dihapus.


Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)

Friends

 

Copyright © 2009 by Rahad 2 Six