Cara Membuat Kotak Script Dalam Postingan Blog

Cara Menyisipkan Kotak Script Dalam Postingan Blog

Menyisipkan kotak dalam tulisan blog terlihat menarik dan keren. Banyak blogger menggunakan cara ini dalam postingan untuk menempatkan informasi penting, salah satunya adalah script HTML, Java, PHP, dan sebagainya. 


Akan tetapi kotak yang akan kita sisipkan dalam postingan ini tidak disediakan secara default oleh blogspot, olehnya itu kita harus  membuatnya sendiri. Caranya cukup mudah, silahkan ikuti langkah-langkah berikut ini. 
  1. Login ke blogger dan pilihlah 'Entri Baru'.
  2. Buatlah sebuah tulisan apapun itu yang ingin kalian tulis, contoh seperti gambar. Lihat tanda yang berwana merah, posisi tulisan adalah 'Compose'.
  3. Setelah itu copy paste script ini, dan kembali ke postingan Anda di blogger.
    <div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;">Selamat Datang di D-Programmer Blog </ div>
  4. Selanjutnya pilih 'HTML' (lebih jelasnya lihat pada gambar dibawah).
  5. Paste script yang tadi di copy di bawah postingan (letakkan pada posisi yang anda inginkan).
  6. Kembali lagi ke bagian'Compose' dan lihat hasilnya. Boomm... kotaknya sudah muncul .
  7. Selanjutnya Anda sisa mengganti tulisan 'Selamat Datang Di D-Programmer Blog ' dengan tulisan yang ingin Anda taruh disana, bisa berupa script atau tulisan lain. 
    Cukup mudah kan???
Mudah dong, namun mungkin Anda tidak setuju dengan tampilan kotak seperti contoh diatas. Anda bisa merubahnya sesuai keinginan anda. Berikut ini penjelasan scriptnya.

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">Selamat Datang di D-Programmer Blog</div>
  • border: 3px = ukuran ketebalan  dari kotak script dan anda bisa mengubah ukuran ketebalan tersebut. 
  •  #1780dd = warna kotak script. Anda bisa mengganti warna dari kotak script tersebut sesuai warna kesukaan anda.
  •  Double : bentuk kotak dengan dua lapis kotak. (kode ini bisa diganti dengan kode berikut atau juga bisa dihilangkan).
  •  padding:10px = ukuran panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
  •  background-color:ffffff; = warna background dalam kotak. Bisa anda mengganti “ffffff” dengan warna dalam bahasa inggris contohnya “red”, “blue” dan lainnya.
  •  Dan text-align:left; = posisi tulisan didalam kotak di kiri. Anda juga dapat mengganti “left” dengan “center, right, atau justify”.

Dari penjelasan diatas adalah kode HTML untuk membentuk kotak script dalam postingan. Silahkan anda modifikasi sesuai dengan keinginan Anda. Tidak sulit kan? 
Berikut contoh lain dari bentuk kotak script anda cukup mengganti kode "double"dengan kode-kode berikut:
  • Dashed
Selamat datang di D-Programmer Blog

  • Dotted
Selamat datang di D-Programmer Blog

  • Groove
Selamat datang di D-Programmer Blog

  • Inset
Selamat datang di D-Programmer Blog

  • Outset
Selamat datang di D-Programmer Blog
  • Ridge
Selamat datang di D-Programmer Blog
  • Solid
Selamat datang di D-Programmer Blog



Mungkin itu saja postingan mengenai “Cara Bikin Kotak Script Didalam Postingan Blog". Bagi kalian yang memiliki pertanyaan, jangan malu-malu, tinggalkan komentar Anda. Semoga memberi manfaat. :)

Postingan terkait:

Belum ada tanggapan untuk "Cara Membuat Kotak Script Dalam Postingan Blog"

Post a Comment