> > > Cara membuat Border | frame

Cara membuat Border | frame

Unknown

: 20.16 2 comments

S ebenar nya tutorial yang akan aku share kali ini sudah banyak kita jumpai di berbagai blog tetangga ,tetapi dari pada ngak update postingan sama sekali kan ngak ada salah nya buat mengulang sesuatu yang di anggap remeh akan tetapi sangat di butuhkan apabila kita akan memberikan border pada sebuah  artilkel ataupun gambar .
Sebagai rumus awal dalam pembuatan border / frame gunakan kode berikut :
<div style=".......">isikan teks disini</div>
Jika kita lihat contoh rumus di atas bahwa yang akan kita kasih border /frame adalah teks "isikan teks disini " tentu saja rumus di atas tidak akan berfungsi dengan baik sebelum di beri kode tertentu seperti ini :
untuk memberi warna teks gunakan kode [ color : kode warna ] oke langsung praktekin ya  <div style="color : red">isikan teks disini</div> jika rumus ini kita pakai di  HTML maka teks akan menjadi berwarna merah tetapi fungsi border/frame masih belum akan nampak nah untuk menambahkan frame / border  gunakan kode seperti ini 
    border :1px solid red  untuk lengkapnya pasang seperti ini  <div style="color : red;border:1px solid red">isikan teks disini</div>jika kode ini di pasang di html maka akan menjadi seperti di bawah ini:

    isikan teks disini

    Nah setelah kita membuat rumus border dengan cara yang sangat sederhana sekarang kita akan membuat border atau frame dengan fersi sedikit lebih lengkap sekali gus cara membuat nya :
    1. Ridge
      2. <div style="border: 4px ridge #000000; background-color:#00CCFF;color:red; padding: 5px; width: 400px;"> Tulis apa saja.. </div>.
    2. Outset
      3. <div style="border: 4px outset #000000; background-color:#00CCFF;color:red; padding: 5px; width: 400px;"> Tulis apa saja.. ... </div>
    3. Groove
      4. <div style="border: 4px groove #000000; background-color:#B8860B;color:red; padding: 5px; width: 400px;"> Tulis apa saja.. ... </div>.
    4. Double
      5. <div style="border: 4px double #000000; background-color:#E9967A;color:red; padding: 5px; width: 400px;"> Tulis apa saja.. . </div>
    5. Dotted
      6. <div style="border: 1px dotted #000000;color:red; background-color:#FF00FF; padding: 5px; width: 400px;"> Tulis apa saja.. .. </div>
    6. Dashed
      7. <div style="border: 1px dashed #000000;color:red; background-color:#008000; padding: 5px; width: 400px;"> Tulis apa saja.. . </div.
    7. Solid
      8. <div style="border: 1px solid #000000;color:red; background-color:#B0C4DE; padding: 5px; width: 400px;"> Tulis apa saja.. </div>
    Na akhirnya selesai juga...untuk pertemuan / postingan berikutnya kita akan membuat border/frame dengan css code nah buat rekan /teman yang mungkin ada pertanyaan tentang cara membuat frame atau border bisa lewat kolom komentar
    Judul Artikel :Cara membuat Border | frame
    photo-avatar
    Terima Kasih Sobat sudah membaca Artikel saya Tentang Cara membuat Border | frame Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih
    Label: ,

    2 komentar

    avatar
    Balas
    Unknown delete 19 Juli 2012 pukul 20.53

    wah keren nih bos,,,
    oya bisa di pake di kotak komentar nih kaya gini..???apa cuma di postingan aja..?share lagi bos...

    avatar
    Balas
    Unknown delete 19 Juli 2012 pukul 20.58

    @Ants Kaka bisa saja tapi harus di atur width/lebar dan ketinggiannya/height sesuaikan dengan lebar widget sobat

    Posting Komentar


    Terima Kasih Sobat Sudah:
    1. Berkomentar Dengan Sopan
    2. Tidak Memasukkan Link Aktif Dalam Form Komentar
    3. Berkomentar Sesuai Artikel/Postingan
    4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
    5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
    6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>

    Konversi