HOME
Home » Blog » Tutorial Cara Membuat Kotak Script Pada Postingan Blog

Tutorial Cara Membuat Kotak Script Pada Postingan Blog

Posted at September 14th, 2016 | Categorised in 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 ?

 

IDE BISNIS MODAL KECIL YANG BISA DIKERJAKAN DARI RUMAH SECARA ONLINE DAN OFFLINE 

 

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

 

3 Komentar for Tutorial Cara Membuat Kotak Script Pada Postingan Blog

Tinggalkan Balasan

Related Post to Tutorial Cara Membuat Kotak Script Pada Postingan Blog

Cara Membuat Blog platform WordPress Self Hosted

Posted at 13 Februari 2018

Banyak sekali orang yang ingin mempunyai blog,terutama mereka yang sedang menggeluti bisnis online.Namun,sayangnya pengetahuan tentang cara membuat blog yang minim membuat mereka kesulitan.Setelah di... Read More

Trik Cara Menyembunyikan Gambar Pada Postingan Blog

Posted at 11 Agustus 2017

Apakah anda seorang newbie dalam dunia blogging dan ingin belajar mengenai trik-trik tertentu dalam membuat tulisan di blog anda tersebut.Nyatanya tulisan seseorang dalam menyajikan... Read More

Cara Melakukan Optimasi Blog Platform WordPress

Posted at 2 Juni 2017

Apakah Anda merupakan salah satu blogger pengguna platform wordpress?Tahu tidak kalau WordPress menjadi salah satu platform blog yang digunakan oleh banyak orang. WordPress ini... Read More

Cerdas Dengan Memiliki Blog Meskipun Gratisan

Posted at 27 Mei 2017

Bagi yang menggemari dunia literasi, fotografi maupun desain dan ingin berbagi, aktifitas blog sangat menguntungkan dan menyenangkan. Anda bisa mengekspresikan banyak hal dalam bentuk... Read More

Tutorial Membuat Blog Paling Mudah dan Lengkap

Posted at 27 Mei 2017

Blog bisa menjadi salah satu usaha yang bisa dijalankan untuk memajukan suatu bisnis Anda. Kini, usaha berbasis internet memang sudah menjadi hal biasa yang... Read More