Code Print Halaman Blog Sederhana
Biasanya, pengguna Blogger menyertakan kode javascript dalam widget HTML dengan menuliskan kode berikut
<a href='nama-file.html' onClick='window.print();return false'>Cetak</a>
Kode di atas memang berfungsi dengan baik. Akan tetapi yang dicetak tentu saja seluruh halaman blog yang tampil dalam layar browser. Tentu saja akan sangat tidak enak untuk dibaca kembali ketika halaman yang sudah dicetak tersebut ada beberapa iklan yang terpampang (apalagi kalau iklannya ...)
Untuk membuktikannya anda bisa meng-klik tautan ini dan bandingkan hasilnya dengan tombol Cetak pada sidebar di halaman blog ini
Saya mempunyai sebuah solusi untuk mengatasi hal ini. Anda bisa membuang semua elemen yang tidak perlu ketika di cetak dengan menggunakan Javascript dan Elemen XML dari Blogger. Sehingga ketika di cetak yang tampil hanyalah bagian yang berisi artikel dan judulnya saja. Hasilnya pun menjadi lebih terlihat rapi dan bersih.
Code Print Halaman Blog yang Lebih Ramah untuk dicetak
Untuk mudahnya, anda tinggal memasukkan kode yang saya sertakan berikut dalam widget HTML blog anda dan simpan.
Anda bisa melihat contoh peng aplikasiannya di blog ini (lihat sidebar di kanan)
<iframe id="page-skin-1" name="print_frame" src="about:blank" style="display:none;"></iframe>
<script type="text/javascript">
//<![CDATA[
function printDiv(elementId) {
var a = window.location + '#page-skin-1';
var b = document.getElementById(elementId).innerHTML;
window.frames["print_frame"].document.title = document.title;
window.frames["print_frame"].document.body.innerHTML = '<link rel="stylesheet" type="text/css" href="' + a + '">' + b;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
//]]>
</script>
<a href="javascript:printDiv('Blog1');"><button class="idc" >Cetak</button></a>
Untuk menambahkan widget HTML ini, anda bisa membuka Dasbor Blogger kemudian masuk ke bagian Tata Letak. Dari sana anda bisa menambahkan widget di sidebar dengan meng-klik Add widget, dan pilih HTML & Javascript. copy dan paste-kan ke bidang yang di sediakan dan klik Simpan.
Penjelasan: Kode Javascript tersebut adalah untuk menyeleksi bagian eleman mana saja yang akan kita cetak. Pada kode tersebut saya menggunakan expresi XML blogger untuk mendefinisikan halaman saat ini dengan mengambil alamat yang ada di addres bar browser. Sehingga anda tidak perlu merubah apapun dari kode tersebut.
Posting Komentar
Posting Komentar