Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Buat dan Pasang Pop Up Image Efektifkan Halaman Blog

Pop-Up Image yang terpasang dalam bentuk selector sungguh membuat halaman blog menjadi sangat efektif. Posting gambar dalam jumlah lebih dari 1 buah gambar, dimana gambar yang perlu ditunjukkan kepada pengunjung mempunyai dimensi cukup besar akan sangat efektif apabila ditampilkan dalam bentuk seperti ini. Selain irit ruang, beban gambar juga tidak akan ditanggung secara bersamaan ketika blog dalam keadaan loading. Ukuran pop up image juga bisa sampeyan atur mau dalam bentuk ukuran seberapa dengan mengatur width dan height yang terdapat di javascript. Karena sudah dilengkapi scroller bar, akan lebih baik jika tinggi dan lebarnya tidak dibuat terlalu besar karena disamping mengganggu kenikmatan juga karena sudah ditambahkan sebuah scroller.

Membuat dan memasang serta menggunakan pop-up image terhitung amat praktis karena javascriptnya juga tak seberapa banyak, kode html-nya super irit yang lewbih penting adalah dapat digunakan ketika posting ataupun ditempatkan dalam sebuah penambahan widget. Enak, to? Asyiik, to?!

Cara Membuat, memasang dan menampilkan pop-up image di posting

  1. Login to BloGGer

  2. Dasboard (Dasbor) : KLIK link Layout (Tata Letak) atau Design (Rancangan).
  3. Layout (Design) : Yang sampeyan lihat di bagian ini adalah Page Element (Elemen Laman).
  4. Page Element (Elemen Laman) : KLIK Tambah Gadget (Add Gadget).
  5. HTML/Javascript : KLIK HTML/Javascript.
  6. Copy-Paste : Copy-Paste Javascript pada box yang tersedia.
  7. SAVE/Simpan : KLIK SAVE (Simpan).

  8. Kode HTML Gambar : Setelah Javascript tersimpan dengan sempurna, sekarang tinggal gunakan kode HTML Gambar-nya untuk melakukan posting atau dapat juga sampeyan simpan seperti cara menyimpan javascript tadi (melalui widget/tambah gadget).

Javascript Pop-Up Image with Scroller

<script type="text/javascript">
//<![CDATA[
/* bgsGR * gubhug reyot */
function display_image(form) {
selectionname = form.bgsGR_ImageName.options[form.bgsGR_ImageName.selectedIndex].text;
selection = form.bgsGR_ImageName.options[form.bgsGR_ImageName.selectedIndex].value;
PreView = window.open("", "Preview", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,copyhistory=0,width=350,height=450");
PreView.document.open();
PreView.document.write("<html><head>");
PreView.document.write("<title>Preview</title>");
PreView.document.write("</head><body bgcolor=ffffff text=000000>");
PreView.document.write("<form><center><b><font size=+1>" +
selectionname + "</font></b><hr>");
PreView.document.write("<img hspace=0 vspace=0 " +
"src='" + selection + "'>");
PreView.document.write("<hr><form><input type='button' value='Close' " +
"onClick='window.close()'></form>");
PreView.document.write("</center>");
PreView.document.write("</body></html>");
PreView.document.close();
}
//]]>
</script>

Kode HTML Pop-Up Image With Scroller

<form>
<select name="bgsGR_ImageName" onChange="display_image(this.form)" style="font-size:16px;font-family:Times New Roman;font-weight:bold;color:#1edcfe;background:#222;padding:4px 0 4px 8px;border:2px solid red;-moz-border-radius:8px;border-radius:8px;-webkit-border-radius:8px;-goog-ms-border-radius:8px;text-shadow:1px 1px 1px #eee;">
<option value="http://img.theomegaproject.org/thumbs/2009/11/31.jpg" selected>Gambar-1 Penambah Gairah Hidup yang Telah Padam
<option value="http://img.theomegaproject.org/thumbs/2009/09/199.jpg">Gambar-2 Gadis Desa Bertubuh Molek
<option value="http://img.theomegaproject.org/thumbs/2009/10/55.jpg">Gambar-3 Ketika Senja Melingkupi Bumi
<option value="http://img.theomegaproject.org/thumbs/2009/10/96.jpg">Gambar-4 Gosip Artis Menghangatkan Aliran Darah
<option value="http://img.theomegaproject.org/thumbs/2009/10/71.jpg">Gambar-5 Jangan pernah Meminta yang ini !!!
<option value="http://img.theomegaproject.org/thumbs/2009/10/101.jpg">Gambar-6 Type Wajah Isteri Tak Takut Suami
</select>
</form>

Keterangan/Catatan


  1. Supaya praktis dan tidak terlalu banyak memenuhi template sampeyan, sampeyan sebaiknya meng-upload javascriptnya di javascript hosting, kemdian gunakan link-nya, dengan bentuk seperti ini :
    <script src="http://stashbox.org/..../bgsGR_PopUpImage.js" type="text/javascript"></script>, atau misalnya sampeyan mau yang sudah jadi (sudah di upload dan berbentuk link), dan tinggal pakai, silahkan download javascript Pop-Up Image with Scroller dengan KLIK link download di bawah ini :

  2. Ganti URL gambar/image di kode HTML serta Judul Gambarnya dengan gambar dan judul baru yang sesuai dengan gambar yang ingin di postingkan (ditampilkan).
  3. Contoh URL Gambar/Image :

    http://img.theomegaproject.org/thumbs/2009/11/31.jpg

    Contoh Judul Gambar/Image :

    Gambar-1 Penambah Gairah Hidup yang Telah Padam

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


» Happy Blogging - gubhugreyot «

3 komentar:

  1. saya suka posting ini gan, cuma saya minta scripnya dihalaman posting yang menampilkan gambar secara berjajar jadi buka tulisan yang diklik tp gambar.thx bro sangant saya tunggu..

    BalasHapus
  2. Gw suka banget ama BLOG yang ini..gw jadi pengen belajar ngeBLOGing.....tapi Gw g bisa-bisa padahal udah belajar.hmmm yang dah ada yang pinter ini wkwkkwkwkk..gw numpang baca Artikel ajj dech ha..haaa Maju teruss Bloger Indonesiaa go..go g...gooo

    BalasHapus
  3. wiuiihhh ane malah ga jadi baca postinganya,,,malah asik ngeliatin templatnya,keren gan hehehe

    BalasHapus

 
GR | Edited by | gubhug reyot