jPreCode Auto Width - Tampilkan Kode pada Artikel Blog

Bismillah. jPreCode Auto Width atau jQuery Pre Code Auto Width digunakan untuk menampilkan kode-kode bahasa pemrograman seperti HTML, XML, Javascript, CSS, C, C++, ASM, HEX, Visul Basic, Delphi, dan lain-lain pada artikel blog. Ketika pembaca mengarahkan pointer mouse ke area kode maka lebar area kode akan bertambah secara otomatis dan ketika pointer mouse meninggalkan area kode maka lebar area kode akan kembali seperti sebelumnya. Hal ini sangat bermanfaat bagi para blogger dan web desainer yang suka berbagi source code didalam artikel yang dibuatnya serta mempermudah para pembaca untuk membedakan antara artikel dengan source code.

Demo & source code jPreCode AutoWidth

Integrasi jPreCode Auto Width pada Template Blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

pre {
position:relative;
z-index:50;
background:#212121 url(precodebg1.gif) top left repeat; 
border:1px solid #999;
color:#FFF; /* #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;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<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>

Langkah 7
Simpan template dan lanjutkan membacanya...

Integrasi jPreCode Auto Width pada Artikel

Langkah 8
Buat suatu artikel dan masukan source code yang ingin disertakan, contoh seperti kode jQuery dibawah ini:

<script type="text/javascript">
$(document).ready(function(){

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

});
</script>

Langkah 9
Kemudian tambahkan/apitkan tag <pre></pre> pada kode diatas, sehingga seperti dibawah ini:

<pre>
<script type="text/javascript">
$(document).ready(function(){

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

});
</script>
</pre>

Catatan: Setiap source code yang ingin ditampilkan harus diapit oleh tag <pre></pre>
Langkah 10
Terbitkan artikel dan preview artikel anda...

Keterangan:
Perhatikan kode-kode (dari atas ke bawah) yang diblok pada langkah 4 dan langkah 6 :

• background:#212121 url(URL/precodebg1.gif) top left repeat; : ubah warna background dan alamat gambar background sesuai keinginan anda. Download source code jPreCode Auto Width dan ekstrak file hasil download kemudian upload file gambar background tersebut. Terdapat dua pilihan warna background, precodebg1.gif untuk warna latar gelap dan precodebg2.gif untuk warna latar cerah.
• color:#FFF; ubah nilai #FFF menjadi #000 agar warna huruf berubah dari putih menjadi hitam.
• width: 450px; untuk mengatur lebar kode area sebelum pointer mouse masuk ke area kode. Nilai 450 harus sama dengan nilai 450 pada kode yang ada di langkah 6.
• width: 820 adalah lebar area kode maksimal dalam pixel ketika pointer mouse berada di dalam area kode.
• width: 450 adalah lebar area kode minimal dalam pixel ketika pointer mouse berada di luar area kode.

Untuk para master blog dan master web desainer mohon ma'af jika artikelnya terlalu katro dan atau ketinggalan jaman. Artikel ini tidak cocok untuk para master yang sudah banyak makan garam di dunia blogging code dan web code.

Selamat mencoba dan semoga berhasil. Happy Blogging :)