Cara Membuat Kotak Kode Script HTML di dalam Postingan Blogger

Cara Membuat Kotak Kode Script HTML di dalam Postingan Blogger

Kotak Kode Script HTML

Cara Membuat Kotak Kode Script HTML di dalam Postingan Blogger – Tips Blogger-  Oke pada kesempatan kali ini saya akan berbagi cara membuat sebuah kotak kode script pada postingan blogger / blogspot , maklsud dari postingan kali yakni ketika kamu mau berbagi kode script kepada orang lain , maka tentunya kamu perlu kotak untuk menampilkan kode yang kamu bagikan kan ? dengan maksud agar kode script yang kamu bagikan lebih indah tampilannya . oke tidak usah panjang lebar pada kesempatan ini saya akan berbagi satu persatu caranya. 

Kotak Kode Script HTML


Berikut beberapa Macam Kode Script

1. Yang pertama macam Kotak Kode Script/HTML di dalam Postingan Blogger yakni seperti pada gambar dibawah ini , kamu bisa copy paste script dibawah ini , keterangan :

  • Border:1px > Ini merupakan tebal border/frame 
  • #444 > Merupakan Warna dari border
  • Padding : 10px > Jarak teks dengan border 
  • Background-color: merupakan warna dari background. 
  • text-align:left : Align dari text yang ada dalam border .
<div style=”border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;“>
Kode Script Anda 
</div>
 
2. Untuk tipe Kotak Kode Script/HTML di dalam Postingan Blogger yang kedua yakni seperti pada tampilan dibawah. keterangan : 
  • Left : merupakan algin texnya 
  • 70 : merupakan besar colom border
  • 6 merupakan besar baris colom

Berikut scriptnya :

<div align=”left”><textarea cols=”70″ name=”code” rows=”6″> KODE HTML ANDA DI SINI
</textarea>

3. Kode Kotak Kode Script/HTML di dalam Postingan Blogger yang ketiga seperti pada gambar dibawah ini . 



Berikut scriptnya :
<div>


<form name=”copy”>
<div align=”center”>
<input onclick=”javascript:this.form.txt.focus();this.form.txt.select();” type=”button” value=”Highlight All” /> </div>
<div align=”center”>
<textarea cols=”20″ name=”txt” rows=”4″ style=”height: 50px; width: 200px;” wrap=”VIRTUAL”>masukkan script anda disini</textarea></div>
4. Kode Kotak Script tipe keempat yakni seperti pada kotak dibawah ini .

Kode Script Anda (Dashed)


Kode Script Anda (Dotted).


Kode Script Anda (Groove).


Kode Script Anda (Inset).


Kode Script Anda (Outset).


Kode Script Anda (Ridge).


Kode Script Anda (Solid).

Berikut Kode Scriptnya : 

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

Keterangan : 
Untuk kata Double disana bisa di ganti dengan Kode Contoh yang diatas. 

5. Berikut macam kode script untuk yang kelima 

SOLID BOLDER
 
<div style=”border: 2px #006400 solid; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>
RIDGE BORDER
 
<div style=”border: 2px #006400 ridge; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>
INSET BORDER
 
<div style=”border: 2px #006400 inset; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>
OUTSET BORDER
 
<div style=”border: 2px #006400 outset; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>
DOUBLE BORDER
 
<div style=”border: 2px #006400 double; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>
DOTTED BORDER
 
<div style=”border: 2px #006400 dotted; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>
DASHED BORDER
 
<div style=”border: 2px #006400 dashed; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI </div>
BORDER DENGAN LEBAR, PANJANG, DAN SCROLL
 
<div style=”border: 2px #006400 solid; padding: 10px; background-color: GOLD; overflow: auto; height: 50px; width: 300px; text-align: left;”>TULIS KODE/SCRIPTNYA DISINI </div>



6. Script Tipe Kelima 

<div style=”border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;”>
Kode Script Anda Di Sini
</div>

 

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

 

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

 

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

 

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

 

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

 

<div style=”border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;”>Kode Script Anda Disini</div>

 

<div style=”border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;”> Kode Script Anda Disini</div>


<div style=”border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;”> Kode Script Anda Disini</div>

 

<div style=”border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;”> Kode Script Anda Disini</div>

Cupuk sekian postingan pada kseampatan kali ini , semoga artikel Cara Membuat Kotak Kode Script/HTML di dalam Postingan Blogger – Tips Blogger menjadi pedoman darn bahan referensi kamu semua .

Kotak Kode Script HTML

Kotak Kode Script HTML

Related Posts

  • Cara Mengatasi Bot Auto Visitor WordPress

    Cara Mengatasi Bot Auto Visitor WordPress

    Cara Kerja Bot Auto Visitor Bot Auto Visitor – berbicara soal bot memang sangat membantu kita dalam pekerjaan yang berulang contoh ketika blog kita terkena bot autovisitor, emang bot tersebut membantu kita dalam meningkatkan pengunjung dan PV namun ahl tersebut termasuk hal yang curang, oleh karena itu sangat tidak di anjurkan apabila kira menggunakan bot …

  • Syarat Laman saat Daftar Google Adsense, Penting!

    Syarat Laman saat Daftar Google Adsense, Penting!

    Salah Satu Syarat Daftar Google Adsense Google adsense merupakan layanan pengiklanan yang sangat terkenal di kalangan blogger karena pembayarannya yang menggiuarkan, namun untuk mendaftar sebagai publisher adsense tidak semudah yang dibayangkan, karena terdapat beberapa proses review dan persetujuan, salah satu syarat mendaftarkan blog ke google adsense yaitu dengan memberikan beberapa laman yang harus ada pada …

  • Persiapan Menjadi Blogger Profesional

    Persiapan Menjadi Blogger Profesional

    Persiapan Menjadi Blogger Pemula Hingga Mahir Persiapan Menjadi Blogger – Menjadi seorang blogger profesional yang mempunyai pendapatan yang sangat besar tidak semudah yang kita bayangkan, seorang blogger professional sudah pernah melewati hal manis dan pahitnya kegagalan dalam blogging, mulai dari tidak menghasilkan apa-apa hingga blog yang mereka miliki di banned atau bahkan di hack orang …

  • Cara Buat Artikel di Blog WordPress

    Cara Buat Artikel di Blog WordPress

    Cara Buat Artikel di Blog WordPress Cara Buat Artikel – Pada artikel sebelumnya sudah di jelaskan bagaimana cara membuat sebuah blog dengan wordpress , dan sekarang melanjutkan artikel sebelumnya yakni bagaimana cara kita membuat sebuah artikel dalam blog wordpress? membuat sebuah artikel mungkin bagi sebagian yang masih belum mengenai tampilan dan kegunaan beberapa fitur di …

  • Cara membuat Gallery Photo bergerak di Blog

    Cara membuat Gallery Photo bergerak di Blog

    Pada kesempatan kali ini saya akan membagikan trik cara membuat Gallery photo bergerak di postingan Blog. Sudah tidak asing lagi pada dunia blogger dengan adanya kode script untuk membuat photo bisa bergerak di blog, tampilan blog akan semakin menarik dilihat. Oke tidak panjang lebar saya bertutur kata langsung aja kita praktekan disini…   Cara membuat …

6 Comments

  2. maaf, mas, kalau kotak scriptnya ada 3 atau lebuh dalam satu baris bisa ngga? cara gimana?

    Reply
  3. mamanggraphic says:

    maksudnya 3 dalam satu baris gimana mas ?? bisa di perjelas?

    Reply

  5. Fiine way of telling, andd nice article to obtain facts regarding
    my presentation subject matter, which i am going to present
    in school.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *