Senin, Maret 17, 2014

Cara Menampilkan Baris Kode HTML, CSS Dan JavaScript Pada Postingan Blogspot

Kawan-kawan sesama bloger yang memiliki blog dengan tema seputar tips atau tutorial IT, seringkali dalam postingan harus memasukkan baris-baris kode pemrograman sebagai bahan referensi bagi pembaca blog. Seperti tutorial pemrograman web yang banyak menggunakan baris-baris kode HTML, PHP, atau JavaScript yang sering menjadi bahan untuk di-share kepada sesama bloger.

Untuk menuliskan baris-baris kode-kode tersebut dalam postingan blogspot dengan tampilan yang rapi dan cantik, RoyAndika.com akan membagikan salah satu cara menampilkan baris kode HTML, PHP dan JavaScript pada postingan Blogspot. Dan tidak hanya untuk bahasa HTML, CSS atau JavaScript aja, kawan juga bisa menuliskan baris bahasa PHP, SQL, dan CSS. Dan semua tampilan baris kode yang terdapat dalam postingan ini atau postingan lain di RoyAndika.com merupakan hasil dari cara ini.

Adapun keuntungan yang kawan-kawan peroleh dari cara ini antara lain:
  1. Lebih rapi
  2. Lebih menarik
  3. Mudah dibaca
  4. Terdapat nomor baris yang memudahkan pencarian
  5. Mudah dipasang pada blogspot
  6. Ringan dan tidak membebani blog
Untuk memasangnya pada blogspot, pertama kawan harus melakukan pengeditan pada template design blogspot. Caranya masuk ke Dashboard - Template.
Cara Menampilkan Baris Kode HTML, CSS Dan JavaScript Pada Postingan Blogspot
Sebelumnya lakukan backup template agar bila kawan gagal atau terjadi kesalahan pada saat editing template, dapat mengembalikan tampilan blog seperti kondisi awal. Klik tombol Back Up / Restore (di kanan atas), dan silahkan download template dalam format XML.
Cara Menampilkan Baris Kode HTML, CSS Dan JavaScript Pada Postingan Blogspot
Setelah melakukan back up, klik tombol Edit HTML. Lalu tepat diatas kode berikut:
</head>
kawan copy-pastekan kode berikut (dibawahnya):
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'></script>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'></script>
<link type='text/css' rel='stylesheet' href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css'/>
<script type='text/javascript'>SyntaxHighlighter.all();</script>
Lalu klik tombol Save. Sekarang, kawan sudah bisa membuat postingan baru dan setiap kode yang ingin kawan cantumkan harus dengan format berikut:
<pre class='brush: js;'>Tulis baris kode HTML, CSS atau JavaScript disini</pre>
Jangan lupa untuk menuliskan baris kode dalam mode HTML.
Demikianlah catatan cara menampilkan baris kode HTML, CSS dan JavaScript pada postingan blogspot, semoga dapat membantu kawan-kawan RoyAndika.com.
Share:

0 comments:

Posting Komentar