Tips Blogging | Cara Membuat Textarea Untuk Try It Kode Html Seperti W3schools

Halaman Try It kode seperti pada website w3school bisa anda pasang di bawah halaman post dengan menggunakan blogspot. Memang textarea yang bisa diedit seperti ini akan sangat bermanfaat untuk website yang mempunyai konten tutorial pemrograman.

Cara Membuat Textarea Untuk Try It Kode Html Seperti W3schools - Kali ini kabelantena akan coba berbagi catatan tentang informasi tips yang telah kabelantena dapat mengenai Cara Membuat Textarea Untuk Try It Kode Html Seperti W3schools.

Halaman Try It kode seperti pada website w3school bisa anda pasang di bawah halaman post dengan menggunakan blogspot. Memang textarea yang bisa diedit seperti ini akan sangat bermanfaat untuk website yang mempunyai konten tutorial pemrograman. Dengan textarea ini pengunjung bisa langsung mencoba atau mempraktikkan kode yang dia pelajari tanpa harus membuat halaman baru atau yang ribet-ribet.

Untuk membuatnya kita menggunakan CSS, Javascript dan HTML, pada kode yang akan kabelantena bagi masih sederhana, barangkali anda bisa memodifikasinya itu akan lebih baik. Berikut ini Cara Membuat Textarea Untuk Try It Kode Html Seperti W3schools.

 <style type="text/css">  
   textarea, iframe {  
     border: 2px solid #ddd;  
     height: 500px;  
     width: 100%;    
   }  
 </style>  
  <h3>Silakan Lakukan Percobaan</h3>  
  <p>  
   <table width="100%" border="0" cellspacing="5" cellpadding="5">  
   <tr>  
     <td width="50%" align="left" scope="col">  
       <input onclick="runCode();" type="button" value="Jalankan Kode">  
     </td>  
 <td width="50%" align="left" scope="col"> Hasil Tampilan</td>  
   </tr>  
   <tr>  
     <td>   
       <form>  
         <strong>Tulis Kode Di sini</strong>  
         <textarea name="sourceCode" id="sourceCode">  
 &lt;!DOCTYPE html&gt;    
  &lt;html lang="en"&gt;    
  &lt;head&gt;    
  &lt;title&gt;Contoh Halaman Bootstrap&lt;/title&gt;    
  &lt;meta charset="utf-8"&gt;    
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;    
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;    
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;    
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;    
  &lt;/head&gt;    
  &lt;body&gt;    
  &lt;div class="container-fluid"&gt;    
  &lt;h1&gt;Contoh Halaman Bootstrapku&lt;/h1&gt;    
  &lt;p&gt;Silakan Minimize browser untuk melihat hasilnya.&lt;/p&gt;    
  &lt;div class="row"&gt;    
   &lt;div class="col-sm-4" style="background-color:lavender;"&gt;.col-sm-4&lt;/div&gt;    
   &lt;div class="col-sm-4" style="background-color:lavenderblush;"&gt;.col-sm-4&lt;/div&gt;    
   &lt;div class="col-sm-4" style="background-color:lavender;"&gt;.col-sm-4&lt;/div&gt;    
  &lt;/div&gt;    
  &lt;/div&gt;    
  &lt;/body&gt;    
  &lt;/html&gt;    
 </textarea>  
       </form>  
     </td>  
     <td><strong>Tampilan Kode</strong><iframe name="targetCode" id="targetCode"></iframe></td>  
   </tr>  
 </table>   
  </p>  
 <script type="text/javascript">  
       function runCode()  
       {  
         var content = document.getElementById('sourceCode').value;  
         var iframe = document.getElementById('targetCode');  
         iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;  
         iframe.document.open();  
         iframe.document.write(content);  
         iframe.document.close();  
         return false;  
       }  
       runCode();  
     </script>