Assalamualaikum sobat blogger, Pada kesempatan kali ini saya akan mengembangkan tutorial Cara Membuat Kotak Script Dalam Postingan blog. Adapun fungsi dari Prettify Syntax Highlighter ialah untuk menampilkan pecahan instruksi bahasa pemrograman yang kita tempelkan dipostingan artikel kita namun script tersebut akan mempunyai tampilan yang berbeda dengan text biasa yang bukan script.
Panduan kali ini sangat saya rekomendasikan untuk kau blogger yang membahas aneka macam macam topik yang mengharuskan kau menuliskan script. misalnya blog yang mempunyai topik blogging menyerupai blog lapaklama ini.
Dengan memakai panduan ini kau dapat menampilkan script-script tersebut dengan tampilan yang keren yang tentunya berbeda dengan text biasa yang bukan script. dan hal tersebut tentunya juga akan memudahkan pengunjung blog kau memahami apa yang kau maksud.
Apakah blog Lapak Lama Sendiri memakai panduan ini ?
Karena lapak usang ialah situs yang dibangun memakai platform wordpress dan bukan blogger, jadi blog ini tidak memakai metode ini untuk menampilkan script. Walaupun begitu panduan ini sangat saya rekomendasikan untuk kamu. Karena metode ini memakai plugin Prettify, Karena plugin ini sangat ringan dan juga gampang untuk digunakan.
Namun karenanya nanti akan mirip-mirip dengan blog lapak usang ini, Untuk lebih jelasnya karenanya akan menyerupai dengan scrensot gambar dibawah ini.
Oke mari pribadi saja kita mulai panduan menciptakan Kota Script.
Cara Membuat Kotak Script Dalam Postingan Blog
Oia sebagai isu aja, Jika kau ialah pengguna wordpress Self Hosted kau dapat memakai plugin yang berjulukan SyntaxHighlighter, dan untuk panduanya akan saya buatkan dalam beberapa waktu akrab ini. dan tampilannya nanti akan menyerupai blog ini.
Oke kembali ke topik.
1. Hal pertama yang harus kau lakukan ialah masuk atau login ke akun blog kau yang ingin kau tampili script di artikel.
2. Kemudian pilih sajian Template dilanjutkan dengan menentukan Edit HTML
3. Cari instruksi </head> gunakan kombinasi tombol CTRL+F untuk mempermudah menemukan instruksi tersebut.
4. Kemudian copy instruksi dibawah ini dan pastekan sempurna sebelum instruksi </head>
<link href=' http://google-code-prettify.googlecode.com
/svn/trunk/src/prettify.css' rel='stylesheet'/>
5. Cari lagi instruksi </body> dan sisipkan instruksi dibawah ini sempurna sebelum instruksi </body>
/*SYNTAX HIGHLIGHTER*/
<script src='http://google-code-prettify.googlecode.com/
svn/trunk/src/prettify.js'/>
<script>prettyPrint();</script>
6. Sekali lagi cari instruksi ]]></b:skin> dan sisipkan instruksi dibawah ini sebelum instruksi tersebut
/*SYNTAX HIGHLIGHTER*/
pre.prettyprint, code.prettyprint {
background-color: black;
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. Jika sudah jangan lupa klik tombol Save Template
8. Untuk kode-kode yang ingin kau highlight, Gunakan mode HTML pada editor artikel kau dan letakan pecahan script diantara tag <pre> misalnya menyerupai ini.
<pre class="prettyprint">
//kode disini
......
</pre>
Nah itulah panduan Cara Membuat Kotak Script Dalam Postingan Blog Yang Keren (Prettify Syntax Highlighter), Semoga panduan ini bermanfaat untuk sahabat sahabat blogger sekalian.
Sumber aciknadzirah.blogspot.com