Blog Pak Asmuri,S.Pd

Saturday, 20 October 2012

CARA MEMBUAT KOTAK SCROLL PADA BLOG KITA


Sebelumnya saya pernah memposting mengenai cara membuat marquee atau teks berjalan untuk menghemat ruangan. Sebenarnya masih ada cara lain untuk melakukannya yaitu dengan cara membuat kotak Scrollbar.

Kotak ini bisa di scroll kekanan dan kebawah untuk menemukan teks lain yang tersembunyi sehingga bisa menghemat ruangan pada blog kita.

Untuk membuat kotak ini caranya sangat mudah:

1. Buka Blogger. Klik menu Design -> Page Elements
2. Klik Add a Gadget lalu klik HTML/Javascript


3. Masukkan kode yang dibawah ini:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Tambahkan teks atau kode script disini</div>
Jika Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal dengan teks yang ingin Anda tampilkan.

Sebagai contoh, saya memasukkan:


<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog</div>
Maka hasilnya akan seperti ini:

Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog


Jika Anda ingin menambahan gambar kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal diatas dengan <img src="alamat url gambar Anda" />

Catatan:
Ganti teks biru yang dicetak tebal dengan alamat alamat gambar anda contoh http://lh4.ggpht.com/_15FopxVONSo/SSlTogZcU-I/AAAAAAAAA18/EqRgvye_cNU/herman%20blog%20headline%20v6.gif


Sebagai contoh saya memasukkan:

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 300px; height: 80px; background-color: rgb(255, 255, 255);"><img src="http://lh4.ggpht.com/_15FopxVONSo/SSlTogZcU-I/AAAAAAAAA18/EqRgvye_cNU/s400/herman%20blog%20headline%20v6.gif" /></div>

Maka hasilnya akan seperti ini:


4. Kalau sudah. Klik Save lalu klik View Blog untuk melihat hasil tampilannya
**Atau anda pasang scrif  seperti ini
<div style="overflow:auto;width:100px;height:80px;padding:10px;border:1px solid #eee">

<a href="http://bloggerasmuri..blogspot.com">Tes 1</a>
<br />
<a href="http://bloggerasmuri..blogspot.com">Tes 2</a>
<br />
<a href="http://bloggerasmuri..blogspot.com">Tes 3</a>
<br />
<a href="http://bloggerasmuri..blogspot.com">Tes 4</a>
<br />
<a href="http://bloggerasmuri..blogspot.com">Tes 5</a>
<br />
</div>

Maka Hasilnya Akan Seperti ini



Note:
* Untuk Url warna Merah Muda di isi Link Blog anda
* Untuk tek 1 dan seteruzzznya...di isi dengan judul  artikel bolg

Selamat Mencoba..!!

Reaksi:

6 komentar:

  1. terimakasih banyak om.... sangat bermanfaat!

    ReplyDelete
    Replies
    1. terimakasih telah berkunjung di blog sederhana ini..teruskan activitas ngeblognya...maju teruzzzz.

      Delete
  2. Replies
    1. @ Mitasen Semoga bermanfaat untuk agan..Thanks atas Kunjungannya..

      Delete
  3. keren gan, thanks
    kunjungi juga arie-apthanta.blogspot.com

    ReplyDelete
    Replies
    1. @ Arie Apthanta Thanks atas kunjungannya ke lapak ane
      Mudah2an saya segera berkunjung balik ke blog anda..tunggu aja.

      Delete

Tinggalkan Komentar anda di sini sebagai tanda anda telah mampir
terima kasih atas Kunjungannya
Salam Pertemanan dari Asmuri ,S.Pd

Kumpulan Poto





































































































Materi Penting Untuk Guru