http://picasion.com

rss

Cari Sepatu Keren??

Membuat Border dan Kotak Pada Postingan

Ada beberapa sobat blogger yang mungkin belum tahu cara membuat bingkai (kotak) pada tulisan. Atau mungkin ada yang sudah tahu tapi tidak tahu bagaimana membuat tulisan dalam bentuk script HTML di dalam kotak tersebut. Atau mungkin juga sudah tahu tapi belum mengerti benar akan perintah-perintah yang ada karena hampir di setiap artikel mengenai bingkai ini tidak diberikan penjelasan yang memadai sehingga cukup menyulitkan bagi blogger pemula untuk memahaminya. Nah, mungkin tulisan ini akan berguna untuk mengatasi “ketidaktahuan” tersebut.
Ada tiga jenis kotak yang biasa dipakai untuk membingkai sebuah tulisan, yaitu: border, overflow (biasanya disebut kotak scroll), dan textarea. Tentu saja ketiganya memiliki karakteristik yang berbeda. Nah, untuk mengetahui itu semua, berikut akan dijelaskan satu persatu mengenai bingkai tersebut.

Border
Seperti namanya, border berarti bingkai yang membatasi tulisan/gambar yang berada di dalamnya. Dan untuk membuatnya tinggal mengkopi script berikut:

<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color:#FBFBEE; text-align: left;">isi tulisan disini</div>
Keterangan:

  • Border: 1px solid #CCC, berarti ketebalan garis (border) adalah 1px dengan warna abu-abu (mengenai kode warna dapat dilihat di Adobe Photoshop atau CorelDraw. Atau bisa kamu kunjung situs HTML Color Codes).
  • Margin: 10px 0px, berarti margin atas-bawah 10 px dan margin kiri-kanan 0 px.
  • Padding: 10px, berarti jarak tulisan ke border adalah 10px.
  • Perintah auto pada width dan height supaya lebarnya mengikuti lebar kolom yang tersedia, sedangkan tingginya mengikuti isi (tulisan/gambar) yang dimasukkan kedalamnya. Kamu bisa merubah perintah auto kedalam bentuk pixel, misalnya: 100px.
  • Background-color:#FBFBEE, berarti kotak berwarna gading. Jika ingin dihilangkan warnanya, ganti kode #FBFBEE dengan none atau hapus perintah background-color berikut kode warnanya.
  • Text-align: left, berarti tulisan dalam bentuk rata kiri. Jika kamu ingin mengubahnya, ganti saja left-nya dengan right, center, atau justify (rata kanan = right, rata tengah = center, dan rata kiri-kanan = justify).
Untuk semua perintah tersebut kamu bisa mengubahnya sesuai dengan selera kamu.

Overflow
Overflow berarti tulisan yang melebihi media yang tersedia. Ada tiga perintah dalam overflow, yaitu scroll, hide, dan auto. Jika scroll yang digunakan maka tulisan yang melebihi media akan dibuatkan scroll. Jika hide, maka tulisan yang melebihi media akan disembunyikan. Dan jika auto, maka tulisan yang melebihi media akan dibuatkan scroll dan sisanya akan disembunyikan.
Untuk membuatnya kamu tinggal mengkopi script berikut:

<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 100px; background-color: none; text-align: left;">isi tulisan disini</div>
Keterangan:

  • Jika tulisan tersebut melebihi lebar (lebarnya 95% dari lebar container) yang tersedia dan tingginya melebihi 100px maka akan dibuatkan scroll dan sisanya akan disembunyikan.
  • Perintah-perintah tambahan pada overflow ini mirip dengan perintah-perintah pada border sehingga untuk memahaminya bisa dilihat pada keterangan border.
Textarea
Textarea berarti kotak yang melingkupi daerah text itu berada. Untuk membuatnya kamu tinggal mengkopi script berikut:

<textarea rows="5" cols="50">isi tulisan disini</textarea>
Keterangan:

  • Pada textarea tidak menggunakan width dan height (lebar dan tinggi) tetapi menggunakan rows dan cols (baris dan kolom) untuk menyatakan lebar dan tinggi areanya. Tetapi akibatnya akan sama dengan overflow, yaitu akan dibuatkan scroll dan disembunyikan jika text melebihi area baris dan kolom yang ditentukan.
  • Pada script di atas menunjukkan 5 baris dan 50 kolom. Dengan demikian tulisan yang melebihi 5 baris dan/atau melebihi 50 kolom akan disembunyikan.
Menulis kode script pada bingkai
Untuk menuliskan kode script kedalam bingkai, kamu harus melakukan encoding terlebih dahulu, Untuk melakukan encoding terhadap script yang akan dijadikan teks, kamu bisa mengunjungi situs centricle.com
caranya copy paste script -- > encode 
Teman-teman juga dapat mengunjungi sumbernya di ruangsc


Sebenarnya sudah banyak variasi yang ditulis oleh para blogger untuk bentuk border dan warnannya. Berikut contoh-contohnya:

<div style="border: 10px solid red">coba coba coba</div>

<div style="border: 10px double blue">coba coba coba</div>

<div style="border: 10px groove red">coba coba coba</div>

<div style="border: 10px outset red">coba coba coba</div>

<div style="border: 10px ridge green">coba coba coba</div>

<p style="border: dashed 5px #FF7F00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #000000; font-size: 18px">Coba coba</p>

<p style="border: solid 10px #ddddff; background: #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">Coba coba</p>

<p style="border: solid 10px #00FF00; background: #FFD700; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">Coba coba</p>

<p style="border: dashed 5px #FF7F00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #000000; font-size: 18px"><blink>Coba coba</blink></p>

