Cara Membuat Kotak Script Dalam Postingan Blog

Cara Membuat Kotak Script Dalam Postingan Blog

Assalamualaikum sobat blogger, Pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Kotak Script Dalam Postingan blog. Adapun fungsi dari Prettify Syntax Highlighter adalah untuk menampilkan potongan kode bahasa pemrograman yang kita tempelkan dipostingan artikel kita namun script tersebut akan memiliki tampilan yang berbeda dengan text biasa yang bukan script.Membuat Kotak Script Dalam Postingan

Panduan kali ini sangat saya rekomendasikan untuk kamu blogger yang membahas berbagai macam topik yang mengharuskan kamu menuliskan script. contohnya blog yang memiliki topik blogging seperti blog lapaklama ini.

Dengan menggunakan panduan ini kamu bisa 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 kamu memahami apa yang kamu maksud.

Apakah blog Lapak Lama Sendiri menggunakan panduan ini ?

Karena lapak lama adalah situs yang dibangun menggunakan platform wordpress dan bukan blogger, jadi blog ini tidak menggunakan metode ini untuk menampilkan script. Walaupun begitu panduan ini sangat saya rekomendasikan untuk kamu. Karena metode ini menggunakan plugin Prettify, Karena plugin ini sangat ringan dan juga mudah untuk digunakan.

Namun hasilnya nanti akan mirip-mirip dengan blog lapak lama ini, Untuk lebih jelasnya hasilnya akan mirip dengan scrensot gambar dibawah ini.Membuat Kotak Script Dalam PostinganOke mari langsung saja kita mulai panduan membuat Kota Script.

Cara Membuat Kotak Script Dalam Postingan Blog

Oia sebagai informasi aja, Jika kamu adalah pengguna wordpress Self Hosted kamu bisa menggunakan plugin yang bernama SyntaxHighlighter, dan untuk panduanya akan saya buatkan dalam beberapa waktu dekat ini. dan tampilannya nanti akan seperti blog ini.

Oke kembali ke topik.

1. Hal pertama yang harus kamu lakukan adalah masuk atau login ke akun blog kamu yang ingin kamu tampili script di artikel.

2. Kemudian pilih  menu Template dilanjutkan dengan memilih Edit HTML

3. Cari kode </head> gunakan kombinasi tombol CTRL+F untuk mempermudah menemukan kode tersebut.

4. Kemudian copy kode dibawah ini dan pastekan tepat sebelum kode </head>

<link href=' http://google-code-prettify.googlecode.com
/svn/trunk/src/prettify.css' rel='stylesheet'/>

5. Cari lagi kode </body> dan sisipkan kode dibawah ini tepat sebelum kode </body>

/*SYNTAX HIGHLIGHTER*/
<script src='https://google-code-prettify.googlecode.com/
svn/trunk/src/prettify.js'/>
<script>prettyPrint();</script> 

6. Sekali lagi cari kode ]]></b:skin> dan sisipkan kode dibawah ini sebelum kode 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 kamu highlight, Gunakan mode HTML pada editor artikel kamu dan letakan potongan script diantara tag <pre> contohnya seperti 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 teman teman blogger sekalian.

Nilai Kualitas Konten

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *