Pasang Fasilitas Print di Halaman Posting

Javascript yang difungsikan sebagai fasilitas print sebenarnya telah terpostingkan beberapa waktu yang lalu, dimana kode html beserta javascriptnya bisa di simpan melalui penambahan widget di sidebar, bawah header atau footer. Namun demikian berkaitan dengan pertanyaan yang muncul tentang "bagaimana cara memasang dan menampilkan fasilitas print di halaman posting", maka pada posting kali ini kita akan bahas secara khusus tentang cara memasang fungsi atau fasilitas print tepat di salah satu bagian halaman posting.

Gambar atau teks yang merupakan link dimana fungsi print bekerja melalui "KLIK" sebenarnya dapat diletakkan di beberapa bagian tertentu di halaman posting, akan tetapi kita akan coba di bagian atas halaman posting dengan harapan akan lebih mudah dan cepat terlihat oleh pengunjung. Kita akan menempatkan di sebelah judul posting atau di bawah judul posting sebelah kanan. Gambar yang nantinya digunakan juga bisa sampeyan perkecil atau diganti dengan teks untuk penyesuaian dengan ruangan yang tersedia. Sebagai gambaran bisa kita lihat melalui contoh di bawah ini:

Print di Halaman Posting

Sekalipun semua kode dan javascript telah tersedia di posting sebelumnya, supaya kita nggak repot untuk bolak-balik membuka halaman, sekaligus akan kita ulang memuat kode html dan javascriptnya.

Kode HTML dan Javascript

<a href='javascript:doit()' onClick='showAlert();'><img src='http://i48.tinypic.com/2wda5up/gubhugreyot/images/PrinterAnima.jpg' style='border:none;float:right;margin:-2px 5px 3px 10px;'/></a>
<script type='text/javascript'>
//<![CDATA[//bgsGR - gubhug reyot
function showAlert() {
var massage_bgsGR = "Terima kasih atas kunjungan anda. Silahkan KLIK * ok * kemudian lanjutkan untuk mencetak!";
alert('bgsGR ::: Hallo ...! ' + massage_bgsGR + '.');}
function doit(){
if (!window.print){alert('Semoga bermanfaat bagi anda!')
return}
window.print()}
//]]>
</script>

Cara Pasang dan menyimpan kode

1. Login to blogger
2. Dasboard/Dasbor : Setelah login dilakukan maka kita akan menjumpai halaman Dasboard. Lanjutkan KLIK Design/Rancangan.
3. KLIK link "Edit HTML".
4. Backup template dengan cara KLIK "Download Full Template/Download Template Lengkap". Simpan File Template (file ini berekstensi .xml) di "Folder PC".
5. Tetap di Edit HTML. KLIK "Expand Widget Template".
6. Cari kode post-title entry-title. Di sekitar kode tersebut akan berupa kode seperti di bawah ini:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Rubah kode menjadi seperti di bawah ini :


<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a><a href='javascript:doit()' onClick='showAlert();'><img src='http://i48.tinypic.com/2wda5up/gubhugreyot/images/PrinterAnima.jpg' style='border:none;float:right;margin:-2px 5px 3px 10px;'/></a>
<script type='text/javascript'>
//<![CDATA[//bgsGR - gubhug reyot
function showAlert() {
var massage_bgsGR = "Terima kasih atas kunjungan anda. Silahkan KLIK * ok * kemudian lanjutkan untuk mencetak!";
alert('bgsGR ::: Hallo ...! ' + massage_bgsGR + '.');}
function doit(){
if (!window.print){alert('Semoga bermanfaat bagi anda!')
return}
window.print()}
//]]>
</script>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

7. KLIK SAVE/Simpan Template, kemudian buka blog untuk melihat hasilnya.

Catatan/Keterangan :

1. Selain di tempat tersebut, khusus kode yang berwarna kuning (yellow code), yang berupa javascript, sampeyan dapat menyimpannya di atas kode </body>.
2. Posisi Gambar dapat sampeyan atur dengan merubah nilai margin pada :
   margin:-2px 5px 3px 10px;.
   Atur nilai margin -2px dengan merubah nilainya hingga diperoleh posisi yang paling ideal (semakin bear nilai minus maka gambar akan semakin naik).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «