Menampilkan Tombol Print Pada Halaman Weblog

Tampilkan Tombol Print Pada Halaman Weblog - Membuat tombol print pada halaman weblog, halaman blog yang berisi tips dan trik biasanya sering dicopy ulang untuk mempermudah mengingat dan apabila terjadi permasalahan yang sama bisa dibaca ulang untuk menemukan solusi, itu bagi yang mempunyai media untuk membaca file yang dicopy tersebut, tidak semua orang memiliki media tersebut.

Untuk yang tidak memiliki media tersebut, kita bisa menggunakan media kertas untuk dokumentasi, untuk itu tombol print perlu terpasang pada halaman blog untuk membantu pembaca mendokumentasikan artikel yang kita tulis dengan cara mencetaknya diatas kertas.

Untuk membuat tombol print pada halaman blog kita gunakan javascript print, sebuah perintah print dengan source kode yang cukup pendek tetapi mempunyai fungsi yang bermanfaat.

Untuk penempatan tombol print-nya sendiri kita bisa letakan diatas atau dibawah post, tergantung kita menginginkannya.

<div class='print'>
<a href='javascript:window.print()'><img alt='Cetak halaman Ini' src='alamat gambar' title='Cetak Halaman Ini'/></a>
</div>

Letakan source kode diatas dibawah <data:post.body/> jika menginginkan tombol print ditampilkan dibawah post, dan sebaliknya jika menginginkan tombol print diletakan diatas postingan, letakan source kode diatas tepat diatas <data:post.body/>

Kita bisa menambah gaya tampilan dengan menambahkan sedikit css untuk memperindah tampilan tombol print tersebut, sebagai contoh style yang saya suka seperti dibawah ini:

CSS

.print {
float: left;
width: 84px;
margin: 5px 10px 0 0;
text-align: center;
box-shadow: -1px -1px 0px #fff, 1px 2px 1px #a1a1a1;
border-radius: 3px;
word-wrap: break-word
}
.print img {
width: 84px;
}
.print:active {
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5), inset 0px 1px 3px rgba(0, 0, 0, 0.25);
}

Style diatas cocok jika warna dasar blog menggunakan warna #EBEBEB, atau bisa kalian modifikasi dengan menyesuaikan desain dan warna tampilan blog.

Fungsi print bisa dengan meletakan tombol print didalam halaman blog, walaupun begitu bisa membuat fungsi print otomatis ketika halaman weblog loading, fungsi print halaman bisa aktif.

Semoga bermanfaat