Fasilitas print pada blog memang sangat penting, gunanya untuk memudahkan pengunjung dalam mencetak halaman pada blog kita. Akan tetapi kita sebagai Admin blog kadang kurang memperhatikan hal tersebut karena sebagian besar blog yang saya temui, ketika saya coba mencetaknya semua elemen blog ikut tercetak.
Untuk membuat fasilitas print sebagian halaman misalnya hanya bagian posting dapat dengan mudah kita atur hanya dengan menambahkan CSS dan Class. Untuk lebih jelasnya silahkan simak langkah-langkah mencetak sebagian halaman blog.
Membuat button print.
Cara yang paling sederhana bisa anda tambahkan kode ini.
<a class="button-print" href="javascript:window.print()" title="Cetak halaman ini" > Print</a>]]></b:skin>..button-print {
border: #2e2e2e solid 1px;
float: right;
background: #292929;
padding: 3px 5px;
border-radius: 3px;
color: #888;
margin: 10px 0 0;
}Pengaturan print area
Selanjutnya mengatur print area (mengatur bagian halaman cetak/print).
1. Tambahkan CSS di bawah ini sebelum ]]></b:skin>.
@media print{
.no-print {
display:none !important
}
}
@media print {css}.
2. Menambahkan Class no-print pada elemen yang tidak ingin tercetak ketika di print.
contoh
Anda hanya ingin hanya bagian posting blog saja yang tercetak ketika para pengunjung berniat untuk mencetak blog kita.
Pertama saya asumsikan bahwa struktur blog anda secara garis besar terdiri dari header, main-wrapper (Bagian Posting Blog) dan sidebar:
<header class='header-wrapper no-print' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Info [K-moe] (Header)' type='Header'>
</b:widget>
</b:section>
</header>
<b:section class='main-wrapper' id='main-wrapper' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
</b:section>
<aside class='sidebar no-print' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<b:section class='sidebarkiri' id='sidebar-right' showaddelement='yes'>
</b:section>
</aside>no-print seperti contoh di atas, maka bagian yang tercetak hanya bagian main-wrapper / posting blog saja tidak terkecuali elemen-elemen yang berada di dalam main-wrapper akan ikut tercetak.no-print pada setiap elemen yang tidak ingin tercetak ketika di print.Untuk melihat hasilnya coba gunakan terlihat peramban Google Chrome yang memiliki komunikasi pencetakan halaman yang berbeda dengan peramban lainnya / Google chrome memiliki fasilitas print preview.
Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..