Cara membuat Tag Pre Warna-Warni di blogspot

Cara membuat Tag Pre Warna-Warni di blogspot

Tag pre mendefinisikan teks terformat. Pre sendiri mempunyai maksud pre-formatted. Apabila teks ditulis dalam tag pre maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white -space), line break atau tab.

Biasanya tag pre berfungsi atau digunakan sebagai wadah untuk berbagi kode dengan para pembaca. Dengan menggunakan tag pre, karena penulisannya tetap seperti yang disebutkan diatas, maka pada saat penulisan HTML akan lebih kelihatan strukturnya.

Ada bermacam cara untuk menampilkan tag pre yang telah dimodifikasi. Namun untuk penulisan defaultnya menggunakan <pre> dan diakhiri dengan penutup </pre>. Seperti contoh dibawah.

<pre>
<--kode yang ingi dibagikan-->
</pre>

Jangan lupa untuk penambahan tag tersebut harus dalam mode HTML pada saat membuat postingan

Salah satu modifikasi tag pre yang akan saya bagikan adalah dengan warna-warni / selang-seling. Penasaran? Silakan ikuti tutorial berikut ini.

Cara membuat Tag Pre Warna-Warni di blogspot

Modifikasi ini menggunakan CSS3 jadi sebaiknya dengan menggunakan background linear. Kira-kira seperti ini CSSnya.

pre {
    background-color: #fff;
    background-image: -webkit-linear-gradient(top,#f5f5f5 50%,white 50%);
    background-image: -moz-linear-gradient(top,#f5f5f5 50%,white 50%);
    background-image: -ms-linear-gradient(top,#f5f5f5 50%,white 50%);
    background-image: -o-linear-gradient(top,#f5f5f5 50%,white 50%);
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    -ms-background-size: 30px 30px;
    -o-background-size: 30px 30px;
    background-size: 30px 30px;
    background-repeat: repeat;
    font: bold 12px/15px Inconsolata,Monaco,Consolas,"Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    color: #333;
    border: 1px solid #ddd;
    padding: 0 7px;
    margin: 10px 5px;
    overflow: auto;
    word-wrap: normal;
    white-space: pre;
    position: relative;
}

Untuk memodifikasi sobat tinggal mengganti kode warna orange dan untuk font silakan ganti pada warna hijau sesuaikan dengan keinginan.

Demikian tutorial cara membuat tag pre warna-warni semoga bermanfaat. Terima kasih telah membaca artikel Agung Jaka Nugraha. Wassalam

Cara membuat tag pre warna warni di blogspot