Mengatur Area Print Page Blog Dengan Media Query Printable
Salah satu tombol yang perlu di simpan di blog yakni tombol Print This Page. Dengan adanya tombol tersebut maka akan memudahkan kepada pengunjung blog untuk mem-print halaman blog untuk dibaca lalu atau dibaca di lain waktu secara offline.
Sudah ada dua buah postingan yang aku share di Kompi Ajaib perihal cara menyimpan atau menampilkan tombol Print This Blog ini. Jika ada yang belum mengetahui perihal menciptakan tombol print ini silahkan simal lagi postingan-postingannya di link di bawah ini.
Baca juga:
Namun saat kita sudah menyimpan tombol Print This Page di blog, maka perlu ada pekerjaan perhiasan lagi yaitu mengatur print area kalau kita hanya menginginkan area postingan saja yang diprint. Karena kalau tidak kita atur, maka semua elemen blog akan muncul di halaman print ibarat 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 yakni gambar print area Kompi Ajaib yang tidak diatur. Tampilannya cukup acak-acakan bukan? Hehehe...
Nah untuk merapihkan area print blog, kita memakai print media query yang fungsinya ibarat dengan tag conditional kalau dalam HTML. Dengan print media query ini kita dapat mengatur CSS untuk menghilangkan elemen-elemen blog semoga tidak tampil di halaman print atau untuk mengatur hanya tempat postingan saja yang tampil di halaman print.
Sebagai contoh, di bawah ini yakni tampilan halaman print Kompi Ajaib yang sudah memakai print media query atau media query printable. Silahkan bandingkan dengan tampilan di atas, lebih rapih bukan?
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 yakni print media query Kompi Ajaib sebagai pola 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 mempunyai kode-kode CSS yang berbeda-beda, silahkan sesuaikan dengan isyarat 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
Sumber https://www.kompiajaib.com/
0 Response to "Mengatur Area Print Page Blog Dengan Media Query Printable"
Posting Komentar