Add "Print this Page" Code in your Blog

Thank's buat darkdann yang dah mau gabung di Indonesia Blogger Grups.

Dan sekarang lewat blog ini, saya akan mencoba untuk menjawab pertanyaan darkdann, yaitu "Bagaimana sih caranya membuat posting bisa diprint...?"

Ada tiga trik yang bisa kamu gunakan dari salah satunya, yaitu :

1. Cross-browser print button!
   Description: Use this print button to allow your surfers to directly print a web page simply by clicking on the button!
   
   How to :
   Tambahkan kode berikut ini sebelum atau sesudah tag <p><data:post.body/></p>:

<script type='text/javascript'>
/* This script is written by Eric (Webcrawl@usa.net). For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */

function printit(){  
if (window.print) {
window.print() ;  
} else {
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box    WebBrowser1.outerHTML = "";  
}
}
</script>

<script type='text/javascript'>  
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()"></form>');        
}
</script>

Note : 1. Jika kamu menambahkan kode Javascript di atas sebelum tag <p><data:post.body/></p>, maka tampilan Link-nya akan berada di atas posting Blog. Dan sebaliknya, jika kamu menambahkan kode Javascript di atas sesudah tag <p><data:post.body/></p>, maka maka tampilan Link-nya akan berada di bawah posting Blog. 2. Karena secara langsung aku belum mencoba script ini kedalam template blog, jadi jika ada pesan kesalahan dari blogger, maka cobalah gunakan kode Javascript di bawah ini :

<script type='text/javascript'>
//<![CDATA[
<!--
document.write(unescape("%3Cscript%20type%3D%27text/javascript%27%3E%0A/*%20This%20script%20is%20written%20by%20Eric%20%28Webcrawl@usa.net%29.%20For%20full%20source%20code%2C%20installation%20instructions%2C%20100%27s%20more%20DHTML%20scripts%2C%20and%20Terms%20Of%20Use%2C%20visit%20dynamicdrive.com%20*/%0A%0Afunction%20printit%28%29%7B%20%20%0Aif%20%28window.print%29%20%7B%0A%20%20%20%20window.print%28%29%20%3B%20%20%0A%7D%20else%20%7B%0A%20%20%20%20var%20WebBrowser%20%3D%20%27%3COBJECT%20ID%3D%22WebBrowser1%22%20WIDTH%3D0%20HEIGHT%3D0%20CLASSID%3D%22CLSID%3A8856F961-340A-11D0-A96B-00C04FD705A2%22%3E%3C/OBJECT%3E%27%3B%0Adocument.body.insertAdjacentHTML%28%27beforeEnd%27%2C%20WebBrowser%29%3B%0A%20%20%20%20WebBrowser1.ExecWB%286%2C%202%29%3B//Use%20a%201%20vs.%20a%202%20for%20a%20prompting%20dialog%20box%20%20%20%20WebBrowser1.outerHTML%20%3D%20%22%22%3B%20%20%0A%7D%0A%7D%0A%3C/script%3E%0A%0A%3Cscript%20type%3D%27text/javascript%27%3E%20%20%0Avar%20NS%20%3D%20%28navigator.appName%20%3D%3D%20%22Netscape%22%29%3B%0Avar%20VERSION%20%3D%20parseInt%28navigator.appVersion%29%3B%0Aif%20%28VERSION%20%3E%203%29%20%7B%0A%20%20%20%20document.write%28%27%3Cform%3E%3Cinput%20type%3Dbutton%20value%3D%22Print%20this%20Page%22%20name%3D%22Print%22%20onClick%3D%22printit%28%29%22%3E%3C/form%3E%27%29%3B%20%20%20%20%20%20%20%20%0A%7D%0A%3C/script%3E"));
//-->
//]]>
</script>

See Example Here >>
2. User defined print button (Requires NS4.x)
   Description: Creates an image that acts as a print button
   How to:
   
   1. Tambahkan kode Javascript berikut ini sesudah tag ]]></b:skin> atau sebelum tag </head>:
      

      <script type='text/javascript'>
      <!--
      function doit(){
      if (!window.print){
      alert("You need NS4.x to use this print button!")
      return
      }
      window.print()
      }
      //-->
      </script>

   2. Lalu tambahkan kode berikut ini sebelum atau sesudah tag <p><data:post.body/></p>:
      

      
      <a href="javascript:doit()"><img src="http://chalforweb.googlepages.com/printer.png" border=0></a>

      See example here >>
3. Unobtrusive 'Print This Page' Link
   Description : This script will add a link to your page for your visitors to print the contents of a stated DIV. If the visitor does not have JavaScript enabled, the link will not display, so as not to confuse them.
   
   How to:
   
   1. Tambahkan kode berikut ini setelah tag <head>:
      

      
      <script type="text/javascript" src="http://chalforweb.googlepages.com/addprintlink.js"></script>

   2. Klik Checkbox "Expand Template Widget" pada tab Template - Edit Html. Lalu Tambahkan kode berikut ini sebelum atau sesudah tag <p><data:post.body/></p>.
      

      
      <a href="javascript:window.print()">Print this page</a>

      See example here >>

Sumber :

• Dynamicdrive.com
• 456 Berea Street
• A List Apart

Have Fun:-)

DBK	Terima Kasih telah berkunjung dan membaca posting ini. Punya Saran dan Kritik? Silakan tuliskan lewat form Komentar di bawah. Dan tolong jangan kasih komentar spam!
	Find Me on : Facebook | Twitter | Mybloglog | Grup Dunia Internet | NetworkedBlogs

Bookmark Posting ini :

 

« Artikel Terkait »

« Posting terbaru »