Excalibur
Info
Selamat datang di blog Roy Lichtenstein- saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini dan membaca lebih lanjut tentang artikel yang saya susun. Ada banyak hal dapat anda pelajari, Anda mungkin akan menemukan sesuatu yang menarik

Nama saya Roy Lichtenstein, Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...

Pages

Subscribe:

Ads 468x60px

Social Icons

Syntax Highlighter For Blogger: Tutorial Blogger Posting Kode

Keterbatasan akan syntax highlighter (Teks berwarna-warni pada penulisan KODE CSS, Javascript, atau html seperti terlihat di blog ini !) untuk blogger memang sangat membuat prihatin. Inovasi dan kreatifitas sungguh sangat diperlukan untuk semakin memperkaya property yang memungkinkan blogger untuk tampil lebih atraktif. Syntag Highlighter yang pertama ini merupakan hasil modifikasi dari karya Dr. Nic yang alumnus University of Queensland. Apabila ingin mengunjungi websitenya kamu bisa buka di sini !. KODE CSS ataupun javascript yang diperlukan untuk membangun syntax highlighter Dr Nic ini cukup simple dengan hasil output yang memuaskan. Untuk menuliskan dalam posting kita cukup bedakan menjadi tiga kategori :

  1. Posting KODE CSS dalam bentuk : <pre><code class="css">
  2. Posting Javascript dalam bentuk : <pre> <code class "javascript"> dan
  3. Posting KODE HTML dalam bentuk : <pre> <code class="html"> yang semuanya ditutup dengan </code></pre>

Langkah untuk membuat Syntax Highlighter :
  1. Login ke Blogger.
  2. Lihat DEMO ! Semua KODE CSS, javascript dan Cara menggunakan saat posting sudah disertakan pada box 1, 2 dan 3.
  3. Simpan KODE CSS di atas KODE ]]></b:skin> dan javascript di atas KODE tersebut.
  4. Gunakan xHTML untuk melakukan posting.
  5. Tuliskan setiap syntax pada KODE CSS dalam posisi berurutan dari atas ke bawah, seperti :
  6.  
    #main-wrapper{
            width:60%;
            background:#fff;
            margin:5px;
            padding:15px 8px;
            border:2px solid #000;
    }

0 comments:

Post a Comment

Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous