Menerima Kontribusi Artikel√ (Backlink Anchor Text ) kontak : profil

Cara MUDAH Membuat Text Box Di Postingan Blogger Dan Wordpress

Membuat postingan blog berupa tulisan bahasa sehari hari tentu saja akan sangat mudah untuk dipahami oleh para pengunjung, namun yang pasti tidak semua artikel selalu berisi huruf atau kata-kata, beberapa penulis ada yg menyematkan kode pemrograman demi kepentingan topik yg sedang diangkat. 

Misalnya tema terkait bahasa pemrograman html, css dan sebagainya. Biasanya tema tersebut tidak jauh dari bahasan seputar tutorial, entah itu membuat aplikasi, blog dan lain-lain. 

Agar tampilan artikel jadi lebih rapi dan mudah untuk dipahami, sudah seharusnya bahasa manusia dan program dibedakan dengan cara-cara tertentu, misalnya membedakan warna tulisan keduannya, atau menyisipkan script tersebut kedalam text box.

Meskipun sudah banyak sobat di luar sana yg membagikan postingan seputar kotak script, namun setiap orang punya kreasi dan selera masing-masing, ditambah, apabila salah pilih ini akan mengakibatkan tampilan postingan blog jadi kurang menarik dimata pengunjung. 

Dulu jauh sebelum mengenal kotak script, postingan tutorial terkait menyisipkan html dan css bagian blog selalu di post begitu saja, dan kalau dilihat keseluruhan dengan penjelasan kesannya seperti tidak beraturan, ya intinya gak rapi, mana bahasa ,mana kode script, pokoknya gak enak di pandang, apalagi dibaca, kayak hubungan kamu sama si dia " rumit" istilahnya.

Sobat juga pasti bakal kurang nyaman apabila melihat artikel yang isinya tidak teratur, iya kan. Kalau di antara kamu yang berkunjung ke sini dengan alasan ingin mencari script box untuk keperluan membuat postingan di blogspot ataupun Wordpress, nah beberapa kotak script dibawah ini bisa kamu gunakan untuk hal tersebut. 

Untuk kelebihannya sendiri, jelas saja ini gratis, sobat tidak perlu mengeluarkan biaya sepeser pun, tinggal pilih saja sesuai kebutuhan. Tapi sebelum itu, yuk cari tahu bagaimana penerapannya; disini saya akan kasi contoh khusus bagi pengguna platform blogger, sedang wordpress tinggal menyesuaikan.

Cara Menggunakan box script di blogger blogspot dan Wordpress

1. Pertama-tama silahkan sobat masuk ke blog yang ingin dipasang kotak script, setelah itu

2. Masuk ke postingan kemudian beralih ke tampilan html

tutorial cara menambahkan kotak html diblog

3. Kamu akan diperlihatkan kumpulan kode html disana, selanjutnya cari dibagian mana kamu akan menerapkan kotak tersebut didalam postingan

4. Apabila sudah tahu dimana posisi ingin menyisipkan script box tersebut, tinggal klik saja kemudian paste.

5. edit dan tambahkan script yg ingin kamu tampilkan didalam kotak tersebut. selesai.

Sekarang kita sudah tahu bagaimana cara memasang kotak script tersebut di blog, dan selanjutnya kamu hanya perlu memilih variasi kotak script dibawah yg cocok untuk dipasang kedalam postingan blog, kemudian salin kode dan pastekan kedalam artikel.

Tapi sebelum itu, mungkin beberapa dari sobat ada yang bertanya;

Bagaimana Cara Mengedit warna latar dan Border ?

Mudah saja, Untuk tampilan biasa tanpa scroll, sobat hanya perlu mencari kode " background-color: # disini diisi kode warna html ", apabila bingung atau tidak tahu kode warna tertentu, sobat cukup mengetik ke pencarian dengan kata kunci "kode warna html", cari dan salin kodenya, kemudian paste-kan dibagian setelah tanda pagar/hastag.

