Menampilkan Kode/ Script di Postingan Dengan Tampilan Unik

Sebenarnya ada banyak model yang bisa dipergunakan untuk menampilkan kode atau script dalam postingan. Salah satunya dengan mempergunakan model spoiler maupun seperti postingan ini. Tapi kali ini saya ingin membagikan kepada anda dengan model yang satu ini. Ini adalah trik sederhana dalam membuat tampilan kode pada postingan anda sedikit berbeda, hanya dengan menggunakan kode CSS maka tampilan Kode/ Script di Postingan anda jadi lebih Unik.

Inilah contohnya:

/*code*/
.code {
display:block;
font-family:Courier New;
font-size:9pt;
width:360px;
overflow:auto;
repeat-y;
max-height:200px;
margin:5px 10px;
padding: 2px 15px 2px 25px;
background:url(http://i583.photobucket.com/albums/ss279/negativa/code.png) no-repeat left top; }

Jika anda tertarik, silahkan ikuti tutorial dibawah ini:

1. Silakan login ke account blogger anda.
2. Menuju ke edit HTML [terlebih dulu template harus di backup]
3. Masukkan kode di bawah ini diatas kode ]]></b:skin>

/*code*/
.code {
display:block;
font-family:Courier New;
font-size:9pt;
width:360px;
overflow:auto;
repeat-y;
max-height:200px;
margin:5px 10px;
padding: 2px 15px 2px 25px;
background:url(http://i583.photobucket.com/albums/ss279/negativa/code.png) no-repeat left top; }
Background image diatas dapat anda rubah sesuai keinginan anda.

4. Klik save template
5. Masukan kode seperti dibawah ini setiap kali anda ingin menampilkan kode:

<span class="code">
....ini tempat kode yang ingin ditamplkan
</span>

6. Selamat mencoba dan sukses selalu...Salam Blogging

Bagi anda yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek, saya sarankan untuk anda bisa belajar di sini

Bagikan