Mengatur Area Print Page Blog Dengan Media Query Printable

Media Query Printable
Salah satu tombol yang perlu di simpan di blog adalah tombol Print This Page. Dengan adanya tombol tersebut maka akan memudahkan kepada pengunjung blog untuk mem-print halaman blog untuk dibaca kemudian atau dibaca di lain waktu secara offline.

Sudah ada dua buah postingan yang saya share di Kompi Ajaib tentang cara menyimpan atau menampilkan tombol Print This Blog ini. Jika ada yang belum mengetahui tentang membuat tombol print ini silahkan simal lagi postingan-postingannya di link di bawah ini.

Baca juga:

Namun ketika kita sudah menyimpan tombol Print This Page di blog, maka perlu ada pekerjaan tambahan lagi yaitu mengatur print area jika kita hanya menginginkan area postingan saja yang diprint. Karena jika tidak kita atur, maka semua elemen blog akan muncul di halaman print seperti sidebar, komentar, dan lainnya.

Apalagi kalau ada widget yang melayang atau fixed, maka widget tersebut akan merusak tampilan bahkan menutupi area postingannya.

Sebagai contoh, di bawah ini adalah gambar print area Kompi Ajaib yang tidak diatur. Tampilannya cukup berantakan bukan? Hehehe...

print page Kompi Ajaib tanpa media query 1

print page Kompi Ajaib tanpa media query 2

Nah untuk merapihkan area print blog, kita menggunakan print media query yang fungsinya mirip dengan tag conditional kalau dalam HTML. Dengan print media query ini kita bisa mengatur CSS untuk menghilangkan elemen-elemen blog agar tidak tampil di halaman print atau untuk mengatur hanya daerah postingan saja yang tampil di halaman print.

Sebagai contoh, di bawah ini adalah tampilan halaman print Kompi Ajaib yang sudah menggunakan print media query atau media query printable. Silahkan bandingkan dengan tampilan di atas, lebih rapih bukan?

print page Kompi Ajaib media query 1

print page Kompi Ajaib media query 2

Bagaimana, tertarik untuk mencobanya? Silahkan gunakan print media query di bawah ini dan silahkan simpan di atas kode ]]></b:skin> atau </style>


@media print {
........
CSS DI SINI
........
}

Di bawah ini adalah print media query Kompi Ajaib sebagai contoh untuk pengaturan CSS untuk menghilangkan elemen-elemen blog yang tidak diinginkan pada tampilan halaman print.


@media print {
#sidebar-kanan,.paypalbox,.bungkus-title,#css-menu,.komentar,.sharing-post,.related-post,.underheader,.halaman,.post-ontop, .undermeta,#BounceToTop{ display: none !important; }
#main-wrapper{width:100%;}
.post-body{padding:0;}
#judul-post,.breadcrumbs,.postmeta{margin:0}
}

Karena tiap-tiap blog memiliki kode-kode CSS yang berbeda-beda, silahkan sesuaikan dengan kode CSS dari blog Anda. Sebagai demonya silahkan coba klik pada tombol print di bawah postingan ini.

Sumber: http://www.w3schools.com/css/css_mediatypes.asp

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments