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

Pos Terkait

  • Pengertian Google Sandbox di Dunia Blogging

    Pengertian Google Sandbox di Dunia Blogging

    Apa itu Google Sandbox ? Googe Sandbox – Dalam dunia blogging tentunya para blogger sudah tau mengenai GS (Google Sandbox), mengapa tidak karena banyak blogger indonesia yang sering sekali melanggar bahkan menantang peraturan dari google sehingga terkena berbagai macam penalti terhadap blog mereka, terus apasih pengertian dari GS, GS merupakan sebuah penalti atau pelanggaran yang …

  • Cara Optimasi Gambar untuk Artikel SEO

    Cara Optimasi Gambar untuk Artikel SEO

    Artikel SEO yang Berkualitas Untuk meningkatkan pengunjung dari mesin pencari seperti google maka banyak orang yang menggunakan teknik yang dikenal dengan sebutan SEO atau Search Engine Optimization, Teknik SEO merupakan teknik optimasi sebuah situs dengan tujuan untuk memenangkan persaingan di mesin pencari sehingga blog tersebut berada di halaman pertama mesin pencari seperti google. salah satu …

  • 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 Menu di WordPress

    Cara Buat Menu di WordPress

    Cara Buat Menu di WordPress Cara Buat Menu – Artikel mengenai cara membuat menu disini yakni terusan dari artikel saya sebelumnya yakni cara buat artikel  , sebelum saya memberikan tutorial mengenai cara membuat menu , saya akan menjelaskan terlebih dahulu mengenai Menu , Menu merupakan sebuah tabs yang nantinya berisikan sub menu yang bisa mengarahkan pengunjung …

  • Cara Download Visual Basic V6 0- Visual basic

    Cara Download Visual Basic V6 0- Visual basic

    Selamat berjumpa kembali bersama Mamang Photgography , pada kesempatan ini Mamang Photography akan membahas mengenai membahas mengenai cara download Visual Basic , nah sebelum saya memberi tahu cara download Visual Basic , kamu perlu tahu dulu apa sih Visual Basic , perlu di ketahui Visual Basic merupakan sebuah bahasa pemrograman yang menawarkan Integrated Development Environment (IDE) visual untuk membuat …

6 Comments

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

    Balas

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

    Balas

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

    Balas

Tinggalkan Balasan

Alamat email anda tidak akan dipublikasikan. Required fields are marked *

CAPTCHA

*