Membuat Website Atau Blog Dengan Printable Template


Punya website atau blog dengan template dinamis dan mobile friendly ? Ternyata itu saja belum cukup, selain memiliki template yang dinamis, responsif dan mobile friendly mungkin kita juga perlu membuat template kita “printable” karena beberapa orang merasa perlu mencetak sebuah halaman website baik itu untuk keperluan sekolah, kuliah maupun kantor.

Biasanya template website yang perlu dibuat printable adalah website yang berisi sebuah data, misalnya nilai mahasiswa, presensi, data-data kantor, selain itu sebuah website atau blog yang berisi informasi terutama yang bersifat edukatif juga perlu memiliki printable template.

Untuk membuat template website yang bisa dicetak ( print ) kita hanya perlu menambahkan kode CSS untuk template tersebut, menggunakan cara yang sama dengan membuat template responsif kita menggunakan @media print sebagai indikator bahwa kode template tersebut hanya akan dijalankan ketika halaman website itu dicetak atau tampak pada print-preview.

Apa saja yang perlu dilakukan dalam membuat printable template ?

Biasanya yang perlu dilakukan adalah menyembunyikan elemen-elemen website tertentu terutama menu dan sidebar bila ada. Kemudian kita juga perlu menyesuaikan tampilan teks supaya memiliki lebar sesuai dengan lebar kertas dan mungkin juga sedikit memodifikasi header supaya lebih cocok untuk dicetak.

Kode CSS printable template

Kode CSS dimulai dengan indikator media yang berupa print dan kode untuk template akan ditulis di dalamnya, misalnya kita akan melakukan hal berikut :

1. Menghilangkan menu, sidebar dan footer.
2. mengubah lebar konten website sehingga memiliki lebar satu halaman penuh.
( *catatan : semua elemen tentunya berada dalam <div> dengan nama yang sesuai, misalnya untuk konten memiliki mana div id=”konten” )

@media print {

#menu, #sidebar, #footer {
  display: none;
}

#konten {
  width: 100%;
}

}

Bila konten berada di dalam <div> kontainer, maka kita juga perlu memastikan bahwa kontainer tersebut memiliki lebar 100%.

Bila kita ingin memunculkan sebuah tulisan yang sebelumnya tersembunyi, misalnya informasi atau notifikasi tambahan yang hanya muncul ketika halaman website tersebut dicetak, kita bisa memberi kode display: block; pada ID elemen yang disembunyikan. Untuk menyembunyikan atau menghilangkan sebuah elemen kita menggunakan display: none; seperti contoh di atas.


Dipublikasikan oleh theangelwing dalam kategori Blogging, Website pada tanggal Feb 19, 2016
Tags : , ,