Trik Komputer: Customize Content Area Before to Printing

Trick yang lumayan banyak dari para nara sumber. Sangkin beraneka ragam, tujuannya tetap ke situ juga! Berbicara tentang print sekarang mas bro. Membuat area printable menggunakan JavaScript. Sebelum masuk ada beberapa cara agar area konten yg akan kita print bisa sesuai dengan keinginan. Kopi paste artikel (tulisan) ke apps word yg kalian punya atau memakai jasa web online!

Setelah merujuk ke beberapa web directory, Koben rangkum teknik menulis syntax print menjadi seperti berikut:

<form>
<input type="button" value="Print this page" onClick="window.print()">
</form>

<a href="URL-TARGET-UNTUK-DI-PRINT" onClick="window.print();return false">
<img alt="" src="LINK-IMAGE" />
</a>

<a href="javascript:window.print()">
<img alt="" src="LINK-IMAGE" />
</a>

Itulah beberapa teknik penulisan syntax yg dapat di gunakan secara langsung untuk membuat link nge-print :) AA Koben dapatkan 1 referensi unik tentang issue printing. Dengan memasang seonggok JavaScript pada template, kita dapat melakukan customize content area before printing!

Sebuah div berisi teks blablabla yang akan dicetak.
Hiji, dua dan tilu...unyil kucing!!!

Click to print div 1.

Hanya isi div ini akan dicetak.
Telah menggunakan batasan untuk menyorot konten yang akan dicetak.

Item One
Item Two

Click to print div 2.

Sisipkan Javascript brkt sebelum tagging </head>

<script type='text/javascript'>
//<![CDATA[
function printContent1(id){ 
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=0,top=0,width=800,height=700,scrollbars=1,resizable=1')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<title>Print Page</title>\n')
newwin.document.write('<script>\n')
newwin.document.write('function chkstate(){\n')
newwin.document.write('if(document.readyState=="complete"){\n')
newwin.document.write('window.close()\n')
newwin.document.write('}\n')
newwin.document.write('else{\n')
newwin.document.write('setTimeout("chkstate()",2000)\n')
newwin.document.write('}\n')
newwin.document.write('}\n')
newwin.document.write('function print_win(){\n')
newwin.document.write('window.print();\n')
newwin.document.write('chkstate();\n')
newwin.document.write('}\n')
newwin.document.write('<\/script>\n')
newwin.document.write('</HEAD>\n')
newwin.document.write('<BODY onload="print_win()">\n')
newwin.document.write(str)
newwin.document.write('</BODY>\n')
newwin.document.write('</HTML>\n')
newwin.document.close()
}
//]]>
</script>

Silahkan di atur width & height sesuai kebutuhan. Berikut sketsa markup HTML...

<div id="div_print" style="YOUR CUSTOMIZE CSS STYLE"> ------------- ISI CONTENT WTF ------------- </div> <a href="javascript:void()" onclick="printContent1('div_print')">Click here to print</a>

Perhatikan tulisan div_print Konten area yg akan di print harus sama dengan link syntax! Itu harus berlainan jika sobat mau membuat konten printing lebih dari satu seperti contoh di atas. Kalau sobat mau mematenkan di area postingan blogger. Maka harus butuh kejelian dalam memasangkannya!

Koben akan kasih gambaran bagaimana meng-snippet konten area printing ke dalam template blog. Perhatikan, berikut skema dasar kode area postingan rata-rata kepunyaan blogspot!

            <b:includable id='post' var='post'>
<div class='post' id='post'>

<div id='div_print'>

    <a expr:name='data: post.id'/>
      <h1 class='post-title' id='PostTitle'>
      <b:if cond='data: post.url'>
        <a expr:href='data: post.url' target='top'><data: post.title/></a>
      <b:else/>
        <data: post.title/>
      </b:if>
      </h1>
      <h6 class='date-header' id='PostDate'>
           <data: post.dateHeader/> &#187; <span class='post-author'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/> <data: post.author/> 
        </b:if>
      </span>
      </h6>
    <div class='post-header-line-1'/>
    <style>#fullpost {display:none;}</style>
    <div class='post-body' id='PostContent'>
      <data: post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->

</div>

    </div>

------------------ BLAH BLEH BLOH OTHER CODE ------------------

</div>
</b:includable>

Sisipkan tagging <div id='div_print'> tepat di bawah kode <div class='post' id='post'> Untuk tag penutup </div> silahkan dikondisikan dengan keadaan koding template masing² Yang jelas tag penutup </div> harus di dalam tag penutup </div> kepunyaan si <div class='post' id='post'>Setelah itu silahkan buat syntax URL pemanggil<a href="javascript:void()" onclick="printContent1('div_print')">Click here to print</a>

Semoga berhasil :)
Resource printing by: www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm

Trik Komputer

Sabtu, 28 Desember 2013

Customize Content Area Before to Printing

Tidak ada komentar:

Posting Komentar