Cara Menampilkan Source Code di halaman Artikel Postingan Blog

Teman-teman sekalian pasti pernah atau sering melihat sebuah tutorial di blog, misalnya cara membuat/memasang widget Recent Comment, Artikel Populer, dll yang disertai sebuah source code atau script HTML, CSS, JavaScript yang nantinya akan dipasang di widget tersebut.

Misalnya seperti ini contoh dibawah ini :

1:   .w2b_recent_comments li span{margin-top:4px;color: #000000;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}  
2:  </style>  
3:  <script type="text/javascript">  
4:  //<![CDATA[  
5:    // Recent Comments Settings  
6:    var  
7:   numComments = 5,  
8:   showAvatar = true,  
9:   avatarSize = 30,  
10:   roundAvatar = false,  
11:   characters = 30,  
12:   defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",  
13:   hideCredits = true;  
14:  //]]>  
15:  </script>  
16:  <script   

Nah.. bagaimana cara membuatnya? untuk membuat SyntaxHighlighter (nama istilahnya) tersebut ternyata caranya sangat mudah. mari kita bahas yuk..

Sebenarnya pihak blogger sudah menyediakan fasilitas ini hanya saja mungkin tidak banyak yang tau atau tampilannya yang memang kurang di sukai. caranya begini, pada saat kita akan memposting sebuah artikel diblog coba lihat di sebelah kanan disitu ada menu “Setelan Entri” dan di paling bawah ada menu “Pilihan”.  disitu ada tertulis “Tunjukan HTML apa adanya” maksudnya apabila kamu menulis sebuah source code di halaman posting maka akan muncul seperti apa adanya. tapi akan terjadi sebaliknya jika kamu memilih “Tafsirkan HTML yang di ketik” (Lihat gambar dibawah ini).

Coba lihat hasilnya……. jreeenggg…  tapi jangan khawatir apabila kamu kurang puas coba kita buat yang lebih baik dari itu.. ayo kita bahas di bawah ini bagaimana cara membuatnya dengan cara yang lain.

1. Klik link berikut http://codeformatter.blogspot.co.id/
2. Lihat gambar dibawah ini.
   
   
   
3. Pastekan Source Code mu kedalam kotak "Paste Here Your Source Code"  tersebut.
4. Pilih jenis model tampilannya saat tampil di artikel kamu nanti.
5. Setelah selesai klik "Format Source Code".
   
   Jika sudah kamu lakukan langkah diatas, mari kita lihat ke langkah pembahasan selanjutnya. (lihat gambar dibawah ini).
   
   
   
   
6. Lihat hasil tampilannya di kotak "Preview Of Formatted Source Code".jika kamu kurang merasa puas dengan hasil tampilannya, ulangi mulai dari langkah 4(empat).
7. Jika sudah kamu rasa cocok, copy kan semua codenya yang ada di kotak "Copy Formatted Source Code" ke halaman postingan artikel kamu.
   
   
   
8. Pilih HTML di halaman postingan blog kamu, kemudian pastenya Source code tadi ke dalam area HTML tersebut..

Nah, selamat mencoba ya teman-teman, semoga artikel ini bisa menjadi solusi mengatasi permasalahan bagaimana caranya Menampilkan Source Code di halaman Artikel Postingan Blog. 

Share Artikel ini jika menurut kamu bermanfaat bagi orang lain

Tweet