Cara menampilkan kode script pada posting blog

Kode script tentunya tidak bisa kita masukkan begitu saja pada halaman posting, jika kita masukkan begitu saja maka kode tersebut tidak akan terlihat pada postingan, dan malah sebelum tulisan kita terbitkan, kita akan mendapat peringatan dari blogspot, dan jika kita mengabaikannya maka yang terjadi selain kode tersebut tidak tampak juga akan merusak tampilan template kita.
Setidaknya itu yang terjadi ketika saya mencoba memasukkan kode script secara langsung ke dalam postingan.
(*He...he... maklum, baru belajar bikin blog tutorial.. ^^ *)

Karna saya tidak begitu pintar merangkai kata-kata, jadi sebaiknya kita langsung mulai saja sebelum saya mati kutu... ha..ha...

1. Seperti biasa, login ke Blogger kemudian pilih menu Layout/Tata letak

2. Klik menu Edit HTML dan jangan lupa untuk mencentang Expand Template Widget

3. Kemudian cari kode ]]> , copy kode di bawah ini kemudian paste tepat di atasnya.
* Untuk memudahkan pencarian, gunakan CTRL + F

.codeview {
margin : 15px 15px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #CCCCCC url() no-repeat right bottom;
border-top : 1px solid #000;
border-right : 1px solid #000;
border-bottom : 1px solid #000;
border-left : 1px solid #000;
}
.codeview li {
font-size : 12 px;
line-height : 23px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #000;
font-weight : normal;
margin : 0;
padding : 0;
}

* Perhatikan kode berwarna merah. #CCCCCC adalah kode untuk warna background. anda bisa menggantinya dan menyesuaikan warnanya dengan template anda..
4. Setelah itu klik SIMPAN TEMPLATE

5. Kemudian memasukkan kode script ke dalam posting dengan cara berikut:
-> Copy kode script yang akan anda masukkan ke dalam posting kemudian silahkan menuju http://centricle.com , kita akan melakukan Encode terlebih dahulu agar code script dapat di tampilkan pada posting,.
-> Setelah halaman http://centricle.com terbuka. kosongkan halamannya/hapus kode yang sudah ada di dalam kolom.
-> Kemudian paste kode script yg kita copy tadi, lalu klik ENCODE
-> copy hasilnya, kemudian paste ke halaman posting..
-> Untuk menambahkan background, tambahkan kode <div class="codeview">

di awal Script, dan akhiri dengan kode </div>

Semoga bermanfaat ^^

Posted in: Tips 'n Trik