Untuk warna garis pembatas, cari saja dibagian "border" biasanya ada kode warna disana dengan awalan hastag (#).

Bagaimana Cara merubah tampilan Border ?

Di dalam kodenya nanti sobat akan diperlihatkan berbagai macam kode disana, khusus untuk model tampilan garis pembatas, "solid" untuk garis tebal, 'Double;padding " untuk 2 garis, "padding" untuk garis tunggal, "Dotted;padding" titik-titik, "dashed;padding" khusus garis putus-putus. 

Sedangkan khusus untuk model scroll, selalu ada kode "overflow;auto:padding".

Gimana cara edit lebar dan panjang kotak script ?

Terkait ukuran, luas area pada text box di postingan blog, terdapat keterangan "px" pada bagian panjang maupun lebar, misalnya 5px atau 10 px. Kalau sobat merasa bingung mana lebar dan panjang, cukup lihat angka paling besar untuk panjang dan nilai angka kecil untuk lebar atau bisa mencoba-coba terlebih dulu.

Mudah-mudahan sobat bisa memahami maksud dari penjelasan diatas, kalau dirasa sudah oke dan sip, yuk lanjut pilih-pilih tampilan kotak script :

1. Model kotak Script pertama

Warna latarnya abu-abu tua dengan kode #808080, sedangkan garis border nya berwarna merah tua #FF0000

 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #808080; border-left: 5px solid #FF0000; border-radius: 10px; padding: 10px; t-align: left;">TARUH TEKS DISINI! </div>

2. Tampilan Text Box Kedua

Untuk ukuran dan warnanya, sobat bisa dengan mudah mengedit perbagiannya, seperti yang sudah di jelaskan diatas. 

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: light grey; border-radius: 10px; border: 4px solid blue; padding: 10px; t-align: left;">TEXT KALIAN TARUH DISINI</div>

3. Bentuk tampilan ketiga kotak html

Untuk box html yang bagian tiga ini, kamu bisa scroll ke bawah atau ke atas tergantung jumlah kalimat didalamnya. Ukuran border tidak mengikuti banyaknya kalimat, untuk melihat keseluruhan kalimat adalah dengan melakukan scroll. 

<div style="background-color: white; border: 2px solid green; height: 100px; overflow: auto; padding: 5px; width: auto;">&nbsp;SIMPAN KODENYA DISINI !!, BAGIAN INI BISA DI SCROLL TERGANTUNG JUMLAH HURUF , INGIN TAHU LEBIH JAUH,SILAHKAN DI COBA SENDIRI PADA CONTOH INI</div>

4. Text Box Tampilan ke empat

Sebenarnya gak jauh berbeda dengan yang no 2 , hanya saja warna dan ukurannya sedikit berbeda. 

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid purple; padding: 10px; t-align: left;">TAMPILKAN TULISAN SOBAT DISINI</div>

5. Model Tampilan ke lima

Border ini terdiri dari titik-titik yg membentuk kotak tempat kamu menyisipkan tulisan, bisa juga untuk menyimpan kode html. 

 <div style="background-color: #c2c2c2; border: 2px dotted rgb(27, 26, 118); padding: 10px; text-align: left;">&nbsp;TAMPILKAN TEXT DIBAGIAN INI</div>

Nah itu lah beberapa kotak script yang dapat digunakan ketika kamu hendak menyisip kan kode atau simbol tertentu pada postingan di blog. 

Gimana Cara Bikin Enter Di Mode Html ? 

Pasti ada yg bingung masalah Enter sehabis nambahin text box, "wah gimana ni buat enter ke bawah kok gak bisa ", ini lah yg saya alami saat pertama kali membuat kotak script. 

Cara buat enter ke bawah mudah, tinggal tambahkan ini <p style="text-align: justify;"> pada mode compose html. 

3 Jenis Code Warna Yg Biasa Di pakai

Satu lagi, kalau sobat ada yg bertanya " Kok ada code "rgb(27, 26,118) ", nah ini adalah salah satu code untuk warna, sama seperti #c2c2c2. 

Ada 3 jenis color code untuk html : ada yang berawalan #, rgb, atau misalnya langsung saja tulis " blue" , "red", atau yg lainnya. 

Harapannya tulisan ini dapat membantu kamu yg sedang mencari tutorial cara menambahkan text box html di blogspot dan wordpress. 

Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Cara MUDAH Membuat Text Box Di Postingan Blogger Dan Wordpress "

Post a Comment

ads

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel