Menyembunyikan Teks Saat Di Print

22 04 2010

Untuk menyembunyikan teks saat akan di print dari halaman browser, kita dapat menggunakan CSS sebagai solusinya.

Langkah yang pertama ada dengan membuat definisi bahwa css ini ditujukan saat halaman dicetak (print) dan bukan saat dibuka (screen), kita dapat melakukan ini dengan perintah:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Perhatikan !!! media yang digunakan adalah print dan bukan screen.

Langkah selanjutnya adalah menentukan bagian mana yang akan kita hidden saat di print, kita dapat menyembunyikan teks dengan perintah display: none, untuk mempermudah teks mana yang bisa di print dan tidak, maka kita dapat membuat 2 buah div yang berbeda, misalkan print dan noprint.

Berikut ini contoh program selengkapnya:

<html>
<head><title>No Print</title>
<style type="text/css"> @media print {
#noprint { display: none; }
#print { display: block; } }
</style>
</head>
<body>
<div id="noprint">
<p>
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
cetak saya saja yaaaaaaaaa
</p>
</div>
<div id="print">
<p>
jangan dong...
jangan dong...
jangan dong...
jangan dong...
jangan dong...
jangan dong...
jangan dong...
jangan dong...
jangan dong...
jangan dong...
</p>
</div>
</body>
</html>

Untuk mengetahui hasilnya, buka file tersebut menggunakan browser kesayangan anda, kemudian coba pilih menu File – Print Preview.

Semoga dapat membantu…. πŸ˜‰


Aksi

Information

5 responses

22 04 2010
wahjusaputro

mantap gan, lanjutkan dengan tips lain. tips kuliner juga boleh, juragan hobi makan tho hehehe… aku rasa nggak sulit posting kuliner di tunggu lho.

22 04 2010
cluetux

maaf gak sempet p.dosen, iki juga iseng2 pas kebetulan web hosting lagi trouble. p.wahyu juga di share dong ilmunya biar bermanfaat bagi sesama heee…

23 04 2010
Nur

Cen mantep koq mas ahyo ki
Lanjutgan…

23 04 2010
cluetux

halah… mung ra sengojo koq, pahatlah ilmu dengan menuliskannya, mudah2an bermanfaat saja he… πŸ˜‰

23 04 2010
Hari Setiawan

Mantap Om Tutorialnya πŸ˜€

Keep Post yah… πŸ˜€

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s




%d blogger menyukai ini: