EndangKusman.Com

Blogging, Belajar Nge-Blog & Berbagi Info

Cara Membuat Kotak Scroll pada Sidebar dan Posting Blog

Kotak scroll adalah kotak atau jendela untuk menyimpan gambar atau teks dengan tampilan yang bisa diatur ukurannya, dan untuk melihat yang tersembunyi dengan cara menggeser tombol scrol.  Kotak scroll atau orang menyebutnya blog scroll banyak perlunya untuk dipasang di blog yang gunanya untuk menghemat tempat apabila teks atau gambar cukup banyak memakan tempat. Misalnya untuk memasang teman-teman link pada Tukar link yang jumlahnya puluhan bahkan ratusan.. apabila tidak menggunakan kotak scroll akan memakan tempat banyak, dan dilihatnya juga tidak bagus. Kemudian dalam postingan kita akan menampilkan teks atau gambar yang panjangnya bisa memakan tempat beberapa halaman, ini juga penting.. sebab kalau tidak menggunakan kotak scroll, maka alaman posting kita tidak bagus terlalu panjang.

Caranya sebagai berikut :

Letakan kode berikut pada sidebar atau pada postingan blog sobat :

<div style=”border: 1px solid #006600; overflow: auto; width: 270px; height: 236px;”>
url gambar, teks, url link teman dsb.
</div>

Keterangan :

  • border= kotak atau bingkai scroll
  • 1 px  = garis kecil, jika ingin tebal ganti angka 1 dengan angka yang lebih besar
  • #006600 = warna garis hitam muda
  • width = lebar kotak, ini dapat disesuaikan dengan tempat dimana kotak scroll akan diletakan di sidebar atau di postingan. kalau di sidebar biasanya lebar maksimum 300 px, sedangkan pada postingan maksimum 600 px.
  • height = tinggi kotak, tinggi juga bisa disesuaikan.
  • </div> adalah kode penutup.
Cara meletakan url gambar :
Upload terlebih dahulu beberapa gambar dengan ukuran lebar yang sama (tinggi tidak perlu sama) ke blog sobat dan copy semua urlnya kemudian simpan sementara di notepad kemudian copy paste ke dalam kode di atas sehingga seperti berikut :

<div style=”border: 1px solid #006600; overflow: auto; width: 270px; height: 236px;”>
url gambar1<br />
url gambar2<br />
url gambar3<br />
url gambar4 dst..<br />
</div>

Hasilnya seperti sbb :





Cara meletakan teks yang panjang di dalam postingan :

<br /><br />
<div style=”border: 1px solid #006600; overflow: auto; width: 270px; height: 236px;”>

Contoh Teks

Ini adalah tutorial panduan membuat kotak scroll atau blog scroll. Bagi blogger senior tentunya sudah tidak memerlukan tutorial seperti ini, tetapi untuk blogger pemula sangat penting dan akan menjadi pengetahuan bru baginya. Guna kotak secroll banyak gunanya dalam mengelola sebuah blog. Oleh karena itu para senior blogger jangan mengetawakan tutorial yang sangat dasar ini. Saya dulu ketika masih pemula sangat senang jika menemukan pengetahuan baru dari para blogger senior yang meu membagikan ilmu dan pengalamannya. Pengetahuan blogging yang didapat memalui tutorial para senior sudah cukup banyak dan tidak saya catat satu persatu. Sekarang, saya juga harus membagikannya kepada pemula yang memerlukan.

Nah.. itulah contoh teks yang bisa ditambah lebih panjang lagi.

</div>
<br /><br />

Kode <br /><br /> agar ada jarak antara kotak scroll dengan teks dalam postingan, gunakan

Hasilnya  :
Contoh Teks Ini adalah tutorial panduan membuat kotak scroll atau blog scroll. Bagi blogger senior tentunya sudah tidak memerlukan tutorial seperti ini, tetapi untuk blogger pemula sangat penting dan akan menjadi pengetahuan bru baginya. Guna kotak secroll banyak gunanya dalam mengelola sebuah blog. Oleh karena itu para senior blogger jangan mengetawakan tutorial yang sangat dasar ini. Saya dulu ketika masih pemula sangat senang jika menemukan pengetahuan baru dari para blogger senior yang meu membagikan ilmu dan pengalamannya. Pengetahuan blogging yang didapat memalui tutorial para senior sudah cukup banyak dan tidak saya catat satu persatu. Sekarang, saya juga harus membagikannya kepada pemula yang memerlukan. Nah.. itulah contoh teks yang bisa ditambah lebih panjang lagi.


Cara meletakan URL link teman

<div style=”border: 1px solid #006600;bgcolor=”#F2F2F2″ overflow: auto; width: 270px; height: 236px;”>
<ul>
<li><a href=”http://www.serbifo.blogspot.com”>Contoh</a><li>
<li><a href=”link teman”>Teman1</a><li>
<li><a href=”link teman”>Teman2</a><li>
<li><a href=”link teman”>Teman3</a><li>
<li><a href=”link teman”>Teman4</a><li>
<li><a href=”link teman”>Teman5</a><li>
<li><a href=”link teman”>Teman6</a><li>
<li><a href=”link teman”>Teman7</a><li>
dst…
</ul>
</div>

Hasilnya :


Mohon diingat :
Khusus untuk meletakan kode kotak scroll dalam postingan harus pada mode HTML.

Memasang kotak roll bukan hanya pada sidebar saja, di dalam postingan juga kadang-kadang kita perlu memasangnya untuk jenis-jenis tulisan tertentu. Itulah tips dan cara membuat kotak scroll atau blog scroll yang sepintas dianggap kurang penting, padahal sangat perlu kita ketahui caranya, sebab sewaktu-waktu akan kita perlukan dalam mengelola sebuah blog.

Updated: 05/12/2012 — 3:30 pm
EndangKusman.Com © 2015 - Contact - Privacy - Disclaimer - Sitemap Frontier Theme