Ads Banner

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

Print/Mencetak Sebagian Halaman Blog dengan Menambahkan Class No-print
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
   }
}
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/Save

Blok kemudian tekan tombol 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.!
Share This :

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar