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:
width & height sesuai kebutuhan. Berikut sketsa markup HTML...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!<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
Resource printing by: www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm
<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.Hiji, dua dan tilu...unyil kucing!!!
Hanya isi div ini akan dicetak.
Telah menggunakan batasan untuk menyorot konten yang akan dicetak.
Click to print div 2.
Telah menggunakan batasan untuk menyorot konten yang akan dicetak.
- Item One
- Item Two
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> <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 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/> » <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> <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
Loading... |
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...