Menulis Javascript dalam Blog Post

Aslinya kode seperti ini

    <script type="text/javascript">  
            $(function()   
            {  
                $("#butToggle").click(function()   
                {  
                    $('#dvt').toggle(1000);  
                });  
            });   
    </script>  

Untuk dapat tampil dalam blog post maka harus ditulis dalam satu baris

<script type="text/javascript">$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});</script>

kode untk css atau style aslinya seperti ini :

    <style type="text/css">  
            #dvt  
            {   
             width: 200px;  
             height: 100px;  
             border: solid 1px black;  
             background-color:LightGrey;  
             text-align:center;   
             display:none;             
            }       
    </style>  

ini tidak akan berkerja dalam blog post jadi kita akan menuliskannya dalam satu baris seperti ini :

<style type="text/css">#dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}</style>

perhatikan tanda untuk akhir setiap baris dan hasil akhir dari gabungan javascript dan style diatas akan tampak seperti ini

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>  
<script type="text/javascript">$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});</script>  
  
<style type="text/css">#dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}</style>  
  
<div id="dvt">This works on blogger</div>  
<button id="butToggle">Toggle</button> 

dan ini hasilnya

This works on blogger

jangan lupa untuk tambahan kita juga dapat meletakkan reference dari jquery juga dengan menuliskan secara inline atau satu baris seperti ini misalnya  :

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

Suka artikel ini? Bagikan :

FacebookGoogle+