Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

problogiz

Tutorial Blogger  masih membahas hal yang berkaitan dengan postingan artikel, kali ini cara membuat box kode atau kotak script pada saat postting artikel. Kotak kode script / box code ini sangat bermanfaat ketika Anda sedang membuat / posting artikel di Blogger yang berisi banyak kode script yang harus ditampilkan.
Pada tip dan trik  Buat Box / Kotak Kode Script di Postingan ini, akan diberikan beberapa contoh kotak kode script yang dibuat proBlogiz. Anda bisa menggunakannya  jika ada yang disukai dari contoh-contoh tersebut.
Tentunya Anda juga bisa memberikan perubahan pada code-codenya menurut selera masing-masing, seperti ukuran dan jenis border, warna background, ukuran box atau lainnya.

Beberapa Contoh Kotak / Box Script dan Kodenya
Simple Box
Kode Script Anda Disini…….
<div style="border: 2px #5f200e solid; padding: 10px; background-color: #d9da81; text-align: left;"> Kode Script Anda Disini…….</div>
Simple Box 2
Kode Script Anda Disini…….
<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini…….</div>
Ridge Border
Kode Script Anda Disini……
<div style="border: 2px #006400 ridge; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini……</div>
Inset Border
Kode Script Anda Disini……
<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Anda Disini……</</div>
Outset Border
Kode Script Anda Disini…….
<div style="border: 3px #5f200e  outset; padding: 10px; background-color: #d9da81; text-align: left;"> Kode Script Anda Disini…….</div>

Double Border
Kode Script Anda Disini…….
<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini…….</div>
Dotted Border
Kode Script Anda Disini……
<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini……</div>
Dashed Border
Kode Script Anda Disini……
<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; text-align: left;"> Kode Script Anda Disini……</div>
Scroll Box
<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 300px; text-align: left;"> Kode Script Anda Disini…… </div>
<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 300px; text-align: left;"> Kode Script Anda Disini…… </div>

Pilih salah satu contoh diatas yang Anda sukai, kemudian copy code scriptnya, dan pastekan code itu di mode HTML di post editor Blogger saat posting artikel.
Anda bisa rubah ukuran border, warna border, ukuran box, warna background, sesuai warna yang disukai dan ukuran yang dikehendaki.

Setelah  membaca artikel Buat Box / Kotak Kode Script di Postingan Blogger di Blog ini, selamat mencoba dan merubah tampilan blog Anda. Jangan lupa memberi donasinya berupa klik LIKE pada blog ini atau share aja ya sob…….
Thank’s….
Artikel Terkait Lainnya:
Click here for comments

17 komentar

Terimakasih tutorialnya. Bagaimana cara Buat kotaknya seperti pada postingan anda yang bisa ganti warna?

REPLY

tambah kan ccs berikut pd blockquote Anda :

blockquote{margin:20px;padding:10px;color:#666;width:537px;height:auto; overflow:auto;border:1px solid #E0E0E0; border-radius:5px;background:#F9F9F9;}
blockquote:hover{margin:20px;padding:10px;color:#666;width:537px; height:auto; overflow:auto;border:1px solid #A2A2A2; border-radius:5px;background:#E0E0E0;text-decoration:none;}

good luck!!

REPLY

terima kasih mas atas informasinya...

REPLY

gan, ane pernah naruh kode html berisi widget di spoiler. niatnya supaya orang laen bisa copas codenya, tapi kok malah kode html itu mengaplikasikan diri ke blog ane (jd widget), isi spoilernya kosong. itu gimana ya caranya supaya code itu masih berupa tulisan n berada di spoiler???
mohon bantuannya…

REPLY

di parse dulu mas kode spoilernya kalau mau ditampilkan dipostingan coba disini Parse HTML

REPLY

setelah diparse copy dan pasang di mode HTML Post Editor

REPLY

terima kasih gan, sangat bermanfaat

REPLY
Komentar ini telah dihapus oleh administrator blog.

ma kasih mas, sangat bermanfaat sekali

REPLY
Komentar ini telah dihapus oleh administrator blog.

wah keren nih komplit semua ada gan

REPLY

mantap banget gan......komplit dan jelas

REPLY

salam kenal sob, blognya keren euy, kalo ada waktu mampir ya sob

REPLY

If getting issues in QuickBooks, get it resolved by calling QuickBooks Customer Support Phone Number 1-833-325-0220. Our highly skilled & dedicated experts are available 24/7 to assist you. For More Visit: https://cutt.ly/yyD651b

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|