Untuk membuat sebuah blog yang berisikan semacam tutorial Blogger, kita tentunya diharuskan juga untuk bisa memasukkan script atau pun code-code ke dalam sebuah tulisan di blog kita tersebut. Iyaa pasalnya, untuk bisa membuat tulisan itu kita kan emang sudah pasti perlu memberikan contoh code yang dibutuhkan.

Tapi, masalahnya mungkin masih ada beberapa yang terkadang belum tahu caranya. Ini bisa saja dikarenakan saat kita ingin memasukkan suatu code HTML atau sejenisnya ke dalam tulisan yang terjadi malah ERROR atau bisa-bisa code tersebut malah terdeteksi dan tampil bukannya sebagai script code melainkan sebagai source/hasilnya. Pernah mengalami kejadian seperti ini gak sob?? 😀

Berikut ini saya mau share cara yang biasa saya gunakan. Karna kebetulan beberapa waktu lalu saya juga sempat belajar memasukkan script code ke dalam salah satu tulisan saya yang sejenis Tutorial Blogger. Caranya, sebenarnya sangat simple sekali kok. Yuuk simak aja penjelasannya baik-baik yaa. ^_^

TIPS: Cara Memasukkan Script Code ke dalam Postingan Blogger

Pertama, copy (ctrl + C) script code yang diinginkan. Biasanya saya menggunakan Notepad++ saat mengedit tampilan , jadi tentu saya terlebih dulu akan membuka file code yang ingin di share baru kemudian meng-copy nya dari Notepad++. Saran saya, jangan biasa langsung meng-copy dari blog, word, atau yang lainnya gitu sob. 🙂

Kedua, buka dashboard sahabat lalu klik New Post. Disana biasanya akan ada pilihan Compose dan HTML. Pindahkan ke tampilan HTML lalu ketikkan code seperti ini:

<pre> … </pre>

Lalu pindahkan lagi ke tampilan Compose seperti biasanya.

Ketiga, paste (ctrl + V) script code yang ingin ditampilkan. Timpa saja tulisan … dengan code yang ingin dimasukkan tadi. Selesai. ^_^

Simple kan?? Nah, sekarang saya akan coba jelaskan sedikit tentang cara diatas yaa. Biar sahabat lebih paham menggunakannya entar. Cara ini hanya memanfaatkan fungsi dari tag PRE atau dalam penulisannya <pre> … </pre>.

Saya agak susah mendefinisikannya secara pasti. Jadi sahabat boleh searching sendiri aja lewat Mbah Google. Karna memang ada banyak sekali macam-macam tag yang bisa kita gunakan dan tentu fungsinya pun jelas pasti berbeda-beda pula. Salah satu contohnya yang tidak asing seperti tag BOLD <b> … </b>.

Artinya, setiap yang diapit oleh tag bold ini nantinya akan tampil dengan font yang tebal. Paham kan?? 😀

Begitu juga dengan tag pre ini, didalamnya sudah ada semacam pengaturan default tertentu. Itulah sebabnya jika kita menuliskan code diantara tag pre, nantinya tulisan code tersebut akan tampil berbeda kalau dibandingkan dengan tanpa menggunakan tag pre.

Jadi sebenarnya bisa saja sih kita langsung memasukkan code tanpa tag ini. Tapi ingat jangan paste kan code nya di tampilan HTML. Itu dikarenakan kalau kita masukkan code ke dalam HTML dia akan langsung bekerja sesuai dengan fungsi dari code nya. Atau istilahnya terbaca sebagai PERINTAH sehingga yang tampil nantinya pun adalah hasil dari code tersebut. Kalau kita paste di tampilan Compose, nantinya code itu akan di parse kan secara otomatis sehingga akan terbaca sebagai tulisan biasa.

Keuntungan menggunakan tag PRE ini adalah kita jadi bisa mengatur tampilan dari code-code tersebut. Sehingga dia tidak tampak sama seperti tulisan yang biasanya. Tentu ini akan lebih memudahkan pembaca untuk membedakan yang mana tulisan biasa dan mana bagian dari script code.

Caranya yaitu dengan menambahkan sedikit pengaturan pada CSS template yang kita gunakan. Saya menggunakan style berikut ini:

pre {
 font-family:Monospace, Courier New, PT Sans Narrow, Arial; 
 line-height:30px; 
 border-left: 5px solid #999; 
 margin: 0 0 0 20px;
 background-color:#eee; 
 font-size:14px; 
 overflow:auto; 
 padding: 15px 15px 10px;
 }

