5 Membuat Background Pada Teks Area

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Anaa pernah posting cara membuat teks area, apa itu teks area? lihat aja lagi postingan itu disini.

Kali ini cara membuat agar teks areanya memiliki background dengan cara menambahkan kode berikut:

<div style="overflow: auto; width: 500px; height: 100px;
background-color: #FFCCFF; text-align: justify; padding: 5px;
border: 2px solid
#FF3300;">Letakkan kalimat yang ingin ditampilkan pada teks area disini</div>

Note:

Kode diatas bisa diedit lagi

  • width : lebar text area
  • height : tinggi text area
  • background-color : warna background text area
  • text-align : perataan text
  • padding : jarak antar tulisan
  • border : tebal tipisnya garis tepi text area
  • solid : warna garis tepi text area.

    Nah berikut contohnya:

    <div style="overflow: auto; width: 500px; height: 100px;
    background-color: #FFCCFF; text-align: justify; padding: 5px;
    border: 2px solid
    #FF3300;">

    Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

    Optimislah walaupun engkau berada dalam terpaan bencana.

    Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

    Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

    Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

    Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

    Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

    </div>

    Maka hasilnya akan seperti ini:

    Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu. Optimislah walaupun engkau berada dalam terpaan bencana. Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma. Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu. Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia? Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah. Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

    Selamat mencoba, semoga bermanfaat!

     


  • ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

    Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

    5 komentar :

    1. hehehe..
      canggih,, lanjutkan,, !!
      dan terima kasih ya,,

      BalasHapus
    2. Ok sob thank tipsnya... di tunggu kunjungan baliknya :)

      BalasHapus
    3. Thank Sob Ilmunya... Semoga Sukses slalu.. Kunjungan baliknya ditunggu...

      BalasHapus
    4. sip...terima kasih sharing infonya ini...

      BalasHapus
    5. lho mbak da berhasil tp kolom side bar pada melompat semua....mhn infonya

      BalasHapus

    Catatan:
    Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
    Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

    NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
    Konversi Kode di Sini!