Membuat Kotak Script Code Dalam Postingan Blog

Seminggu terakhir saya sedang gencar gencarnya memperbaiki dan membenahi website ini mulai dari update artikel, menata iklan agar rapih, sampai menata tulisan agar terlihat enak untuk dibaca. karena website ini membahas topik utama tentang informasi teknologi sehingga memiliki hubungan erat dengan sebuat script atau kode maka dari itu saya berpikir bagaimana caranya menaruh script agar lebih mudah diketahui dan dibedakan oleh para pengunjung website ini.

Dan kemudian hari kemarin tepatnya tanggal 10/11/2017 saya mendapatkan jawaban dari permasalahan saya di atas yaitu dari www.blogooblok.com, untuk menaruh script di website khususnya di blogspot agar dapat di lihat dan ditemukan oleh pengunjung yaitu salah satunya dengan menambahkan kotak script. sebenarnya kotak ini bisa juga digunakan selain dari script misalnya untuk informasi penting itu juga bisa menggunakan kotak ini.

Kotak ini sebenarnya tidak disediakan secara default oleh blogspot namun kita bisa memakainya dengan cara menambahkan sedikit script kedalam HTMLnya, scriptnya gampang sekali kok saya akan menjelaskanya secara lengkap dan kalian tinggal ikuti saja langkah demi langkahnya dibawah ini :
  • Pertama LOGIN lah terlebih dahulu kedalam blogger kemudian pilih ENTRI BARU.
  • Selanjutnya buatlah artikel seperti biasanya.
  • Untuk membuat kotak script kalian bisa pilih Kotak HTML yang berada di ujung kiri atas seperti gambar dibawah ini.
  • Dan masukan script berikut ini pada HTML.

<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
(script kotak di blog ini)
</div>


  • Untuk melihat hasilnya kalian bisa pilih kembali Compose seperti gambar dibawah ini.
  • Terakhir jangan lupa dalam script tersebut ada tulisan (script kotak di blog ini) nah pada bagian ini gantilah dengan script atau informasi penting yang ingin kalian sampaikan kepada pengunjung.
  • Selesai.
Apa kata saya bilang mudah sekali bukan sebenarnya selain script di atas kalian juga bisa memodifikasi sedikit scriptnya agar lebih menarik dan sesuai dengan selera kalian. Jika kalian tertarik dengan cara memodifikasinya silahkan baca kembali sampai selesai ada banyak pilihan jenis kotak yang mungkin sesuai dengan selera kalian, tinggal dipilih dipilih.😀😀😀
  1. Pertama
    <div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
    text-align: left;">(ganti tulisan ini).</div>
  2. <div style="border: 3px #1780dd Dashed; padding: 10px;background-color:#ffffff;
    text-align: left;">(ganti tulisan ini).</div>
  3. <div style="border: 3px #1780dd Dotted; padding: 10px;background-color:#ffffff;
    text-align: left;">(ganti tulisan ini).</div>
  4. <div style="border: 3px #1780dd Groove; padding: 10px;background-color:#ffffff;
    text-align: left;">(ganti tulisan ini).</div>
  5. <div style="border: 3px #1780dd Inset; padding: 10px;background-color:#ffffff;
    text-align: left;">
    .blogoooblok (ganti tulisan ini).</div>
  6. <div style="border: 3px #1780dd Outset; padding: 10px;background-color:#ffffff;
    text-align: left;">(ganti tulisan ini).</div>
  7. <div style="border: 3px #1780dd Ridge; padding: 10px;background-color:#ffffff;
    text-align: left;">(ganti tulisan ini).</div>
  8. <div style="border: 3px #1780dd Solid; padding: 10px;background-color:#ffffff;
    text-align: left;">(ganti tulisan ini).</div>
Itu dia sedikit pilihan kotak script silahkan kalian mengexplornya lebih jauh lagi.
Sedikit tips tambahan untuk mengexplornya :

Merah untuk ketebal garis kotak
Hijau untuk warna garis kotak
Biru untuk jenis bentuk kotak
Orange untuk panjang kotak
Pink untuk warna background kotak
Ungu untuk posisi penempatan teks

Sekian dulu pembahasan kali ini semoga bisa bermanfaat dan selamat untuk mencoba.

Tks.

2 comments:

  1. Terima kasih tutorialnya, meng-inspirasi untuk mempraktekkannya suhu.

    ReplyDelete
    Replies
    1. Sama sama gan, alhamdulillah kalau bisa sampai menginspirasi☺

      Delete

Powered by Blogger.