Selamat Datang di Blog Pak Dani

Berikut kodenya:
<p style="border: dashed 5px #FF7F00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #000000; font-size: 18px"><marquee direction="left">Selamat Datang di K-blogger</marquee></p>


Semoga bermanfaat . . . . . . . 

.::Related Posts:

2 comments:

software download full on Tuesday, January 11, 2011 3:11:00 PM said... Reply

thanks boz untuk tutorialnya

Shinobi on Sunday, September 18, 2011 1:26:00 PM said... Reply

makasih infonya... :)


Post a Comment

Silahkan tulis komentar sebagai umpan balik dari artikel ini. Tidak diperkenankan untuk komentar yang berunsur spamming, porno, dll.

http://picasion.com/i/1TFa9/

Sub Menu

  • 1. Membuat Teks Berkedip
  • 2. Menambah Elemen di Atas dan Bawah Posting
  • 3. Menambah Dua Elemen di Bawah Sidebar
  • 4. Kotak Komentar Blogger Bermasalah
  • 5. Membuat Teks Bergerak Pada Blogger
  • 6. Membuat Tabel Pada Blogger
  • 7. Cara Membuat Scrollbox pada Blogger
  • 8. Fungsi New Pages Pada Blogspot
  • 9. Cara Menampilkan Tanggal Post (Post Date) Blogger di Waktu Yang Sama
  • 10. Membagi 2 Kolom Sidebar Blog
  • 11. Cara Memperlebar Halaman Blog
  • 12. Mengatur Perataan Posting Artikel
  • 13. Membuat Menu Dropdown Pada Arsip
  • 14. Blogger Sudah Support Fungsi Readmore
  • 15. Menambahkan Web Counter
  • 16. Cara Mendaftar dalam Blogspot
  • 17. Membuat Emotion Pada Blogger
  • 18. Memasang Yahoo Messenger Emotion
  • 19. Membuat Background Posting
  • 20. Membuat Menu Tab View Pada Blogger
  • 21. Cara Mengganti Icon Pada Address Bar
  • 22. Cara Memasang Gambar Berbingkai
  • 23. Cara Membuat Tombol Facebook Like di Blogger
  • 24. Cara Membuat Related Post Dengan Fungsi Scroll
  • 25. Membuat Border dan Kotak Pada Postingan
  • 26. Cara Membuat Buku Tamu Melayang
  • 27. Membuat Iklan Melayang dengan Tombol Close
  • 28. Membuat Kata Sambutan, Penutup dan Pertanyaan Pada Blogger
  • 29. Memasang Widget Recent Post dengan Thumblnails
  • 30. Evolusi Blogger dari Tahun 1999 - 2009
  • 31. Tips Agar Blog Anda Mudah Diakses di HP
  • 32. Cara Memasang Retweet Button Pada Blogger
  • 33. Cara Memperbesar Image/Gambar Pada Postingan Blog
  • 34. Menambah Font dari Google Custom Pada Blogger
  • 35. Membackup Komentar di Blogger
  • 36. Koleksi Gratis RSS Feed Icon dan RSS Feed Vector Graphics
  • 37. Tips Menjadikan Blogger Unlimited Bandwidht/Loading Page Super Cepat
  • 38. Daftar 'Keyboard Shortcut' Untuk Posting di Blogger
  • 39. Mengganti Font Blogger dari Kernest.com
  • 40. Tips Seni Dalam Menulis Artikel di Blog Kita
  • 41. 8 Tips Menulis Artikel Blog Dalam Waktu 20 Menit
  • 42. 5 Tips Efektif dalam Menulis di Blog
  • 43. Mengenal Lebih Dekat Tentang SEO dengan SEO Dictionary
  • 44. 4 Situs Terbaik Bekapasitas 10GB Untuk Menyimpan Data Secara Online
  • 45. SEO adalah Kerangka, Konten adalah Otot, Sosial Media adalah Fisik
  • 46. Bagaimana Cara Kerja Google?
  • 47. Perbaharui Posting Lama Anda
  • 48. Mengapa Page Rank Blog/Web Jatuh?
  • 49. Share Buttons Milik Blogger
  • 50. Integrasi Antara Blogger dan Zemanta Gadget
  • 51. Gambaran Frekuensi Posting Blog kita
  • 52. Cara Mengatasi Blog Post dari Copy Paste
  • 53. Batas/Limit Kapasitas Akun Blogger
  • 54. Posting Blog Menggunakan Word 2010
  • 55. 6 Situs Foto Gratis untuk Blog Anda
  • 56. Cara Menampilkan Tanggal Post (Post Date) Blogger di Waktu Yang Sama
  • 57. 5 Alasan Mengapa Anda Harus Menjawab Setiap Komentar
  • 58. Cara Memodifikasi Bullet List dan Numbered List di Blogger Post
  • 59. Generasi Blogger Masih Didominasi Oleh Kawula Muda
  • 60. Blogger Perkenalkan Pendeteksi Otomatis Komentar Spam
  • 61. Blogger Belajar Dari Harry Potter
  • 62. Trik Menampilkan Total Post, Comment, dan Online User
  • 63. 38 Jawaban SEO
  • 64. Trik Menampilkan Total Post, Comment, dan Online User
  • 65. Cara Mentransfer Akun Blog ke Akun Blog yang Lain
  • 66. Mengenal Fungsi Navbar di Blogger
  • 67. Cara Pasang Recent Posts Thumbnails Dengan Mudah
  • 68. Cara Memasang File Flash Di Blog Post
  • Popular Posts

    Shout it!