Bagaimana Cara Membuat Box Berisi Text di Sela-Sela Artikel Kita ? Dengan HTML dan CSS
Selamat datang para pembaca pada artikel kami Bagaimana Cara Membuat Box Berisi Text di Sela-Sela Artikel Kita ? Dengan HTML dan CSS yang kami bagikan melalui media informasi online yang kami beri nama Mas Lelur, Disini kami mencoba untuk membagikan segala informasi yang kami dapatkan untuk dapat menambah wawasan baru bagi para pembaca kami. berikut ini selengkapnya tentang informasi yang kami maksudkan tentang
Bagaimana Cara Membuat Box Berisi Text di Sela-Sela Artikel Kita ? Dengan HTML dan CSS
Sebelum memulai artikel, pastinya kita terbiasa untuk mendalami Informasi dan seputar pengetahuan terlebih dahulu, yaitu kita harus mengetahui apa itu penjelasan dari kode HTML dan CSS dalam dunia Pemograman IT ?, Simak penjelasannya dibawah ini.
Ini adalah Penjelasan HTML ?
HTML bisa disebut Hyper Text Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi didalam sebuah penjelajah web Internet dan pemformatan Hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan wujud yang terintergerasi.
Dan Apa itu CSS ?
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang betujuan untuk menghias dan mengatur gaya tampilan atau layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang di rekomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
Pada artikel ini saya akan memberikan Sedikit informasi yang unik untuk para Blogger Indonesia, saya lihat di group-group Blogger Indonesia, terdapat para awam Blogger yang menanyakan, bagaimana cara membuat Box seperti gambar dibawah ini pada sela-sela artikel, dengan methode menambahkan HTML kode , ini contoh gambarnya :
Yaa gambar disamping adalah contoh yang di inginkan oleh para blogger awam indonesia, tetapi bagaimana ya caranya?
Cara-caranya sangat simple anda harus mengikuti penjelasan dibawah ini agar hasilnya sukses dan memuaskan untuk Blog anda.
1. Siapkan Bloggernya.
2. Mulai untuk menulis Artikel New Post.
3. Lalu cobalah anda mengetik sembarang, di bagian Compose.
4. Dan silahkan anda lihat dalam menu HTML disamping Compose nya.
5. Cari kode yang menjulur ke text anda, dan sinkron kan kode <div box="" class="box"> nya diatas text yang ingin anda edit menjadi ada boxnya.
6. Lalu tutup dengan kode </div> disamping kode text yang ingin anda edit menjadi box tadi, agar tidak terjadi pesan error.
7. Lalu langkah terakhir adalah, silahkan test Click Save dan Preview dan anda lihat Hasilnya.
Yaa diatas adalah kode untuk mensinkronkan HTML ke CSS agar menjadi Box dan Bagaimana jika CSS ke HTML ? Okee, sekarang ini saya akan memberikan kode dari style css nya agar box tersebut bisa tampil dengan sempurna dan sukses.
Kode CSS adalah berikut :
Gambar diatas adalah gambar yang sukses untuk membuat boxnya, dengan cara-cara simple yang sudah saya jelaskan.
Penjelasan selanjutnya adalah, jika anda ingin mengganti warna background dari box tersebut, silahkan anda ganti pada style css nya, yaitu dibagian background-color:#555; pada bagian angka atau kode #555 adalah warna dari background tersebut, jika anda ingin mengganti warna background nya dengan kesukaan anda silahkan anda ganti sendiri, anda bingung dengan kode-kode berapa saja untuk mengubah warna ? Silahkan lihat disini :
Kode Warna CSS Lengkap. Visit website disamping.
Dan juga untuk mengganti warna tulisan text yang sudah dimasukkan di boxnya, di style css ada code yaitu color:#fff; penjelasan kode disamping adalah color dari warna text tersebut adalah warna putih atau white. Jika anda ingin mengganti sesuai kesukaan anda dan sesuai kesesuaian background silahkan pilih warna text yang cocok untuk anda disini juga : Kode Warna CSS Lengkap.
Vidio Cara tutorial :
Simak vidio dengan seksama, agar anda selalu mengerti tentang Topik yang sudah di jelaskan.
Mari anda langsung praktekkan sendiri dengan menyimak vidio diatas, langsung anda praktikkan dengan sedemikian rupa vidio yang sudah di buat. Agar kalian langsung bisa dan mengetahui, dimana posisi kesalahan dan dimana posisi kebenarannya.
Akhir Artikel :
Sekiranya artikel diatas sangat bermanfaat untuk anda, mohon tuangkan kritik dan saran anda untuk blog dan artikel ini, agar penulis selalu tau kepuasan dari Visitor atau Viewer yang sudah berkunjung di situs ini, Komentar dibawah sudah disediakan melalui Sign In media sosial yang anda miliki atau sudah melakukan Sign Up, Semoga bermanfaat untuk anda semua dan Terima Kasih.
Bagaimana Cara Membuat Box Berisi Text di Sela-Sela Artikel Kita ? Dengan HTML dan CSS
Cara Yang Sangat Mudah untuk Membuat Box Berisi Text di Sela-Sela Artikel Pada Postingan.Sebelum memulai artikel, pastinya kita terbiasa untuk mendalami Informasi dan seputar pengetahuan terlebih dahulu, yaitu kita harus mengetahui apa itu penjelasan dari kode HTML dan CSS dalam dunia Pemograman IT ?, Simak penjelasannya dibawah ini.
Ini adalah Penjelasan HTML ?
HTML bisa disebut Hyper Text Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi didalam sebuah penjelajah web Internet dan pemformatan Hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan wujud yang terintergerasi.
Dan Apa itu CSS ?
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang betujuan untuk menghias dan mengatur gaya tampilan atau layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang di rekomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
Pada artikel ini saya akan memberikan Sedikit informasi yang unik untuk para Blogger Indonesia, saya lihat di group-group Blogger Indonesia, terdapat para awam Blogger yang menanyakan, bagaimana cara membuat Box seperti gambar dibawah ini pada sela-sela artikel, dengan methode menambahkan HTML kode , ini contoh gambarnya :
 |
