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

Print mencetak sebagian halaman blog

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
   }
}

Untuk setingan lainnya silahkan anda sesuaikan sesuai dengan minat anda dengan menambahkan CSS didalam @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>

Dengan menambahkan class 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.

Kesimpulan :

Tambahkan class 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.

Print Demo

Share this post