PORTAL KAJIAN ISLAM KONTEMPORER: Memadukan Wahyu dan Nalar Sehat Menuju Keseimbangan Hidup. "Banyak orang terjerumus karena menilai kebenaran dari SIAPA yang mengatakan, bukan dari APA yang dikatakan"

Desember 17, 2019

Cara Mudah Membuat Kotak di Halaman Postingan







Membuat tampilan postingan blog agar tampak lebih menarik dan mengundang pengunjung untuk membacanya banyak cara bisa dilakukan. Di antaranya dengan menyisipkan
gambar, memberi tabel dalam postingan, memuat video, memberi quote (keterangan kata), dan lain sebagainya. Salah satu cara yang dibahas dalam tulisan ini adalah membuat border atau kotak dalam postingan blog. Border berguna untuk memberikan tanda dalam postingan agar terlihat lebih menyolok dan menarik minat pengunjung. Dengan pemberian border juga akan membuat tulisan akan lebih fokus untuk memahami seluruh isi postingan. Akan tetapi, karena fitur untuk membuat border belum disediakan oleh blogger, maka harus dibuat sendiri dengan memanfaatkan kode HTML untuk ditambahkan.

Bagaimana cara membuat border dalam postingan blog, ikuti langkah-langkah berikut.

  • Masuk ke akun blogger.
  • Klik Entri baru atau Edit posting lama.
  • Klik mode HTML (jangan menggunakan mode Compose) untuk memasukkan kode border dan teks postingan yang diinginkan.


    Beberapa model border dapat dipilih meliputi jenis garis pinggir dan pewarnaannya.

  • Copy paste kode berikut di halaman postingan

    <div style="border: 1px #000000 solid; padding: 10px; background-color: #CEF6CE; text-align: left;"> Isi tulisan yang tampil dalam border </div>

  • Copy paste kode berikut untuk model kotak yang bisa digeser.

    <div style="border: 2px #000000 solid; padding: 10px; background-color: #CEF6CE; overflow: auto; height: 50px; width: 300px; text-align: left;"> Isi tulisan yang tampil dalam border </div>





    Keterangan :

  • Kode HTML border: 1px #000000, pilihan warna dari border. Kode "dotted" bisa diganti "solid", jika menginginkan batas garis tidak terputus-putus.
  • Kode HML padding: 10px, pilihan jarak bagian dalam dari border dengan batas halaman.
  • Kode HTML background-color: #CEF6CE, pilihan warna background halaman kotak.
  • Kode HTML text-align: left, untuk mengatur tulisan rata kanan (right), rata kanan kiri (justify), atau rata tengah (center).
  • Kode HTML height: 50px, width: 300px: mengatur tinggi dan lebar kotak.

Simak Juga:




Posting Komentar