Cara Memodifikasi Tampilan Kode untuk Posting Blog

Cara Memodifaksi Tampilan Kode Dalam Posting Blog

Memodifikasi Template Agar Tampilan Kode Lebih Menarik

Untuk sekedar sharing aja gan,pernah khan nemuin suatu blog yang tampilan kodenya jauh lebih menarik dibandingkan dengan tapilan kode 'default' yang dibawa oleh bogger?
Seperti yang sudah kita tahu gan untuk menampilkan artikel berupa kode ini,kita cukup menggunakan perintah <code>code</code> yang menghasilkan tampilan huruf menjadi berbeda dengan yang digunakan sebagai text primer.

Dan agan juga dapat lihat contoh pisiknya langsung di sini
Jika blogger memberikan tampilan default hanya merubah jenis text,kita dapat modifikasi warna background,ukuran text,jenis text sampai pengaturan jarak dalam merubah tampilan kode,sobat bisa lakukan dengan dengan 2 cara ini,yakni:

1.Cara Memodifikasi Tampilan Kode dengan menambahkan kode css-nya
2.Cara Memodifikasi Tampilan Kode dengan menggunakan perintah <div> untuk memanggilnya.

1.memodifikasi kode dengan merubah / menambah kode css-nya.

Buka dashboard lalu pilih tata letak selanjutnya pilih tab edit html dan contreng exppand widget templates,kemudian cari kode ini:
.post
Setelah sobat temukan kode tersebut,masih dalam baris cssnya tambahkan kode berikut:
.post code { background: #eee; font: 12px Courier, Monospace; color: #0E304A; }

misal sebelum ditambahkan seperti ini:

.post {
background: url(http://2.bp.blogspot.com/-pe-GE8Tb3hA/TZgYqu0Bv5I/AAAAAAAAAyU/7Bpd3Ontaik/s200/post.jpg) repeat-x; #fff; font: 12px Arial,Tahoma,Verdana, Monospace; color: #0E304A; }
letter-spacing:.0001em;
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.2em;
}

-------------tambahkan kodenya di sini---------------

.post h3 {font:normal normal 15px 'trebuchet ms',georgia, Tahoma, Verdana,trebuchet ms;
letter-spacing:.0001em;
margin:.25em 0 0;
padding:0 0 4px;
line-height:1.2em;
color:$titlecolor;
text-transform: capitalize;
}

maka menjadi seperti ini (misal aja gan,sesuaikan aja sama barisan css sobat ya)
.post {
background: url(http://2.bp.blogspot.com/-pe-GE8Tb3hA/TZgYqu0Bv5I/AAAAAAAAAyU/7Bpd3Ontaik/s200/post.jpg) repeat-x; #fff; font: 12px Arial,Tahoma,Verdana, Monospace; color: #0E304A; }
letter-spacing:.0001em;
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.2em;
}

.post code { background: #eee; font: 12px Courier, Monospace; color: #0E304A; }

.post h3 {font:normal normal 15px 'trebuchet ms',georgia, Tahoma, Verdana,trebuchet ms;
letter-spacing:.0001em;
margin:.25em 0 0;
padding:0 0 4px;
line-height:1.2em;
color:$titlecolor;
text-transform: capitalize;
}

Simpan Templates.

Coba sekarang sobat lakukan posting untuk mengujinya,lalu tambahkan dengan menggunakan <code>test kode posting</code>.
Jika tampilan kode blog sobat belum berubah,coba dengan cara kedua.


2.memodifikasi kode dengan menggunakan printah <div> sebagai pemanggil.

Bersihkan semua yang telah sobat edit,kini kembalil ke dashboard,lalu tata letak selanjutnya tab edit html dan contreng exspand widget templates,cari kode berikut:

]]></b:skin>

setelah itu tepat DIATASNYA sobat letakkan barisan kode css berikut:
.areacode {
color:green;
margin : 12px 10px 2px;
padding : 10px;
clear : both;
font-weight: normal;
font-family : "Courier New";
font-size : 15px;
list-style-type : none;
background : black;
border-top : 8px solid blue;
border-right : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #eeeeee;
}

Setelah itu simpan templates deh :D
Apakah disini kita sudah berhasil,belum dunks,khan kita harus memanggilnya dahulu sob,
caranya setiap sobat hendak posting,untuk menampilkannya sobat gunakan kode ini
<div class="areacode">
<!--text sobat disini ya-->
</div>

Publish deh dan liat hasilnya,berhasil khan?(ribet BANGET ya)