Cara Membuat Tag Pre Dengan Latar Belakang Zebra

TutorialBlog46 - Cara Membuat Tag Pre Dengan Latar Belakang Zebra - Jika kita mempunyai sebuah blog yang berhubungan dengan tema pemrograman atau tips dan trik ngeblog maka sudah dapat dipastikan bahwa kita pernah menyampaikan beberapa contoh kode pemrograman melalui tulisan atau posting blog.

Dan pada kesempatan kali ini akan dibahas bagaimana membuat sebuah kotak yang berfungsi untuk menampilkan kode pemrograman yang akan disampaikan kepada pengunjung dengan latar belakang zebra atau vanila. Sehingga kode pemrograman tersebut akan tampil lebih menarik dan menonjol [jangan berpikir jorok loh yo :) ]

Latar belakang zebra yang dimaksud bukanlah latar belakang gambar kuda zebra seperti gambar diatas tetapi latar belakang dengan gambar warna selang-seling. Dan sebenarnya cara ini hampir sama dengan cara membuat blockquote keren yang digunakan untuk menampilkan kalimat penting di blog.

Jika sudah tidak sabar menunggu :) [yang mo nikah aja masih sabar menunggu juga kok :) ] mari kita simak dan ikuti langkah bagaimana membuat tag pre zebra berikut ini:

Cara Membuat Tag Pre Dengan Latar Belakang Zebra

1. Log in akun blogger
2. Pilih menu [Template] >> [Edit HTML]
3. Letakkan kode CSS ini dibawah kode <b:skin><![CDATA[ 

pre {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrd7la5jzoDg-mhtgQunhln7mJGO03gXw6qfyMsJR54J8mS3aB-FsVcGzcEiiWTcxNDnJOYLnvgDvvmxD0mRexDoN-XDyny4m2CyhqoKqHWYuNUKLcCmc9fE6IEr1Piz5xlGT7V5YDGk8/s1600/zebra3.gif');
font:normal 12px/14px Monaco,Monospace;
color:#000;
padding:0px 10px 15px 15px;
margin:0px 0px 10px;
position:relative;
overflow:auto;
height:150px;
width:95%;
background-repeat: repeat;
}

4. Klik tombol [Simpan Template] >> Selesai :)

Perlu kami sampaikan bahwa tag pre ini mempunyai sebuah kekurangan yaitu kurang tepatnya tinggi strip zebra atau selang-seling dengan posisi tulisannya sehingga kurang menarik [menurut pribadi tapi secara pribadi senang kok hehehehe bingung tho :) ] hal ini disebabkan karena menggunakan gambar sebagai latar belakangnya.

Mau tahu cara membuat tag pre zebra dengan tampilan yang lebih OK? jika iya silahkan lihat tulisan lain tentang cara membuat tag pre vanila. Dan sebagai informasi bahwa cara ini tidak menggunakan gambar sebagai latar belakang melainkan kode CSS3, penasaran! silahkan klik link ini :)

Untuk yang terakhir jangan lupa memberikan komentar berupa saran dan kritikannya [follow blog ini juga gak papa kok ntar saya follow back juga blog Anda] Akhir kata kami sampaikan selamat mencoba dan salam sukses [Selesai/]