Silahkan tambahkan style CSS tersebut pada template sahabat, yaitu diantara tag sesudah <b:skin><![CDATA[/* atau sebelum ]]></b:skin>

Supaya sahabat semakin lebih jelas lagi saya akan tampilkan beberapa contoh hasil dari memasukkan code ke dalam tulisan dengan cara yang berbeda.

CONTOH 1
(cara biasa)
Script code yang langsung diinput pada tampilan compose

<link href=’http://fonts.googleapis.com/css?family=PT+Sans+Narrow’ rel=’stylesheet’ type=’text/css’/>
<link href=’https://plus.google.com/112863347175613386598′ rel=’me’/>
<link href=’https://plus.google.com/112863347175613386598′ rel=’publisher’/>

<script>$(“img[src=’http://img1.blogblog.com/img/openid36-rounded.png’]”).attr(‘src’, ‘http://2.bp.blogspot.com/-Q29MnmeH730/UfvC-hbioRI/AAAAAAAACW4/CY9pKQfhtCQ/s125/Wakdir-malu.png’).ssyby(‘blank’)</script>

CONTOH 2
(cara yang salah)
Script code yang diinput langsung pada tampilan HTML
Tidak kelihatan kan? 🙂
CONTOH 3
(cara yang dianjurkan)
Script code yang menggunkan cara tag PRE tanpa CSS
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>
    <link href='https://plus.google.com/112863347175613386598' rel='me'/>
    <link href='https://plus.google.com/112863347175613386598' rel='publisher'/>
<script>$("img[src='http://img1.blogblog.com/img/openid36-rounded.png']").attr('src', 'http://2.bp.blogspot.com/-Q29MnmeH730/UfvC-hbioRI/AAAAAAAACW4/CY9pKQfhtCQ/s125/Wakdir-malu.png').ssyby('blank')</script>
CONTOH 5
(cara paling keren)
Script code yang menggunkan cara tag PRE dengan tambahan CSS
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>
    <link href='https://plus.google.com/112863347175613386598' rel='me'/>
    <link href='https://plus.google.com/112863347175613386598' rel='publisher'/>
<script>$("img[src='http://img1.blogblog.com/img/openid36-rounded.png']").attr('src', 'http://2.bp.blogspot.com/-Q29MnmeH730/UfvC-hbioRI/AAAAAAAACW4/CY9pKQfhtCQ/s125/Wakdir-malu.png').ssyby('blank')</script>

Sebelumnya sahabat juga perlu tahu satu cara lagi nih. Karena penggunaan Tag PRE ini juga mempunyai kekurangan yaitu script code yang kita tulis terlalu panjang dalam satu baris biasanya dia tidak akan turun ke bawah.

Jadi kalau lebih panjang dari lebar blog kita, tentunya nanti akan ada sebagian tulisan yang tidak terlihat. Tapi tenang jangan khawatir sahabat, saya masih punya solusi untuk mengatasinya kok. Mungkin bagi sebagian sahabat kekurangan yang satu ini dianggap sebagai suatu masalah. Kalau saya sih tidak. Karna emang sih rasanya kurang nyaman juga melihat tampilan seperti itu.

Sahabat bisa mengganti style CSS tag pre diatas dengan alternatif yang berikut ini.

 pre {
 font-family:Monospace, Courier New, PT Sans Narrow, Arial; 
 line-height:30px; 
 border-left: 5px solid #999; 
 margin: 0 0 0 20px;
 background-color:#eee; 
 font-size:14px; 
 display:block;
 white-space:normal;
 padding: 15px 15px 10px;
 }

Masih ingatkan cara memasukkan style CSS ini ke dalam template sahabat?? Coba scroll dan lihat penjelasan diatas sebelumnya yaa. Dan berikut ini dia tampilannya akan menjadi seperti ini:

CONTOH 6
(cara keren)
Script code yang menggunkan cara tag PRE dengan tambahan CSS alternatif
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>
    <link href='https://plus.google.com/112863347175613386598' rel='me'/>
    <link href='https://plus.google.com/112863347175613386598' rel='publisher'/>
<script>$("img[src='http://img1.blogblog.com/img/openid36-rounded.png']").attr('src', 'http://2.bp.blogspot.com/-Q29MnmeH730/UfvC-hbioRI/AAAAAAAACW4/CY9pKQfhtCQ/s125/Wakdir-malu.png').ssyby('blank')</script>

Oke sob, sekian dulu yaa sharing kita hari ini. Udah cukup panjang juga nih tulisannya. Tapi gak papah lah yaa. Yang penting sahabat bisa jadi semakin paham dengan penjelasan saya. Sekarang tinggal tergantung sahabat masing-masing mau menggunakan cara yang mana. Iyaa terserah.

Untuk lebih memahami mengenai istilah-istilah HTML dasar, saya sarankan sahabat Chaidir.Web.ID membaca penjelasan yang berjudul Belajar HTML untuk Pemula ini terlebih dahulu.

Mudah-mudahan cara diatas bisa bermanfaat buat sahabat yang membutuhkannya. Kalau emang masih ada yang kurang ngerti boleh tinggalkan komentar dibawah tulisan ini aja. Saya pasti bantu sebisanya deh. 😀

UPDATE!!
Sekarang situs ini sudah pindah dari blogspot ke wordpress, untuk beberapa contoh diatas mungkin hasilnya jadi kelihatan berbeda. Tapi jika sahabat praktekkan di blogspot, saya yakin caranya masih ampuh.

Semangat Berkarya!! Salam Blogger..