This is Delphi, A free premium blogger theme for you.

6/11/2011

Biasanya kotak tombol cetak otomatis ditampilkan diatas postingan atau di bawah postingan. Tombol otomatis bisa berupa tautan dalam text dan gambar icon printer. Ketika seorang pengunjung halaman blog ingin langsung mencetak artikel dari layar ke printer, tidak mesti repot buka navigasi browser, tinggal klik langsung cetak. Praktis.

Anda dapat menggunakan JavaScript untuk membuat kotak dialog CETAK sehingga pengguna dapat mencetak halaman secara otomatis. Meskipun sebagian besar pengguna tahu bahwa mereka dapat melakukan sesuatu seperti "File> Print", sebuah "Cetak halaman ini" pilihan bisa menyenangkan, dan bahkan dapat membuat pengguna tertarik untuk mencetak halaman.


Cara Membuat "Print halaman ini" Dengan Javascript.

Kode berikut akan menciptakan tautan dan akan mencetak halaman blog ini secara otomatis jika diklik. Silahkan dicoba untuk demo.

Cetak Halaman Ini!

Kodenya seperti di bawah ini:

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

Bisa dibuat ke dalam tombol gambar seperti di bawah ini:



Cara Agar Otomatis Muncul Kotak Print.

Anda dapat memanggil fungsi cetak JavaScript pada loading Printer pada versi yang mudah. Ini secara otomatis akan membuka kotak dialog cetak untuk pengguna. Cara membuat kotak print seperti di bawah ini:
  1. Salin dan sisipkan kode berikut di antara tag versi dicetak:


     <script language="Javascript1.2">
  <!--
  function printpage() {
  window.print();
  }
  //-->
</script>
  2. Tambahkan baris berikut ke tag Anda:

    onload = "printpage ()"
Jadi, tag badan Anda akan terlihat seperti ini:
<body onload="printpage()">

Membuat "Versi Cetak"

CSS dapat dirancang untuk membuat versi cetak yang berbeda dari halaman web Anda. Anda dapat menerapkan gaya yang berbeda untuk setiap pemakaian elemen HTML yang berbeda. CSS dapat melengkapi tampilan. Selain itu variasi font akan membuat style kotak cetak seperti yang anda harapkan. Selamat mencoba.

Cara Membuat Tombol Cetak Halaman Otomatis Di Blog

Posted by GuruGoBlog on 14.38

Biasanya kotak tombol cetak otomatis ditampilkan diatas postingan atau di bawah postingan. Tombol otomatis bisa berupa tautan dalam text dan gambar icon printer. Ketika seorang pengunjung halaman blog ingin langsung mencetak artikel dari layar ke printer, tidak mesti repot buka navigasi browser, tinggal klik langsung cetak. Praktis.

Anda dapat menggunakan JavaScript untuk membuat kotak dialog CETAK sehingga pengguna dapat mencetak halaman secara otomatis. Meskipun sebagian besar pengguna tahu bahwa mereka dapat melakukan sesuatu seperti "File> Print", sebuah "Cetak halaman ini" pilihan bisa menyenangkan, dan bahkan dapat membuat pengguna tertarik untuk mencetak halaman.


Cara Membuat "Print halaman ini" Dengan Javascript.

Kode berikut akan menciptakan tautan dan akan mencetak halaman blog ini secara otomatis jika diklik. Silahkan dicoba untuk demo.

Cetak Halaman Ini!

Kodenya seperti di bawah ini:

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

Bisa dibuat ke dalam tombol gambar seperti di bawah ini:



Cara Agar Otomatis Muncul Kotak Print.

Anda dapat memanggil fungsi cetak JavaScript pada loading Printer pada versi yang mudah. Ini secara otomatis akan membuka kotak dialog cetak untuk pengguna. Cara membuat kotak print seperti di bawah ini:
  1. Salin dan sisipkan kode berikut di antara tag versi dicetak:


     <script language="Javascript1.2">
  <!--
  function printpage() {
  window.print();
  }
  //-->
</script>
  2. Tambahkan baris berikut ke tag Anda:

    onload = "printpage ()"
Jadi, tag badan Anda akan terlihat seperti ini:
<body onload="printpage()">

Membuat "Versi Cetak"

CSS dapat dirancang untuk membuat versi cetak yang berbeda dari halaman web Anda. Anda dapat menerapkan gaya yang berbeda untuk setiap pemakaian elemen HTML yang berbeda. CSS dapat melengkapi tampilan. Selain itu variasi font akan membuat style kotak cetak seperti yang anda harapkan. Selamat mencoba.

5/12/2011


Efek Thumbnail hover preview pada image, adalah sebutan berdasarkan pemahaman saya sendiri.  Maksudnya adalah efek preview yang memunculkan gambar ketika disorot mouse (hover) dengan ukuran lebih besar dari ukuran sebelumnya.


Tetapi dalam kondisi normal / tidak dalam posisi hover, hanya menampilkan gambar berukuran kecil. Lihat gambar di bawah ini :
thumbnailshover

Atau bila ingin melihat hasil jadinya, klik Live Demo.

Live Demo

