JQuery Precode Auto Width

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. 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/AVvXsEg-QDaWrRu6_vBMeaGFkRd3NkWugf4xVv40GieaFCd59vHsC3uPSevZ9EieEY39v-nYwiD8VFQtQhNMiE4O1EIA1jmGblZ3B4kokgOSGuI2Y427bUiJLMy32OyNncI7EOIC7tB9MMpAIls/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;
}

8. 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>

9. Simpan template....

10. Terakhir cara pemasangan 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>

11. Save

Related Post