Print/Mencetak Sebagian Halaman Blog dengan Menambahkan Class No-print

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>
Tempatkan kode diatas di tempat yang anda suka. Kemudian tambahkan CSS di bawah ini tepat sebelum ]]></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.