Skip to main content

Tutorial Cara Membuat Kotak Script Pada Postingan Blog

Hai sobat Blogger ,jumpa lagi dengan saya di Blog ala kadarnya ini.Kali ini saya ingin membagikan sebuah cara yang sering dilakukan oleh para Master Blogger dalam membuat kotak teks pada postingan blog/website mereka.Sebenarnya caranya cukup mudah kok ,nanti sobat tinggal mempraktekkan apa yang saya sampaikan di artikel ini.

Meletakkan teks dalam kotak biasanya dimaksudkan untuk memberikan kesan bahwa informasi yang disampaikan itu bersifat PENTING.Yang saya maksud seperti ini lho ,terlihat lebih menarik kan ?

 

 

Namun masalahnya untuk membuat kotak seperti di atas tidak disediakan oleh Blogspot ,jadi kita harus berkreasi sendiri .Caranya mudah silakan Ikuti langkah-langkah berikut ini :

  • LOG IN Ke Blogger dan pilihlah ENTRI BARU
  • Silakan membuat Tulisan , pada gambar di bawah ini dalam mode COMPOSE

buat-kotak-sript

 

  • Untuk Membuat kotak Teks silakan copy script di bawah ini Untuk selanjutnya Paste ke dalam postingan anda di Blogger tadi (pastikan ubah dari mode COMPOSE menjadi HTML)
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
 text-align: left;">
 .inginberbagi.com (ganti tulisan ini).</div>
  • Lebih jelasnya lihat gambar di bawah ini ,setelah mengubah menjadi mode HTML silakan paste script tadi di postingan anda (terserah mau menaruhnya di mana)

buat-kotak-script-teks

  • Kembali ubah menjadi mode COMPOSE dan lihat hasilnya …nah sudah ada kotaknya kan ?hehe lihat gambar di bawah

buat-kotak-teks

 

  • selanjutnya sobat Blogger bisa mengubah Tulisan .inginberbagi.com(ganti tulisan ini). dengan tulisan yang ingin sobat taruh di dalam kotak tersebut ,bisa berupa script atau tulisan lainnya.

Atau mungkin sobat ingin berkreasi dengan tampilan kotak yang lain ,berikut ini penjelasan script di atas ,tentu saja sobat bisa merubahnya dengan kode sesuai keinginan sobat .

<div style=”border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;”>
.inginberbagi.com(ganti tulisan ini).</div>

  • border: 3px = ketebalan kotak script dan #1780dd = warna kotak script
  • Double = bentuk kotak (kode ini bisa diganti dengan kode di bawah ini atau bisa juga dihilangkan)
.inginberbagi.com( ganti Kode Double dengan Dashed) jika menginginkan bentuk kotak seperti ini

 

.inginberbagi.com(ganti Kode Double dengan Dotted). jika menginginkan bentuk kotak seperti ini

 

.inginberbagi.com(ganti Kode Double dengan Groove). jika menginginkan bentuk kotak seperti ini

 

.inginberbagi.com(ganti Kode Double dengan Inset). jika menginginkan bentuk kotak seperti ini

 

.inginberbagi.com(ganti Kode Double dengan Outset). jika menginginkan bentuk kotak seperti ini

 

.inginberbagi.com(ganti Kode Double dengan Ridge). jika menginginkan bentuk kotak seperti ini

 

.inginberbagi.com(ganti Kode Double dengan Solid). jika menginginkan bentuk kotak seperti ini

 

  • padding: 10px  = panjang kotak ke bawah ,sedang lebarnya otomatis menyesuaikan sampai ujung posting
  • background-color:#ffffff = kode warna dalam kotak
  • text-align: left = posisi tulisan dalam kotak  di kiri,sobat bisa mengubahnya menjadi center= tengah atau right=kanan

Nah ,begitulah penjelasan singkat kode HTML untuk membuat kotak script / teks dalam postingan blog .Selanjutnya silakan sobat memodifikasi dengan selera ,tidak susah kan ?cara ini juga bisa sobat terapkan pada blog berplatform wordpress.

Kalau sobat ingin membuat Kotak Teks yang ada SCROLLNYA tinggal tambahkan kode( overflow: auto )sebagai fungsi Scrollnya seperti di bawah ini :

 

 <div style=”border: 2px #454843 solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 50px; width: 300px;
text-align: left;”>
SEKIAN TUTORIAL SINGKAT CARA MEMBUAT KOTAK SCRIPT / TEKS PADA POSTINGAN BLOG DAN INI ADALAH CONTOH TAMPILAN KOTAK TEKS YANG MENGGUNAKAN SCROLL ,SILAKAN MENCOBA DAN SEMOGA BERMANFAAT UNTUK SOBAT BLOGGER SEMUA</div>

Terima kasih atas kunjungannya dan  jangan sampai Ketinggalan Tutorial selanjutnya ya sob !

baca artikel lainnya : CARA BUAT BLOG GRATISAN DENGAN PLATFORM BLOGGER

 

MOCHAMMAD

saya adalah seorang newbie yang ingin menjadi seorang Blogger Profesional . Saat ini profesi saya adalah sebagai PNS ( pemain Network Sejati ).

3 komentar pada "Tutorial Cara Membuat Kotak Script Pada Postingan Blog"

    1. sebaiknya edit saja postingan sobat ,coba lihat di mode HTML di situ bisa sobat lihat jika kode iklannya menindih kode script maka bisa diperbaiki secara manual.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *