Menambahkan Tombol Print yang Ramah Printer di Blog - KnoAcc.Org

Sebuah blog yang baik akan menyediakan sebuah menu/tombol agar pembaca atau pengunjungnya dapat mencetak halaman blog-nya untuk maksud dokumentasi. Jika blog/website tersebut mendukung bahasa PHP atau ASP, tentu akan lebih baik dalam mengorganisasi tampilan blognya ketika di cetak. Lain cerita jika anda menggunakan layanan blog gratisan seperti Blogger yang menyediakan dukungan HTML dan Javascript saja.

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.