Tutorial SyntaxHighlighter Khusus Blogger

Blogger, layanan blog-publishing dari Google, tidak memberikan stabilo sintaks keluar dari kotak. Ini berarti Anda perlu untuk menggunakan solusi pihak ketiga dalam rangka untuk memiliki sintaks dalam posting Anda. Salah satu solusi adalah mengagumkan sintaks stabilo diciptakan oleh Alex Gorbatchev yang disebut SyntaxHighlighter . Keuntungan yang besar dari stabilo ini adalah bahwa hal itu murni ditulis dalam JavaScript dan sebagai hasilnya tidak memerlukan komponen sisi server dan dapat dengan mudah diintegrasikan ke dalam blogger. Berikut akan detail tutorial bagaimana untuk setup dan menggunakan SyntaxHighlighter di blog Blogger Anda.


Kini sudah banyak para Blogger yang telah menggunakan SyntaxHighlighter dalam tutorial posting mereka, agar terlihat jelas dan dapat dipahami ketika pengguna blogger lainnya digunakan. Jikapun Anda salah satu pengguna Wordpress, tidak usah bersusah payah untuk menggunakan tutorial ini, karena sudah disediahkan sebuah Pluign yang mudah di ambil. Jika Anda pengguna Blogger, tidak ada salahnya untuk mencoba.
Sebelum di mulai, sebaiknya Candangkan Template blog Anda terlebih dahulu agar tidak terjadi kesalahan fatal, dan bisa download ulang candangan template blog Anda yang tersimpan sebelum ini

Mulai Pasang SyntaxHighlighter

Hal pertama yang harus dilakukan adalah membuka dasbor blog Blogger Anda dan pilih yang mana yang ingin memasang SyntaxHighlighter.

Dan lalu pilih seperti ditunjukkan gambar di atas. Di sisi kiri menemukan menu yang mengatakan Template dan klik di atasnya.


Ini akan membuka halaman template blog Anda. Klik pada tombol yang mengatakan Edit HTML untuk membuka editor HTML seperti yang ditunjukkan di bawah ini.

Klik di mana saja di dalam jendela editor dan tekan CTRL + F. Sebuah kotak pencarian seharusnya sekarang muncul di sudut kanan atas seperti yang ditunjukkan di bawah ini.

Pada kotak pencarian masukkan "</head>" (tanpa tanda kutip) Lalu salin script dibawah ini dan pastekan di atas kode "</head>" tersebut.

<script async='async' src='http://procejct-saeful13.googlecode.com/svn/JS/SyntaxHighlighter.js' type='text/javascript'/>
 

Sekarang tambahkan script style CSS pada settingan style CSS blog Anda dengan mecari lagi kata kunci "" atau "</style>". salin script style CSS dibawah ini, dan pastekan di atasnya.

/*syntax highlighter*/ pre { padding:.8em 1em; margin:0.5em 0; background-color:#eee; border:0px solid #eee; font-size:13px;color:#000; font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace; line-height:1.4em; position:relative; white-space:pre-wrap; word-wrap:break-word; overflow:auto; max-height:200px; } code{ font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace; font-size:13px; color:#d14; } pre code{ padding:0!important; color:#839496; background:#eee; border:1px solid #eee; display:block; overflow: auto; max-height:200px; } pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{ color:#93a1a1; font-style:italic; } pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{ color:#F5821E; } pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{ color:#008800; } pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{ color:#268bd2; } pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{ color:#A2886F; } pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{ color:#000; font-weight:bold; } pre .deletion{ color:#dc322f; } pre .tex .formula{ background:#eee8d5; }
 

Jika pekerjaan sudah siap, lakukan penyimpanan.

Untuk mulai percobaan dan menulis sebuah script dalam artikel, cukup ketik seperti di bawah ini dengan menggunakan postingan HTML

<pre> <code> Masukkan Kode Script dan lain-lain di sini</code> </pre>


Dalam artikel ini, semoga membantu.