Cara Membuat Kotak Kode Dengan Efek Pewarnaan Sintax Kode Otomatis - Memiliki blog dengan tampilan keren dan enak dilihat tentu menjadi kembanggaan tersendiri untuk sang pemilik blog. Dengan tampilan yang menarik update postinganpun menjadi lebih bersemangat. Kesan pertama yang dilihat oleh pengunjung saat berkunjung ke blog kita ialah tampilan atau desain blog. Tampilan blog yang bagus dapat membuat pengunjung betah berlama-lama surfing di blogmu. Sayang bukan, jika anda mempunyai tulisan bagus, namun begitu orang melihat tampilan blog anda yang kurang menarik, mereka keburu pindah ke blog yang lain sebelum membaca Tulisan anda. Oleh karena itu disini saya akan menyajikan Cara Membuat Kotak Scrool Dengan Efek Perwarnaan Sintax Kode Otomatis.
Disini saya akan menggunakan plugin Prettify syntax hightlighter yang berfungsi untuk menampilkan potongan code bahasa pemrograman yang kita tempel pada positngan blog agar text script code kelihatan berbeda dengan tulisan yang biasa. Jika blog kita adalah blog untuk membahas mengenai bahasa pemrograman atau desain template blog, maka plugin Prettify syntax higlighter wajib anda pasang, karena setiap uraian script kode bahasa pemrograman yang ditempel pada postingan blog akan disajikan dengan format penulisan yang berbeda sehingga mudah untuk dibaca dan enak untuk dilihat. Kenapa saya pilih plugin Prettify sintax hightlighter ? Sebenarnya banyak sekali plugin-plugin sintax hightlighter lainnya namun saya lebih suka menggunakan plugin ini karena ringan, tidak banyak menggunakan external javascript dan mudah untuk memasangnya.
Cara Membuat Kotak Scrool Dengan Efek
Perwarnaan Sintax Kode Otomatis
1. Kamu harus login terlebih dahulu dengan akun bloggermu.
2. Setelah login, masuk ke halaman pengeditan template, klik Menu Template dan Tekan Tombol Edit HTML.
3. Pada template Editor silahkan Tekan Tombol CTRL+F untuk melakukan pencarian kode
</head>
.
4. Setelah kodenya ketemu letakkan script berikut ini tepat sebelum kode
</head>
.
<link href=" http://google-code-prettify.googlecode.com
/svn/trunk/src/prettify.css" rel="stylesheet"></link>
<script src="https://google-code-prettify.googlecode.com/svn
/loader/run_prettify.js"><script>prettyPrint();</script>
5. Cari Kode
</body>
dan sisikap kode dibawah ini sebelum kode
</body>
<!--SYNTAX HIGHLIGHTER-->
<script src='http://google-code-prettify.googlecode.com/
svn/trunk/src/prettify.js'/>
<script>prettyPrint();</script>
6. Cari kode
]]></b:skin>
dan sisipkan kode dibawah sebelum kode tersebut. Kode css ini berfungsi untuk mengatur tampilan kode. Kamu bisa mengganti kode warna dalam css berikut sesuai dengan keinginan.
/*SYNTAX HIGHLIGHTER*/
pre.prettyprint, code.prettyprint {
background-color: white;
padding:5px;
color #fff;
border:1px solid gray;
overflow:auto;
pre .nocode {
background-color: none;
color: #000
}
pre .str {
color: #FFC0CB
}
pre .kwd {
color: #f0e68c;
font-weight: bold
}
pre .com {
color: #87ceeb
}
pre .typ {
color: #98fb98
}
pre .lit {
color: #FFA07A
}
pre .pun {
color: #fff
}
pre .pln {
color: #fff
}
pre .tag {
color: #f0e68c;
}
pre .atn {
color: #bdb76b;
font-weight: bold
}
pre .atv {
color: #90EE90
}
pre .dec {
color: #98fb98
}
ol.linenums { /* IE indents via margin-left */
margin-top: 0;
margin-bottom: 0;
color: #AEAEAE
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { }
li.L1,li.L3,li.L5,li.L7,li.L9 { /* Alternate shading for lines */
background:#555;
7. Untuk kode yang ingin di hightlight, buka pembuatan entri baru. Pada menu setelan entri, klik pilihan, pada baris baru pilih tekan enter untuk baris baru, klik selesai. Kemudian pastekan kode yang ingin dihightlight pada mode compose. Buka mode html, masukkan kode
<pre class="prettyprint">
//kode disini
......
</pre>
untuk mengapit sintax kode tersebut. Kemudian copas hasilnya ke artikel yang mau di posting. pada menu setelan entri klik pilihan, pada baris baru pilih tekan enter untuk baris baru, klik selesai. Masukkan sintax kode yang ingin dihightlight pada mode compose. Masuk ke mode html editor, masukkan kode
Sekian dulu tutorialnya semoga bermanfaat. Silahkan dipraktekan. Kalau ada kendala, jangan sungkan-sungkan bertanya di kotak komentar.
Tags : Cara memasang plugin Prettify Syntax Highlighter pada blog.