Posting KODE HTML Menggunakan KODE pre

Posting KODE HTML akan lebih mudah dan lebih bagus apabila kita menggunakan bantuan fungsi <pre> . Melalui penambahan KODE CSS yang melibatkan fungsi KODE tersebut di atas maka penataan dan pengaturan spasi posting dalam KODE HTML juga dengan sangat mudah dapat kita atur. Contoh yang sederhana adalah apabila kita ingin mengatur beberapa KODE baik dalam CSS, script ataupun KODE html supaya lebih menjorok ke bagian dalam supaya pembaca blog lebih mudah memahami batas pembuka ataupun penutup dokumen seperti halnya tag <div> dan tag </div> ataupun misalnya tag <li> dengan tag </li> dan yang paling kita rasakan pentingnya adalah saat posting yang melibatkan syntax pada KODE CSS. Seperti misalnya :

body{
        background: #fff url(image.jpg);
        width:600px;
        font:12px;
        font-family:Arial;
        color: #000;
}

Dengan menampilkan kode dalam bentuk seperti di atas, maka pembaca blog dengan mudah akan dapat membaca dan memahami dimana sebuah awal dan akhir dokumen yang kita tuliskan. Akan sangat berbeda apabila dokumen HTML yang kita tuliskan semua dimulai dari tepi halaman, karena tidak akan terlihat pertanda dokumen dimulai dan kapan dokumen berakhir.
Coba bandingkan dengan yang si bawayh ibi dimana posting kode HTML tanpa menggunakan "pre":

body{
background: #fff url(image.jpg);
width:600px;
font:12px;
font-family:Arial;
color: #000;
}

Gunakan kode CSS berikut :

Kode CSS-1 :

pre.GRkode1{
        margin:20px 0;
        padding:18px 10px;
        background:#555;
        font-family:Monaco, Courier New, Courier, Monospace;
        color:#eee;
        font-weight:normal;
        line-height:18px;
        width:400px; /*rubah untuk sesuaikan dengan lebar halaman posting */
        max-height:400px;
        overflow:auto;
        text-align:left;
        white-space:pre;
        text-shadow:0 0 0 #fff;
        box-shadow:0 0 0 #fff;
        border-radius:0;        
}

Atau bisa juga gunakan KODE CSS seperti di bawah ini :

Kode CSS-2 :

pre.GRkode2{
        margin:20px 0;
        padding:18px 10px;
        background:#ccc;
        font-size:12px;
        font-family:Tahoma;
        color:#000;
        border:1px solid #666;
        font-weight:normal;
        line-height:18px;
        width:400px; /*rubah untuk sesuaikan dengan lebar halaman posting */
        max-height:400px;
        overflow:auto;
        text-align:left;
        white-space:pre;
        text-shadow:0 0 0 #fff;
        box-shadow:0 0 0 #fff;
        border-radius:0;        
}

Menggunakan effek CSS3 :

Kode CSS-3 :

pre{
        margin:20px 0;
        padding:15px 10px;
        line-height:18px;
        background:#eee;
        font-size:12px;
        color:#000;
        text-shadow:2px 2px 2px #888;
        font-family:Monospace;
        border:3px double #666;
        border-radius:6px;
        box-shadow:0 0 8px #000;
        overflow:hidden;
        font-weight:normal;
        line-height:18px;
        width:400px; /*rubah untuk sesuaikan dengan lebar halaman posting */
        max-height:400px;
        text-align:left;
        white-space:pre; 
        transition:all 0.5s linear;
        -o-transition:all 0.5s linear;
        -moz-transition:all 0.5s linear;
        -webkit-transition:all 0.5s linear;
        -ms-transition:all 0.5s linear;       
}
pre:hover{
        width:700px;700px; /*rubah untuk sesuaikan dengan lebar halaman posting */
        overflow:auto;
        z-index:9999;
}

Untuk KODE CSS pertama, gunakan KODE seperti berikut saat melakukan posting :

xHTML-1 :

<pre class="GRkode1">Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript</pre>

Untuk KODE CSS ke dua, gunakan KODE seperti berikut saat melakukan posting :

xHTML-2 :

<pre class="GRkode2">Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript</pre>

Untuk KODE CSS ke tiga, gunakan KODE seperti berikut saat melakukan posting :

xHTML-3 :

<pre>Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript</pre>

Cara menggunakan dan membuat :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup Template sebagai langkah preventif sebelum melakukan berbagai perubahan kode html baik berupa penambahan ataupun pengurangan kode css, javascript dan xHTML.
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
   Pilih salah satu dari ketiga pilihan kode css yang tersedia di atas.
7. Klik "Simpan Template (Save Template)".
8. Lakukan posting menggunakan tag pre dengan xHTML yang sesuai dengan pilihan kode css.
9. Selesai! Buka blog dan lihat hasilnya!

Catatan/Keterangan :

• Sesuaikan lebar pada syntax pre (kode css) dengan lebar halaman posting.
• Lakukan posting di "mode Edit HTML".
• Pada syntax pre yang ke-3 telah ditambahkan effek css3. Seuaikan juga width saat hover efect bekerja dengan lebar blog anda.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Rebo   WAGE,Maret,20,2012

» Happy Blogging - gubhugreyot «