Rabu, 15 Agustus 2012

Cara Membuat Syntax Highlighter pada Blog






Systax Highlighter adalah fitur dari beberapa editor teks yang menampilkan teks yang berfungsi untuk menampilkan source code dari bahasa program yang ada dalam berbagai warna sesusai dengan kategori bahasa program. Fitur ini memudahkan para pemrogrammer untuk lebih mudah menganalisa program. Dalam kesempatan ini saya akan memberikan tutorial membuat Systax Highlighter.

Pertama

  1. Login ke bloger ( http://www.blogger.com/).
  2. Setelah login seperti pada gambar di bawah, maka langkah selanjutnya pilih salah satu blog yang akan di buatkan Syntax Highligter. misalnya blog yang saya ambil adalah Materi Kuliah IT (Sumba_Crew) 

    3.   Setelah memilih salah satu blog yaitu Materi Kuliah IT (Sumba_Crew), maka selanjutnya adalah
pilih opsi edit HTML. Seperti pada gambar dibawah ini :
     4.    Setelah masuk seperti pada gambar di bawah ini, maka selanjutnya cari ]]></b:skin> dan letakkan
  kode di bawah ini sebelum kode ]]></b:skin>

  Selanjutnya, Copy - Paste source Code dibawah ini :
          
     5.   Selanjutnya, Cari kode </head> dan letakkan kode di bawah ini sebelum kode </head>
 seperti pada gambar dibawah :

             Selanjutnya, Copy - paste source code di bawah ini :

      6.   Cari kode </body> dan letakkan kode di bawah ini sebelum kode </body> seperti pada gambar 
            dibawah :
              Selanjutnya, Copy - paste source code dibawah ini : 



       7.    Langkah selanjutnya adalah tinggal membuat syntax highlighter di postingan bloger kita. 

Pertama-tama kita membuat entri baru, disudut kiri form postingan ada opsi HTML. di situ kita akan membuat kotak sysntax highlighter untuk bloger. seperti pada gambar di bawah ini :

Dengan menggunakan tambahan kode di bawah ini :
<textarea name="code" class="c#" cols="60" rows="10">
KODE YANG AKAN DITAMPILKAN
</textarea>

Seperti pada gambar dibawah ini :




Sumber :
http://bloggertutorialblog.blogspot.com/2012/01/menambahkan-syntax-highlighter-blog.html  

   
 

2 komentar:

Blog.Teliti.net mengatakan...

keren sob tapi pusing masangnya ..

http://blog.teliti.net/

Materi Kuliah IT(Sumba_Crew) mengatakan...

makasih sobat ...

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More
Follow Us on Twitter!Follow Us on Twitter!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Web Hosting