Cara Membuat Halaman Blog Printer Friendly 8

Saya mungkin anda pernah mengalami hal yang sama , dimana ketika kita memprint halaman blog kita , gambar dan text seperti header , footer , ads , dll . Akan tampil pada halaman yang kita print dan hal ini akan sangat mengganggu kita tentunya . Masalah seperti tadi dapat kita atasi dengan menambahkan Css yang akan kita bahas pada tutorial kali ini . Css yang kita tambahkan dalam trik ini akan menghilangkan bagian yang tidak kita inginkan tadi ketika kita mengeprint halaman.


Dan adapun Cara Membuat Halaman Blog Printer Friendly adalah:

1. Masuk ke dasbor blogger blog dengan account anda klik disini

2. Pilih Opsi lainya >> Templete >> Click Edit HTML .

3. Cari kode di bawah ini gunakan Ctrl+F atau F3 untuk memudahkan pencarian.

<b:include data=’blog’ name=’all-head-content’/>

4. Tambahkan kode di bawah ini tepat dibawah kode diatas tadi.

<style media="print" type="text/css"> #header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #lower-wrapper, #footer-wrapper, #footer, #credit, .comment-form, .post-footer, #blog-pager, .post-feeds, #backlinks-container, #navbar-section, footer {display: none;} #content-wrapper, #main-wrapper, #main { width: auto !important; overflow: visible !important; float: none !important; color: black; font-size: 12pt; background: white; border: none; } #main a { text-decoration: underline; color: blue; } </style>

Keterangan:

* Kode css diatas akan menghilangkan bagian yang tidak kita inginkan pada kertas print.

* Kode tersebut juga akan membuat lebar halaman secara otomatis pada kertas print.

* Dan Kode tersebut juga akan membuat garis bawah pada link.

5. Anda juga bisa menambahkan Tombol print dimana pengguna bisa memprint halaman dengan mengklik tombol print.

I. Ikuti langkah no. 1 dan 2 diatas.

II. Kemudian Click Expand widget.

III. Cari kode di bawah ini gunakan Ctrl+F atau F3 untuk memudahkan pencarian.

<div class="post-footer"> atau <data:post.body/>

6. Kemudian copy kode di bawah ini dan pastekan di bawah salah satu kode di atas.

<b:if cond='data:blog.pageType == "item"'>
<a href="javascript:window.print()"><img  style="border:none;margin:0 6px"  src="http://cdn.printfriendly.com/pf-icon-small.gif" alt="Print this article" width="18" height="18"/>Print this article</a>
</b:if>

5. Simpan Temlete Anda.

Selesai dan selamat mencoba....