Cara Membuat Kotak Script di Posting Blog

Cara membuat kotak script di posting blog. Kotak script, biasanya digunakan untuk memasukan kode2 script ke dalam posting. Agar terlihat rapi dan tidak memakan banyak tempat. Ada yang berbentuk kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll, dan lain-lainnya. Kotak script juga bisa diberi warna dibagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya. Cara membuatnya, Ikuti langkah-langkah dibawah ini.
  1. Login ke blogger. Dan pilih entri baru.
  2. Selanjutnya buatlah tulisan seperti dibawah ini.
  3. cara membuat kotak script di posting blog
  4. Selanjutnya Klik HTML dan masukan kode berikut, dibawah tulisan cara membuat kotak script. 
  5. <div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
    text-align: left;">
    .Klik Disini.</div>
  6. Untuk lebih jelasnya, lihat gambar dibawah ini.
  7. cara membuat kotak script di posting blog
  8. Sekarang Klik Compose, maka akan ada kotak script. Contoh gambar:
  9. cara membuat kotak script di posting blog
  10. Selanjutnya Klik di dalam kotak tersebut, dan hapus tulisan Klik Disini.
  11. Terakhir, Masukan kode script yang ingin kamu masukan, didalam kotak itu. Selesai.

Keterangan Kode:

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Klik Disini.</div>
  1. border: 3px = ketebalan kotak script. dan #1780dd = warna kotak script.
  2. Double; = Bentuk kotak, bisa diganti dengan, 
  3. dashed
    dotted
    Double
    Groove
    inset
    outset
    ridge
  4. Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
  5. background-color:ffffff; = warna dalam kotak. 
  6. Dan text-align:left; = posisi tulisan didalam kotak di kiri.

Kotak Script Dengan Scroll.

<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 50px; width: 300px;
text-align: left;">
.kode script disini.</div>
  1. Sama seperti cara diatas, masukan kode script ke HTML.
  2. overflow:auto; = fungsi scrollnya. height(tinggi kotak) dan width(lebar kotak)
  3. Kotak script bisa juga dipindahkan ke kanan, dengan menambahkan kode float: right; ditengah kode diatas.
  4. <div style="border: 3px #1780dd solid; float: right; dan lain-lain.
    Kotak Posisi Kanan
  5. Untuk yang posisi tengah, saya belum tau, nanti jika sudah tau, akan saya tambahkan kembali diposting ini. 
Dengan menambahkan kotak script di posting blog, maka halaman blog akan terlihat lebih rapi. Dan tidak memakan banyak tempat. Tanpa harus mengurangi isi dari posting. Semoga Bermanfaat.

16 comments:

  1. sukron gan atas ilmunya....
    semoga bermanfaat.....
    amiiin

    ReplyDelete
  2. thanks gan infonya , lanjutkan gan

    ReplyDelete
  3. thanks ilmunya sobt ,, sudah ane terapkan di blog ane

    gUtLak buat Ente

    ReplyDelete
  4. Makasih sob. Tutorialnya mantap. Izin pakai sob hehe

    ReplyDelete
  5. ini simple tapi luar biasa efeknya . . .

    sangat brguna banget buat saya yg templatenya hancur klo pke Quote

    ReplyDelete
  6. thanks ilmunya gan, ijin copas buat referensi pribadi ane

    ReplyDelete
  7. akhirnya ketemu juga, terima kasih gan udah berbagi pengetahuan tentang membuat kotak script, sangat bermanfaat untuk saya ^^

    ReplyDelete

Semoga Artikel diatas dapat membantu anda menemukan, apa yang sedang anda cari. Silahkan tinggalkan komentar.