Cara Membuat HighLight Kode

Habis shalat isya nyempetin diri buat buka2 email, kali aja ada email masuk. Waduh ternyata yang masuk ke inbox ada 18 mail. 11 di antaranya nanyain tutorial blogger, tapi di postingan kali ini saya jawab satu saja dulu yaaa..... "mas cara bikin warna yang bedain antara kode dengan teks yang ada di postingan bagaimana yaaa mas, trims" [dhani*****@ymail.com]. Ya kurang lebih seperti itu isi emailnya.

Jadi biar saya simpulkan pertanyaan sdr dhani***** "bagaimana cara membuat tampilan Highlight kode?"

Agar gak sekedar cuap2, yang dimaksud dengan highlight kode tu seperti berikut ini lho

<a href="http://t4belajarblogger.blogspot.com/">T4 Belajar Blogger</a>

Nah bagaimana teman-teman? Baguskan? Kalau mengenai manfaatnya sudah pasti buat membedain antara kode dan tulisan lain, kan warnanya mencolok tuh

cara bikinnya simpel ada 2 tahap, seperti biasa

a. Ngotak-ngatik kode template


1. masuk ke blogger >> tata letak >> Edit HTML >> expand widget template

2. Cari kode ]]></b:skin> dan letakkan kode berikut di atasnya

.alert { background: #999966;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

ket:

yang merah itu adalah kode background-nya nanti. Cari kode warna di sini.



3. Dah. simpan ya hasil kerjaannya...



b. yang harus dilakuin ketika mosting


Setelah ngedit2 kode template seperti di atas, gak berarti sudah selesai. Teman-teman perlu melakukan sesuatu ketika mosting kode yaitu menyisipkan beberapa kode

<p class="alert"> Kode script/HTML anda </p>

contoh: (kodenya yang mau diposting diparese dulu ya)


<p class="alert"> &lt;a href=&quot;http://t4belajarblogger.blogspot.com/&quot;&gt;T4 Belajar Blogger&lt;/a&gt; </p>



Maka hasilnya:

<a href="http://t4belajarblogger.blogspot.com/">T4 Belajar Blogger</a>

simpel bukan? ya dah itu aja dulu yaaa.....

o iya...ada postingan yang berbeda dengan masalah yang dibahas di postingan ini, namun sifatnya sama, yaitu sbg pembeda, mau tahu? klik aja di sini.





Semoga Bermanfaat []

Tags: cara membuat tampilan kode berbeda, cara mudah membuat hightlight code, hightlight HTML, membuat tampilan kode script berbeda