11/26/16

Cara Menambahkan Kotak Script Dalam Postingan Blog

Menggunakan atau menambahkan kotak script dalam tulisan blog akan terlihat menarik dan tentunya membuat postingan kita lebih rapih dan memudahkan pembaca untuk membedakannya dengan tulisan lainnya. Namun sayangnya kotak script yang di tambahkan dalam sebuah postingan, tidak disediakan default oleh blogspot atau blogger. Maka kita sendiri yang harus putar otak untuk membuatnya. he..he..he..he.

Kotak script dalam sebuah postingan di gunakan untuk menaruh informasi penting, salah satunya adalah script CSS, HTML, Javascript dan sebagainya. meskipun sekarang ini kebanyakan para blogger telah berpindah menggunakan Tag Pre, tapi masih ada juga blogger yang masih setia menggunakan kotak script ini. tapi untuk sobat yang baru mengenal blog silahkan gunakan script ini terlebih dahulu lalu kemudian belajar mengenani Tag Pre, supaya kedepannya sobat bisa memahami keduanya.

Untuk membuat sebuah kotak script dan menggunakannya dalam posting sangatlah mudah, anda hanya perlu memperhatikan langkah demi langkahnya supaya Anda cepat memahaminya. berikut di bawah ini tutorialnya :
  • Pertama Anda login terlebih dahulu ke blogger dan pilihlah 'Entri Baru' seperti saat pertama biasa anda membuat posting.
  • buatlah terlebih dahulu 10 kata di blog Anda.
  • Selanjutnya Anda coba copy pastekan kode di bawah ini, dan simpan di bawah postingan yang Anda tadi buat.
<div style="border: 3px #1780dd Dotted; padding: 10px;background-color:#ffffff;
text-align: left;">
.anditoblog (contoh)</div>

  • Untuk menyimpan kode tersebut anda jangan menyimpannya di mode 'Compose' tapi Anda harus menyimpannya di bagian 'HTML'. ( Untuk lebih jelasnya Anda bisa lihat screenshot gambar di bawah ini)
    Cara Menambahkan Kotak Script Dalam Postingan Blog.
  • Setelah menyimpannya, lalu Anda klik lagi ke mode Compose tepat biasa kita menulis, maka Anda akan melihat sebuah kotak yang di dalamnya ada sebuah tulisan.
  • Untuk selanjuttnya  Anda sisa mengganti tulisan '.anditoblog (contoh).' dengan tulisan yang ingin Anda taruh disana, bisa berupa script atau tulisan lainnya. 
Untuk hanya memindahkan dan mengganti tulisannya sangatlah mudah, tapi kita tidak boleh hanya memahaminya saja, tetapi harus paham dengan kode yang Anda masukan tadi. Kenapa harus memahaminya? Karena kotak script ini ada berbagai style atau gaya, mungkin script yang tadi Anda copy-pastekan di atas tampilannya tidak sesuai dengan selera.

Untuk menyesuaikan kotak scripnya dengan selera anda maka anda harus paham dengan kodenya. Maka dari itu silahkan Anda simak penjelasanya sebagai berikut.

<div style="border: 3px #1780dd Dotted; padding: 10px;background-color:#ffffff;
text-align: left;">
.anditoblog (contoh)</div>

border : deklarasi untuk membuat kotaknya. jika Anda tidak suka semua memakai kotak maka Anda bisa merubahnya kode ter sebut menjadi border-right (maka akan muncul garis hanya di sebelah kanan). border-left  (maka akan muncul garis hanya di bagian kiri).  border-top  (maka akan muncul garis hanya di bagian atas), border-bottom (maka hanya akan muncul garis di bagian bawah saja). Jika sobat ingin membuat kotak scrip yang hanya tampil garis di bagian kiri dan bawah saja maka penulisan kodenya seperti ini lihat contoh di bawah :

<div style="border-left : 5px  #2c4584 solid; border-bottom: 3px  #2c4584 solid; background-color: #f5f5f5; text-align: left;">.anditoblog (contoh border left dan border bottom) </div>

3px : Untuk membuat ketebalan garis pada kotak script. Anda bisa merubahnya tergantung selera Anda masing-masing.
#1780dd : Untuk merubah warna pada garis kotak script.
Dotted : bentuk pada garis kotak script. Jika garisnya tidak sesuai bentuknya dengan keinginan Anda, maka silahkan ganti bentuk kotak tersebut dengan gaya double, groove, solid, insert, outset, dan ridge. silahkan anda lihat contoh di bawah penggunaan gaya atau bentuk garisnya, Anda juga bisa memadukan garis berbeda pada satu kotak script.


.anditoblog (text-align : center)  (border : 3px dotted)


.anditoblog (background-color : #ffffff) (text-align : right)  (border : 3px double)


.anditoblog (background-color : #ffffff) (text-align : left)  (border : 3px groove)


.anditoblog (background-color : #ffffff) (text-align : justify)  (border : 3px solid)


.anditoblog (background-color : #f5f5f5) (text-align : center)  (border : 5px insert)


.anditoblog (background-color : #ffffff) (text-align : left)  (border : 3px outset) (padding: 20px;)

.anditoblog (background-color : #ffffff) (text-align : left)  (border : 3px ridge) (padding: 10px;)

padding:10px = panjang kotak ke bawah, meskipun anda menulis kode panjang sekali di dalamnya kotak tersebut tetap akan otomatis menyesuaikan, untuk panjangnya sendiri telah otomatis menyesuaikan dengan lebar postingan kita.
background-color: #ffffff; = warna latar dalam kotak.
text-align:left; = posisi tulisan didalam kotak kotak script kita berada di sebelah kiri. kalian bisa merubahnya dengan center, justify, dan right.

Nah demikian penjelasan membuat kode HTML untuk membentuk sebuah kotak script dalam postingan blog. semoga penjelasaan di atas mudah di pahami. Jika anda masih mengalami kebingungan dalam hal membuat kotak scrip ini silahkan anda tinggalkan komentar di bawah. 

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 comments

Makasih gan. Bermanfaat sekali, penjelasannya detail. Salam kenal aja.

Balas

Iya gan sama-sama. Makasih juga udah berkunjung dan salam kenal juga.

Balas

Silahkan berkomentar sesuai dengan topik.