Cara membuat background dan border / bingkai pada text postingan blog mywapblog, blogspot

Pada postingan kali ini saya akan share tutorial memberi background dan border di postingan via hp yaitu menggunakan code html, kita tau bahwa penguasaan akan code - code yang diperlukan untuk membuat suatu postingan yang tertata dan menarik sangatlah diperlukan, termasuk diantaranya adalah code HTML untuk membuat background dan border / bingkai pada postingan. Penguasaan akan code - code ini sangat perlukan, terutama bagi anda seorang blogger ponsel seperti saya ini yang hanya berbekalkan sebuah hp dalam membuat setiap postingan.
Langsung saja pada inti dari postingan ini yaitu Cara membuat background dan border pada postingan blog. Untuk membuat background dengan border didalam postingan blog tidaklah terlalu sulit asalakan kita tau codenya. Berikut ini adalah code yang digunakan untuk membuat background dan border pada postingan blog .


<div style="background:green;border:1px solid #000; padding:6px; margin-left:20px"> Ini adalah text yang akan anda rubah backgroundnya, text yang ada disini akan memiliki background dan berada didalam border / bingkai yang anda tentukan </div>


Code Diatas, akan menghasilkan text dengan warna background hijau dan border hitam seperti dibawah ini:

Ini adalah text yang akan anda rubah backgroundnya, text yang ada disini akan memiliki background dan berada didalam border / bingkai yang anda tentukan


Silahkan dirubah sesuai yang dinginkan, Berikut ini penjelasan dari code diatas:

  • Background
    ini berfungsi mengatur warna background text yang dikehendaki, dalam contoh diatas saya menggunakan warna hijau dengan code green. Silahkan ubah sesuai warna yang diinginkan.
    back = hitam
    white = putih
    red = merah
    blue = biru
    yellow = kuning
    grey = abu - abu
    dan masih banyak lagi, anda juga bisa menggunakan code - code yang lebih terperinci, silahkan Klik Disini untuk melihat code - code warna html.
  • Border
    ini berfungsi sebagai border atau bingkai, disana terdapat 1px dan solid #000. berikut adalah penjelasan masing - masing:

    1px = mengatur ketebalan dari border / bingkai . Bisa anda sesuaikan dengan mengganti nilai px nya . Misal 3px , 4px dan seterusnya.

    Solid= ini adalah style bordernya, ada banyak style atau jenis border pada code html, dan untuk jenis - jenis bordernya mungkin akan saya share dilain kesempatan.^_^

    #000 = mengatur warna dari border, silahkan diubah sesuai yang diinginkan dan untuk codenya silahkan klik pada link yang telah saya berikan diatas ^_^
  • padding
    ini untuk mengatur jarak antara border dengan text yang ada didalam border. Semakin besar nilai px semakin jauh pula jarak text dengan border.
  • margin
    ini adalah kebalikan dari padding yaitu mengatur jarak antara border dengan text atau elemen yang ada di bagian luar border. pada contoh diatas, untuk memperjelas fungsinya saya menggunakan margin-left, itu artinya hanya jarak kebagian luar sebelah kiri saja yang diatur. Dan bisa anda lihat perbedaannya. Untuk mengatur secara keceluruhan cukup menggunakan margin saja. Misal, margin:3px . Itu artinya jarak dari border ke elemen luar untuk setiap sisi adalah 3px. Untuk pembahasan lebih lanjut tentang penggunaan margin ini, mungkin akan saya share dilain kesempatan ^_^


Sekian dulu postingan tentang cara memberi background dan bingkai pada postingan blog , untuk tutorial tentang belajar HTML pemula ini, semoga bermanfaat.




{ 0 komentar... read them below or add one }

Posting Komentar