..:: Arian-Cyber ::..: Menampilkan Script atau Coding pada Blog

Monday 14 October 2013

Menampilkan Script atau Coding pada Blog

09:20 | Posted by Arian |

Awalnya saya bingung, malah tidak tahu sama sekali bagaimana cara menampilkan script atau coding di postingan blog. Saya coba pakai object Textarea bisa tampail tapi bisa diedit juga ha ha masa iya coding paten yang saya buat bisa langsung di manupulasi

Berikut saya berikan contoh menampilkan Script menggunakan Textarea.

<!doctype html public "-//W3C//DTD HTML 4.0 //EN"> 
<html>
<head>
<title>..:: Konstanta ::..</title>
</head>
<body>
<?php

// konstanta Judul="Hitung Luas Lingkaran"
define ("Judul", "Hitung Luas Lingkaran");

// konstanta PHI=3.14
define ("PHI", 3.14);
echo Judul;
$r=10;
echo "
Jari-jari : $r
n";
$luas=PHI * $r * $r;
echo "Luas Lingkaran = $luas";
?>
</body>
</html>

Pada contoh diatas saya menggunakan Object Textarea, coba anda klik dan edit pasti bisa wkwkwk, tapi kalo di Refresh kembali browsernya maka Script tidak akan berubah dan masihi tetap pada aslinya.

Sekarang bandingkan dengan yang ini....

<!doctype html public "-//W3C//DTD HTML 4.0 //EN"> 
<html>
<head>
<title>..:: Konstanta ::..</title>
</head>
<body>
<?php

// konstanta Judul="Hitung Luas Lingkaran"
define ("Judul", "Hitung Luas Lingkaran");

// konstanta PHI=3.14
define ("PHI", 3.14);
echo Judul;
$r=10;
echo "<BR>Jari-jari : $r<BR>n";
$luas=PHI * $r * $r;
echo "Luas Lingkaran = $luas";
?>
</body>
</html>

Sudah terlihat jelas kan perbedaanya, berikut saya akan membahasnya tentang bagaimana cara membuatnya dan menerapkannya ke blog atua postingan sobat disaat ingin menampilkan sebuah Script atau Codes.

Dimulai dari yang simple dulu yaitu menggunakan object Textarea.

Secara default penggunaan Textarea adalah seperti ini. <textarea cols="5" rows="5" style="height: 181px; margin: 2px; width: 593px;"> Script anda taruh di sini ! </textarea>, contohnya bisa anda lihat langsung pada contoh diatas.
Selanjutnya adalah cara penerapannya, pada halaman editor atau halaman edit entri di pojok kiri atas ada pilihan Compose dan HTML bila ingin menyisipkan Script atau Coding di sela-sela paragraf anda pilih HTML dan letakkan codingnya disana antara <div>.....</div>. Lihat point pertama.

Berikutnya menampilkan Script dengan cara yang agak kurang simple yaitu menempelkan atau Embed Code ke HTML Template.

1. Pertama masuk ke Dasbor blogger anda, bisa Klik Di Sini !
Setelah masuk ke Dashbor pilih Template, pilih Edit HTML. Tidak usah takut akan salah atau ada yg error saat kita masuk ke Edit HTML ini, kalau merasa takut dan ragu anda back-up dulu template anda.
Cari tag head </head>, supaya lebih cepat dan akurat pencariannya gunakank fasilitas Find Code. Tekan Ctrl+f.
Bila sudah ketemu </head> letakkan Coding berikut. Letakkan tepat diatas </head>.

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>     <script language='javascript'>
window.onload = function () {
    dp.SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
    dp.SyntaxHighlighter.BloggerMode();
}
</script>
</pre>

Setelah menempelkan Codingnya silakan Simpan.
Selanjutnya adalah cara penerapannya, pada halaman editor atau halaman edit entri di pojok kiri atas ada pilihan Compose dan HTML bila ingin menyisipkan Script atau Coding di sela-sela paragraf anda pilih HTML dan letakkan coding ini disana antara <div>.....</div>.

<pre class="brush: ruby" name="code"># Script anda di sini !</pre>

Finish !

Sekarang silakan terapkan dan coba pada postingan anda, bisa menggunakan object Textarea atau Embed Code. Kalau saya lebih ke Object Textarea saja karena lebih ringan saat loading timenya

Selesai sudah pembahasan mengenai tips ini, silakan berkomentar dengan baik. Apabila ada kesalahan pada penulisan atau pembahasan saya, mohon dibenarkan karena saya masih tahap belajar. Semoga bermanfaat.

/* Life runs on Codes */

//.D

..:: Arian-Cyber ::..

Being Bad Is Good, But Being Good Is Better !!!

Welcome

Search

Category

Popular Post

Menampilkan Script atau Coding pada Blog

0 comments:

Post a Comment

Me on G+

Colleger

Blog Arsive

Translate

Visitor Total

This Yours