Cara pembuatan Efek Thumbnail hover preview pada image :
Copy paste kode di bawah ini ke dalam gadget html atau bisa juga postingan pada postingan html :
<style>
.prevthumbhover{ cursor: default;list-style: none;}
.prevthumbhover a{ cursor: default;}
.prevthumbhover a .preview{ display: none;}
.prevthumbhover a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}
.prevthumbhover img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;}
.prevthumbhover li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;}
.prevthumbhover .preview{ border-color: #000;width: 200px;height: 150px;}
</style>
<ul class="prevthumbhover">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJHolZjwBXMG1pNAoogjpsOxSvrGCeorqPgKZdDb4l37KRkLRj6OInNvrf62BAiijKdPvAQ9-WevUCOwOUMiO4MAQVFWR0ggf3EAEExbd1vldJl6YrpeeDEV0s3y0O9o8WNtfQEXIwQIX/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJHolZjwBXMG1pNAoogjpsOxSvrGCeorqPgKZdDb4l37KRkLRj6OInNvrf62BAiijKdPvAQ9-WevUCOwOUMiO4MAQVFWR0ggf3EAEExbd1vldJl6YrpeeDEV0s3y0O9o8WNtfQEXIwQIX/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SEDINJ16oJGpsTxlcOzZahkhgdh3UTEK8I6eTC7e6WzZV49hZilw_OaoGzl9-g8C0LGXk-0upUgdr26XMZKlp4UFm0gCt4tMKHDbNDi0aBcek36CO5HhmWgvstI19uVpJNuvYgdVbg9i/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SEDINJ16oJGpsTxlcOzZahkhgdh3UTEK8I6eTC7e6WzZV49hZilw_OaoGzl9-g8C0LGXk-0upUgdr26XMZKlp4UFm0gCt4tMKHDbNDi0aBcek36CO5HhmWgvstI19uVpJNuvYgdVbg9i/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicH6yoFMjx576rt7AVD6jJO_hqe7zyHB5WToxcALVUpb8CtfyKw0hKlkycQJy6EDkKkTbDF5JVEcBhg4qjpvCRikEOgxAm_78RbH73McBW3YsQyb-DMsynmIGhnIuiPjoTQRUTN48SSONF/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicH6yoFMjx576rt7AVD6jJO_hqe7zyHB5WToxcALVUpb8CtfyKw0hKlkycQJy6EDkKkTbDF5JVEcBhg4qjpvCRikEOgxAm_78RbH73McBW3YsQyb-DMsynmIGhnIuiPjoTQRUTN48SSONF/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>
 Catatan:
Yang diberi stabilo warna merah adalah link gambar.
Anda bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri lah… anda pasti bisa.
Selamat mencoba. 

Efek Thumbnail Hover Preview Pada Image

Posted by GuruGoBlog on 14.14


Efek Thumbnail hover preview pada image, adalah sebutan berdasarkan pemahaman saya sendiri.  Maksudnya adalah efek preview yang memunculkan gambar ketika disorot mouse (hover) dengan ukuran lebih besar dari ukuran sebelumnya.


Tetapi dalam kondisi normal / tidak dalam posisi hover, hanya menampilkan gambar berukuran kecil. Lihat gambar di bawah ini :
thumbnailshover

Atau bila ingin melihat hasil jadinya, klik Live Demo.

Live Demo

Cara pembuatan Efek Thumbnail hover preview pada image :
Copy paste kode di bawah ini ke dalam gadget html atau bisa juga postingan pada postingan html :
<style>
.prevthumbhover{ cursor: default;list-style: none;}
.prevthumbhover a{ cursor: default;}
.prevthumbhover a .preview{ display: none;}
.prevthumbhover a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}
.prevthumbhover img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;}
.prevthumbhover li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;}
.prevthumbhover .preview{ border-color: #000;width: 200px;height: 150px;}
</style>
<ul class="prevthumbhover">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJHolZjwBXMG1pNAoogjpsOxSvrGCeorqPgKZdDb4l37KRkLRj6OInNvrf62BAiijKdPvAQ9-WevUCOwOUMiO4MAQVFWR0ggf3EAEExbd1vldJl6YrpeeDEV0s3y0O9o8WNtfQEXIwQIX/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJHolZjwBXMG1pNAoogjpsOxSvrGCeorqPgKZdDb4l37KRkLRj6OInNvrf62BAiijKdPvAQ9-WevUCOwOUMiO4MAQVFWR0ggf3EAEExbd1vldJl6YrpeeDEV0s3y0O9o8WNtfQEXIwQIX/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SEDINJ16oJGpsTxlcOzZahkhgdh3UTEK8I6eTC7e6WzZV49hZilw_OaoGzl9-g8C0LGXk-0upUgdr26XMZKlp4UFm0gCt4tMKHDbNDi0aBcek36CO5HhmWgvstI19uVpJNuvYgdVbg9i/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SEDINJ16oJGpsTxlcOzZahkhgdh3UTEK8I6eTC7e6WzZV49hZilw_OaoGzl9-g8C0LGXk-0upUgdr26XMZKlp4UFm0gCt4tMKHDbNDi0aBcek36CO5HhmWgvstI19uVpJNuvYgdVbg9i/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicH6yoFMjx576rt7AVD6jJO_hqe7zyHB5WToxcALVUpb8CtfyKw0hKlkycQJy6EDkKkTbDF5JVEcBhg4qjpvCRikEOgxAm_78RbH73McBW3YsQyb-DMsynmIGhnIuiPjoTQRUTN48SSONF/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicH6yoFMjx576rt7AVD6jJO_hqe7zyHB5WToxcALVUpb8CtfyKw0hKlkycQJy6EDkKkTbDF5JVEcBhg4qjpvCRikEOgxAm_78RbH73McBW3YsQyb-DMsynmIGhnIuiPjoTQRUTN48SSONF/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>
 Catatan:
Yang diberi stabilo warna merah adalah link gambar.
Anda bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri lah… anda pasti bisa.
Selamat mencoba. 

Langganan: Postingan (Atom)