Membuat Style PRE untuk source code tutorial blog

Sebelum memulai tutorial kali ini ada baiknya kita berkenalan sama yang namanya <pre></pre>

Apa itu, pre?

Pre merupakan tag HTML dalam toolbox. Pre menandai teks yang terformat, jadi setiap anda menggunakan tag PRE maka ruang dan tombol enter akan di buat sama persis ketika anda mengetik teks.

Tag pre sangat cocok untuk membuat, tabel pada tag html. Jadi anda tidak perlu mengetikan <br/> (enter) dengan kode, cukup enter dari keybord anda saja dan juga spasi.

Biasanya tag ini di manfaatkan juga untuk mengutip kode sumber HTML, PHP, CSS dll. Dan bisanya di manfaatkan di dalam sebuah blog atau website tutorial blog. Terkadang blog tutorial "suka";, memberikan kode sumber di dalam tutorialnya.

Nah, sekarang kita akan memanfaatkan PRE ini untuk mempercantik sumber kode di dalam blogger (blogspot) yang akan di bagikan kepada pengunjung blog anda, tapi kita akan rubah penampilannya sehingga <pre></pre> tersebut lebih cantik dan style tentu saja. o iya contoh pre KLIK DI SINI. Baiklah Here it is...

caranya :

• login ke blogger.
• KLIK Template.
• KLIK Edit Html.
• KLIK Proceed.
• Jangan lupa backup dulu template anda, sebelum lanjut.

Pada code CSS template anda cari kode pre, kalau tidak ada silahkan tambahkan saja (ingat yang di kode css). Bingung? coba cari kode mirip-mirip seperti ini :

    body         {
         margin: 0 auto;
         padding: 0;
         background-color: #FFFFFF;
        }

Ketemu, nah itu adalah contoh kode css, berikutnya adalah pilih beberapa sumber kode/source code, style &lt;pre&gt; silahkan di pilih sesuai dengan kemauan anda ada 9 pilihan style PRE KLIK DI SINI.

Sudah di pilih??

kalau sudah di copy code cssnya. kemudian tambahkan sebelum kode body.

Masih bingung! ya sudah biar gampang langsung copy-paste code cssnya di atas kode

]]></b:skin>

Note : kode css bisa di tempatkan di mana saja pada bagian semua kode css, dia flaksibel (tidak seperti tag html, yang harus sesuai urutan) asalkan tidak memotong kode " { " dan " } " tidak masalah.

Dan simpan template.

• untuk menampilkan PRE ke dalam postingan

KLIK New Post KLIK HTML

Ketikkan tag <pre> di awal dan tutup dengan tag </pre>

contohnya :

<pre>
letakkan kode sumber html atau css atau php, atau teks biasa juga bisa di sini.. di tengah antara kode pre awal dan tutup.
</pre>

Sebaiknya usahakan untuk kode2 yang cukup panjang gunakan pre, namun jika kodenya pendek!, pre tidak perlu di gunakan.

Karena fungsi pre di sini adalah untuk memperingkas tampilan sumber kode agar tidak terlalu makan tempat di postingan anda.

sepp jadi lebih gaya tampilannya khan!! seep selamat mencoba...

• Tweet
• Share
• Share
• Share
• Share