| Box-CSS Untuk Menempatkan Ketikan dengan cantik. Sumber Lihat : ArticleInfoWeb. |
Yaa gambar disamping adalah contoh yang di inginkan oleh para blogger awam indonesia, tetapi bagaimana ya caranya?
Cara-caranya sangat simple anda harus mengikuti penjelasan dibawah ini agar hasilnya sukses dan memuaskan untuk Blog anda.
1. Siapkan Bloggernya.
2. Mulai untuk menulis Artikel New Post.
3. Lalu cobalah anda mengetik sembarang, di bagian Compose.
4. Dan silahkan anda lihat dalam menu HTML disamping Compose nya.
5. Cari kode yang menjulur ke text anda, dan sinkron kan kode <div box="" class="box"> nya diatas text yang ingin anda edit menjadi ada boxnya.
6. Lalu tutup dengan kode </div> disamping kode text yang ingin anda edit menjadi box tadi, agar tidak terjadi pesan error.
7. Lalu langkah terakhir adalah, silahkan test Click Save dan Preview dan anda lihat Hasilnya.
Yaa diatas adalah kode untuk mensinkronkan HTML ke CSS agar menjadi Box dan Bagaimana jika CSS ke HTML ? Okee, sekarang ini saya akan memberikan kode dari style css nya agar box tersebut bisa tampil dengan sempurna dan sukses.
Kode CSS adalah berikut :
<style>
.box{
background-color:#555;
border-left:10px solid #bbb;
border-radius:10px;
width:90%;
padding:15px 20px;
color:#fff;
}
</style>
Penjelasan selanjutnya adalah, jika anda ingin mengganti warna background dari box tersebut, silahkan anda ganti pada style css nya, yaitu dibagian background-color:#555; pada bagian angka atau kode #555 adalah warna dari background tersebut, jika anda ingin mengganti warna background nya dengan kesukaan anda silahkan anda ganti sendiri, anda bingung dengan kode-kode berapa saja untuk mengubah warna ? Silahkan lihat disini :
Kode Warna CSS Lengkap. Visit website disamping.
 |
| Click Untuk Memperbesar Gambar. |
Dan juga untuk mengganti warna tulisan text yang sudah dimasukkan di boxnya, di style css ada code yaitu color:#fff; penjelasan kode disamping adalah color dari warna text tersebut adalah warna putih atau white. Jika anda ingin mengganti sesuai kesukaan anda dan sesuai kesesuaian background silahkan pilih warna text yang cocok untuk anda disini juga : Kode Warna CSS Lengkap.
Jika anda masih belum paham cara-cara membuat box tersebut dengan kode HTML dan CSS, mari lihat vidio dibawah ini dengan seksama, Jika ada seputar pertanyaan silahkan berkomentar di bawah.
Vidio Cara tutorial :
Simak vidio dengan seksama, agar anda selalu mengerti tentang Topik yang sudah di jelaskan.
Mari anda langsung praktekkan sendiri dengan menyimak vidio diatas, langsung anda praktikkan dengan sedemikian rupa vidio yang sudah di buat. Agar kalian langsung bisa dan mengetahui, dimana posisi kesalahan dan dimana posisi kebenarannya.
Akhir Artikel :
Sekiranya artikel diatas sangat bermanfaat untuk anda, mohon tuangkan kritik dan saran anda untuk blog dan artikel ini, agar penulis selalu tau kepuasan dari Visitor atau Viewer yang sudah berkunjung di situs ini, Komentar dibawah sudah disediakan melalui Sign In media sosial yang anda miliki atau sudah melakukan Sign Up, Semoga bermanfaat untuk anda semua dan Terima Kasih.