mas template

Membuat Bingkai Tulisan di Blog

Selamat siang temen-temen blogger semua, ketemu lagi dengan saya pada tutorial blog. Pada postingan sebelumnya saya sudah menjelaskan bagaimana memperindah blog kita dengan membuat shadow efek pada gambar, dan pada kesempatan kali ini saya akan memberikan penjelasan mengenai cara membuat bingkai pada tulisan di blog agar kelihatan lebih menarik. Tentunya temen-temen sudah tidak sabar lagi, oke kita langsung saja pada permasalahannya.

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 yang berada di dalamnya. Dan untuk membuatnya kamu tinggal mengkopi script berikut:
<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color:#EFEFEF; text-align: center;">Tulisan temen-temen yang akan ditampilkan disini</div>
Tulisan temen-temen yang akan ditampilkan disini
Keterangan:
  • Border: 1px solid #CCC, berarti ketebalan garis (border) adalah 1px dengan warna abu-abu (mengenai kode warna dapat dilihat disini).
  • 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) yang dimasukkan kedalamnya. Kamu bisa merubah perintah auto kedalam bentuk pixel, misalnya: 100px.
  • Background-color:#EFEFEF, berarti kotak berwarna abu-abu. Jika ingin dihilangkan warnanya, ganti kode #EFEFEF 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 temen-temen bisa mengubahnya sesuai dengan selera Anda.

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 Anda tinggal mengkopi script berikut:

<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 100px; background-color: #E0ECF8; text-align: justify;">Tulisan yang temen-temen ingin tampilkan disini</div>
Tulisan yang temen-temen ingin tampilkan disini.

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.  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. Untuk membuatnya kamu tinggal mengkopi script berikut:

<textarea rows="5" cols="50">Tulisan yang temen-temen ingin tampilkan disini</textarea>


Keterangan:

  • Pada script di atas menunjukkan 5 baris dan 50 kolom. Dengan demikian tulisan yang melebihi 5 baris dan/atau melebihi 50 kolom akan disembunyikan.
Note :
Untuk menuliskan kode script kedalam bingkai, kamu harus melakukan encoding terlebih dahulu, karena jika tidak akan dianggap sebagai perintah bukan sebagai teks. Seperti < harus ditulis &lt;, > harus ditulis &gt;, " harus ditulis &quot;, dll.

Itu tadi penjelasan mengenai cara membuat bingkai tulisan, jika temen-temen masih kesulitan jangan malu-malu untuk menulisnya di kotak komentar di bawah. Selamat mencoba dan 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 Creating Website

22 comments:

  1. wahh..
    artikel bagus nihh..
    terima kasih atas infonya mas.
    Salam blogger.. ^_^

    ReplyDelete
  2. .. ada contohnya gak nich?!? bingunk aq kawan. PlizZz,, ..

    ReplyDelete
  3. ada contoh ka..kurang faham lagi

    ReplyDelete
  4. keren...tapi bisa ngga di buat bingkai yang agak cantik ?..

    ReplyDelete
  5. yuupzz .. mantap artikel nya mohon link back my blog http://artikelprofesikesehatan.blogspot.com/

    ReplyDelete
  6. manjur nih, sudah saya praktekin di blog saya.
    makasih gan..

    makasih buat mampir juga di http://koreanstu.bogspot.com

    ReplyDelete
  7. Lumayan nih sebagai penambahan pada saat membuat postingan. Terimakasih atas tutorial nya :)

    ReplyDelete
  8. Terimakasih tutorialnya mengingatkan sayah hee :) mampir ya http://ilmufacebook.blogspot.com

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. maz izin copas, sudi mampir di blog http://ngumpulin-artikel-master-blog.blogspot.com/

      Delete
  10. Sebuah Info yang sangat bermanfaat mas... jujur saja, saya banyak belajar tutorial cara modif Blog dari maskolis ini...trimakasih...mudah2an jadi amal ibadah..

    ReplyDelete
  11. wow... inilah artikel yang selama ini aku cari terima kasih kepada maskolis atas artikelnya ini. Kalau bisa kunjung balik ke blog saya http://xmisteri.blogspot.com

    ReplyDelete
  12. masih agak bingung mas bos bikin nya... hikz

    ReplyDelete
  13. kalau background-nya pengen diganti pake gambar gimana ya
    http://www.duniagame.info/

    ReplyDelete
  14. makasih ka info na sangat bermanfaat
    www.winarshop.com

    ReplyDelete
  15. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam 1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  16. Teman - teman kesulitan untuk Belajar Komputer karena kesibukan? kini kami memfasilitasi kursus komputer jarak jauh via online, silahkan kunjungi website kami di asianbrilliant.com, Master Komputer, Kursus Online

    Ayah, Bunda..butuh guru untuk mengajar anak-anak dirumah ? kami memfasilitasi 1000 guru untuk anak-anak ayah dan bunda datang kerumah, silahkan kunjungi website kami di smartsukses.com, Bimbingan Belajar, Les Private

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger