JQuery precode auto width

Demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/*----------------------
JQuery precode auto width
--------------------------------------------*/
.autowidth {
    margin: 0 auto;
    width:450px;

    }
pre {
    position:relative;
    z-index:50;
    background:#fff  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLeypPzJjxBBRcfF4uG6yE8I-DFQKEkz1npS8PNvCzGYVZPPctatoTSwxD5J_MK8cvEuG5JZO3hWwOhGPLrgvfnehtCmz4Aukp1UHUwt2vhsPvTVMlz1jl22Ny5XfvxxwDXTab_OLxkw/s1600/precodebg3.gif) top left repeat;
    border:1px solid #999;
    color:#000; /* #000 untuk precodebg2 - #FFF untuk precodebg1 */
    display:block;
    font:13px/18px "Courier New",Courier,monospace;
    margin:10px 0 20px;
    overflow:auto;
    padding:18px 10px 17px;
    overflow-x:scroll;
    width: 450px;
}
pre .infocode {
    color: #999;
}

dan simpan kode berikut diatas kode </head>:

<script type="text/javascript" src="http://kangdadang.googlecode.com/files/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('pre').hover(function () {
        $(this).stop().animate({
            width: 820
        }, 300).css({
            'overflow-x': 'scroll'
        })
    }, function () {
        $(this).stop().animate({
            width: 450
        }, 300).css({
            'overflow-x': 'scroll'
        })
    });
});
</script>

simpan template....

terakhir cara pemanggilannya pada HTML :

<div class="autowidth">
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function(){
$('.acc_container').hide(); <span class="infocode">//sembunyikan atau tutup semua keranjang</span>
$('.acc_trigger').css('cursor', 'pointer'); <span class="infocode">//ubah pointer mouse saat berada pada judul</span>
$('.acc_trigger:first').addClass('active').next().show(); <span class="infocode">//Tambahkan class &quot;active&quot; untuk judul pertama, maka keranjang akan terbuka/aktif</span>
$('.acc_trigger').click(function(){ <span class="infocode">//saat judul di klik</span>
    if( $(this).next().is(':hidden') ) { <span class="infocode">//keranjang berikutnya ditutup</span>
        $('.acc_trigger').removeClass('active').next().slideUp(); <span class="infocode">//Buang semua class &quot;active&quot; pada &quot;.acc_trigger&quot; dan berikan efek slide up untuk keranjang berikutnya</span>
    $(this).toggleClass('active').next().slideDown(); <span class="infocode">//Tambahkan class &quot;active&quot; pada &quot;.acc_trigger&quot; untuk judul (trigger) yang diklik dan tambahkan efek slide down pada keranjang berikutnya</span>
}
return false; <span class="infocode">//kembali ke awal jika ada kesalahan</span>
});
});
&lt;/script&gt;
</pre>
</div>

selesai... script warna biru adalah tempat untuk menempatkan kode atau script yang diinginkan..............