Cara Membuat Scroll Pada Label - Blog Kang Fatur

    Social Items

/ / / / / Cara Membuat Scroll Pada Label
Tutorial yang mau saya 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. Kalau pingin liat contohnya seperti ini :



Caranya simpel aja kok.
1. Pertama mulai dengan Login ke blogger.com
2. Masuk ke Rancangan dilanjutkan ke Edit HTML
3. Kemudian cari kode dibawah ini :


<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
<h2><data:title></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 dir="data:blog.languageDirection">
<data:label.name>
</data:label.name></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label.name>
</data:label.name></a>
</b:else>
<span dir="ltr">(<data:label.count>)</data:label.count></span>
</b:if></li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></div>



Kalo udah tambahin kode seperti di bawah ini :


<div style="overflow: auto; height: 300px;">

dan

</div>



Masukan kode berwarna merah dalam format seperti ini


<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
<h2><data:title></data:title></h2>
</b:if>
<div class="widget-content">
<div style="overflow: auto; height: 300px;">
<ul>
<b:loop values="data:labels" var="label">
<li>
<b:if cond="data:blog.url == data:label.url">
<span dir="data:blog.languageDirection">
<data:label.name>
</data:label.name></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label.name>
</data:label.name></a>
</b:else>
<span dir="ltr">(<data:label.count>)</data:label.count></span>
</b:if></li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></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.

Selamat mencoba semoga berhasil dan dapat bermanfaat.



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Cara Membuat Scroll Pada Label

Tutorial yang mau saya 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. Kalau pingin liat contohnya seperti ini :



Caranya simpel aja kok.
1. Pertama mulai dengan Login ke blogger.com
2. Masuk ke Rancangan dilanjutkan ke Edit HTML
3. Kemudian cari kode dibawah ini :


<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
<h2><data:title></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 dir="data:blog.languageDirection">
<data:label.name>
</data:label.name></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label.name>
</data:label.name></a>
</b:else>
<span dir="ltr">(<data:label.count>)</data:label.count></span>
</b:if></li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></div>



Kalo udah tambahin kode seperti di bawah ini :


<div style="overflow: auto; height: 300px;">

dan

</div>



Masukan kode berwarna merah dalam format seperti ini


<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
<h2><data:title></data:title></h2>
</b:if>
<div class="widget-content">
<div style="overflow: auto; height: 300px;">
<ul>
<b:loop values="data:labels" var="label">
<li>
<b:if cond="data:blog.url == data:label.url">
<span dir="data:blog.languageDirection">
<data:label.name>
</data:label.name></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label.name>
</data:label.name></a>
</b:else>
<span dir="ltr">(<data:label.count>)</data:label.count></span>
</b:if></li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></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.

Selamat mencoba semoga berhasil dan dapat bermanfaat.



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI
Blog Tutorial Blogger Tips Trik Blog Tutorial Blogger

18 comments:

  1. DheaMarch 4, 2011 at 8:14 PM

    gan, keren, kunjung ke blog saya di dheaarokhman.blogspot.com

    ReplyDelete
  2. UnknownMarch 5, 2011 at 1:10 PM

    salam sahabat
    bagus cara ,embuatnya simple saya juga ada mas eh kang hehehe maaf telat

    ReplyDelete
  3. Seri BahasaMarch 5, 2011 at 6:00 PM

    template jenis transformer kok sukar banget di modify sob.. mainpostnya kalau di kecilkan langsung lari kalau dibuka di IE.

    terpaksa guna kode mainpost dari template lain dan banyak kode yg harus diubah baru bisa stabil di IE.

    gimana mau ubah kode kotak komentar agar tidak lari ukurannya di IE?

    ReplyDelete
  4. eliz firstMarch 5, 2011 at 6:54 PM

    @Seri Bahasa Ia sob bener susah, yang punya saya juga di IE ma di Google Crom tampilanya gak seperti aslinya, mungkin IE n Google Crom tidak menerima CSS3.

    ReplyDelete
  5. Kang FaturMarch 6, 2011 at 9:28 AM

    @Seri Bahasa Bener sobat Seri, IE ma Google Crom mungkin gak menerima CSS3, yang punya Kang Fatur juga ngaco kalau sudah dibuka di IE ma GoogleCrom.

    ReplyDelete
  6. Seri BahasaMarch 6, 2011 at 5:53 PM

    untung juga myoritas blogger pake mozilla... seri sekarang sedang cari kode comment yng serasi dengan IE dan GoggleCrom.

    ReplyDelete
  7. Kang FathurMarch 7, 2011 at 5:33 PM

    @Seri Bahasa OK selamat berjuang mudah2an berhasil. dan bagi

    ReplyDelete
  8. bippiMarch 7, 2011 at 7:57 PM

    wajib dicoba nie sob...thanks sharingnya sob

    ReplyDelete
  9. blog itemMarch 15, 2011 at 4:59 PM

    thanks tutorialnya mas :)..sudah saya praktekan

    ReplyDelete
  10. UnknownApril 4, 2011 at 9:33 AM

    Waduch..
    Knpa pUnyaku ga Bisa Ea??
    aPa mgKin tEmplatex Bukan daRi bLoggEr Ea??
    tLong Donkz..

    jOk Lpa kUnjungi balik BLogx Q Ea??
    saya tUnggu..
    ^_^

    ReplyDelete
  11. AdminApril 19, 2011 at 9:15 PM

    di coba akh ....
    tp berat bgt yee blognya ...
    hhee

    ReplyDelete
  12. UnknownJune 2, 2011 at 2:07 AM

    Di coba dulu ya mas :))

    ReplyDelete
  13. Catatan | Tips | PengalamanJune 8, 2011 at 1:52 PM

    triknya sangat bermanfaat gan

    ReplyDelete
  14. H. Asrul HoeseinJune 25, 2011 at 4:39 PM

    Ass.Alaiku..Mampir baca Tutorial ngeblog sobat N artikel lainnya, postingnya cukup manfaat, lanjutkan guna pengembangan blogger yang berkarakter...Semoga....Mari kita jaga komunitas ini...Salam sukses

    ReplyDelete
  15. UnknownJune 29, 2011 at 1:48 AM

    GAJI 8$ s/d 12$ per JOB dibayar setiap hari anda kerja

    bila anda memenuhi persyaratan di bawah ini :
    1. HARUS PUNYA REKENING PRIBADI
    2. BISA BACA DAN NGETIK
    3. RAJIN,TELITI, DAN CERDAS
    dapatkan GAJI 8$ s/d 12$ per JOB dibayar setiap hari anda kerja.
    Bagi yang serius dan berminat silakan ANTAR LAMARAN ANDA DI SINI
    http://bit.ly/lNuUVv

    ReplyDelete
  16. KhasbullahJuly 29, 2011 at 10:19 PM

    kang patuuuurrr koq Giniii...hahahaaaa kemaren Blog Ane Jga Templatenya begono....tp skarang dah warassss.......

    ReplyDelete
  17. ModzAugust 28, 2011 at 4:38 PM

    hatur nuhun kang infonya...

    ReplyDelete
  18. danarjiJuly 4, 2012 at 8:23 AM

    mantap bos infonya, labelku jadi berscroll deh hehehe

    ReplyDelete

Subscribe to: Post Comments (Atom)

Subscribe Our Newsletter

Notifications

Disqus Logo