Cara Membuat Scroll Pada Label

3/03/2011 Blog Tutorial Blogger Tips Trik Blog Tutorial Blogger
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

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

19 comments

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

Balas

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

Balas

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?

Balas

@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.

Balas

@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.

Balas

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

Balas

@Seri Bahasa OK selamat berjuang mudah2an berhasil. dan bagi

Balas

wajib dicoba nie sob...thanks sharingnya sob

Balas

thanks tutorialnya mas :)..sudah saya praktekan

Balas

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

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

mantap bos infonya, labelku jadi berscroll deh hehehe

Balas