03 Februari, 2009

Scrollbar di Dalam Postingan

Jika pada tips yang lalu, telah diketengahkan cara menambahkan scrollbar pada body postingan maka pada tips kali ini, Tips dan Trik Blog akan mencoba mengetengahkan tips membuat scrollbar di dalam postingan. Dengan fasilitas Scrollbar ini kita dapat memanfaatkannya untuk membuat sebagian teks di dalam postingan menjadi tergulung dan memendek. Misalkan saja, kita ingin mencantumkan kutipan dari tulisan orang lain di dalam postingan kita dengan teks yang sangat panjang. Nah, dengan scrollbar ini, kita dapat membuat kutipan tersebut menjadi lebih pendek tanpa menghilangkan sebagian teks. Jika tertarik, silakan ikuti tipsnya berikut ini. Jika tidak tertarik, silakan baca-baca yang lain, he he (promosi).

Langkah-langkahnya sebagai berikut.

1. Login ke http://blogger.com hingga masuk Dasbor >> Tata Letak (layout) >> Edit HTML

2. Copy paste kode berikut ini di atas kode ]]></b:skin>

.scrollbox {
height:100px;
width:400px;
overflow:auto;
}

Kode di atas digunakan untuk menetapkan tinggi dan lebar scrollbar yang dapat kita kustomasi sesuai kebutuhan dan keinginan masing-masing.

3. Kemudian Simpan Template

4. Pada saat posting, tempatkan teks yang ingin di-scrollbarkan (digulung) di antara kode <div class="scrollbox"> dan </div>

Sebagai contoh, untuk membuat teks berikut ini menjadi tergulung, letakkan teks berikut di antara kode <div class="scrollbox"> dan </div>

<div class="scrollbox"> Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. </div>

Kita dapat menambahkan efek warna, ukuran, atau jenis font untuk mempercantik postingan yang hasilnya seperti di bawah ini.

Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan. Testing dan simulasi menggunakan scrollbar di dalam postingan.

Screenshotnya seperti di bawah ini.

5. Selesai.

Selamat bereksperimen!!

(sumber : Trick For New Blogger)

Baca juga yang ini

  1. Menambahkan Scrollbar Pada Bodi Postingan
  2. Membuat Scrollbar Untuk Label Yang Memanjang
  3. Tips Membackup Blog
  4. Tips Menghilangkan Angka Pada Label
  5. Tips Membuat Marquee
  6. Tips Trik Edit HTML
  7. Pentingnya Silahturahmi Antar Kerabat/Teman

Artikel Yang Berhubungan



12 komentar:

Baka Kelana mengatakan...

PERTAMAX

Baka Kelana mengatakan...

Thanks for this sharing and info

Arvernester mengatakan...

Wah sayang sekali udah ga pakai blogspot lagi neh, hehe,,

Motivasi dan Inspirasi Sukses mengatakan...

wah tips yg patut dicoba neh :) salam kenal yah
Kunjungi juga BLOG MOTIVASI SUKSES yah?

http://motivasi-arif.blogspot.com

tips n trik blog mengatakan...

@baka kelana >> sama2
@Arvernester >> makanya buat blog satu lagi bos, he2
@Motivasi n Inspirasi Sukses >> silakan aja bos, jika berkenan,oh, iya,..thx banget atas kunjungannya
@ semua >> thx atas kunjungannya

budhi54 mengatakan...

Wah tips n triknya hebat...
Sayang baru tahu..ya
Nah mohon petunjuk kalau nggak bisa masuk ke akun blogger gimana ?
Jangan-2 di banned ya tapi nggak da email dari Tim blogger tuh...

SEDONA mengatakan...

Good day friend.

Motivasi dan Inspirasi Sukses mengatakan...

berkunjung lagi neh :) kenapa yah gak bosan2 mampir di blog ini :) hehehe....
masnya mampir dong di BLOG MOTIVASI SUKSES?

http://motivasi-arif.blogspot.com

asep mengatakan...

ada tambahan trik,tips nya disini www.asep09.co.cc siapa tau bermamfaat

Motivasi dan Inspirasi Sukses mengatakan...

tips yang sangat menarik :) makasih anyway sudah mampir di BLOG MOTIVASI SUKSES :)

http://motivasi-arif.blogspot.com

sekmen batola mengatakan...

Tips yang bermutu kawan, dan blognya pun elegant. Terima kasih, karena saya banyak mengambil manfaat dari blog ini.

Tips Triks mengatakan...

wah keren . . .
tnx for shared

Poskan Komentar

Terima kasih atas komentarnya,..