Cara Memasang Kotak Teks pada Postingan Blogger / WordPress





Pada tutorial kali ini kita akan mempelajari tentang bagaimana cara memasang kotak teks pada postingan Blogger/WordPress. Kotak teks ini berguna jika kita ingin meng-highlight salah satu bagian dari tulisan kita, terutama tulisan yang kita anggap penting untuk dibaca pengunjung.

 

Memasang Kotak Teks pada Postingan WordPress dan Blogger:

 

Cara 1, jika kita hanya perlu sesekali saja menggunakan kotak teks, kode bisa langsung dimasukkan ke dalam posting:

  1. Login ke akun WP, pilih Posts>Add New.
    Login ke akun Blogger, pilih Create new post.
  2. Klik tab HTML, dan taruh kode di bawah ini di tempat kita ingin membuat kotak teks:
    <div style="border: 2px solid #a1a1a1; padding: 10px 10px 10px 10px; background: #dddddd; width: 550px; border-radius: 25px; margin-left: 10px; text-align: center;">Cara Memasang Kotak Teks pada Postingan WordPress dan Blogger</div>

Contoh Hasil:

Cara Memasang Kotak Teks pada Postingan WordPress dan Blogger

 

Cara 2, jika kita sering memakai kotak teks ini, sebaiknya kode dimasukkan ke file css pada theme, sehingga pada saat menulis posting tidak perlu lagi memasukkan keseluruhan kode:

  • Pada WordPress:
    1. Login ke akun WP, pilih menu Appearance>Editor.
    2. Pilih file style.css di sidebar sebelah kanan.
    3. Tambahkan kode berikut di dalamnya:
      #textbox {
      border:2px solid #a1a1a1;
      padding:10px 10px 10px 10px;
      background:#dddddd;
      width:550px;
      border-radius:25px;
      margin-left: 10px;
      }

      Klik Update File.
    4. Pada saat posting, tambahkan kode berikut (jangan lupa klik tab HTML) untuk memunculkan kotak teks:
      <div id="texbox">
      <div align="center">      /* jika ingin tulisan di tengah */
      /*  Tulisan yang ingin dimasukkan dalam kotak teks   */
      </div>
      </div> 
  • Pada Blogger:
    1. Login ke akun Blogger, pilih Template>Edit HTML>Proceed.
    2. Tambahkan kode berikut:.textbox {
      border:2px solid #a1a1a1;
      padding:10px 10px 10px 10px;
      background:#dddddd;
      width:550px;
      border-radius:25px;
      margin-left: 10px;
      }

      di atas kode:
       ]]></b:skin> --> biasanya terletak di atas </head>
      Klik Save template.
    3. Pada saat posting, tambahkan kode berikut (jangan lupa klik tab HTML) untuk memunculkan kotak teks:
      <div class="texbox">
      <div align="center">      /* jika ingin tulisan di tengah */
      /*  Tulisan yang ingin dimasukkan dalam kotak teks   */
      </div>
      </div> 

Perlu diingat bahwa jika menggunakan css, kotak teks ini tidak akan muncul di tempat kita menulis posting, melainkan baru terlihat setelah post di publish/preview. Hal ini berlaku baik pada WordPress maupun Blogger.

 

Keterangan: border: tebal dan warna garis, padding: jarak tulisan dari garis, background: warna latar belakang kotak, width: lebar kotak, border-radius: memberi sudut lengkung pada kotak (hapus baris ini jika ingin sudut siku), margin-left: jarak antara kotak dengan body sebelah kiri, text-align: posisi teks pada kotak (left/center/right).

Contoh Tanpa Border Radius dan Text Align

 

Artikel Menarik Lainnya:

Tags: