Membuat Document Viewer model Drop Down

Home » Tips trik blogger » Membuat Document Viewer model Drop Down

Membuat Document Viewer model Drop Down

Posted by Unknown Saturday, 27 March 2010 0 comments

Document Viewer ini bisa dipakai bila kita ingin menampilkan website/blog lain dalam blog kita dengan tampilan yang menyatu tanpa keluar dari halaman blog, cukup dengan klik pada menu drop down.

Tertarik, ikuti langkah berikut ini : Lihat contoh penggunaan ----> sAMPLE BLOg

Langkah Pertama

Pilih tab Elemen Halaman ( Page Element ).
Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
Copykan script berikut dan letakkan pada kotak Content yang tersedia:

<form name="jumpy">
<select name="example" size="1" onChange="gone()">

<option value="http://www.yahoo.com" selected>Yahoo.com</option>
<option value="http://www.google.com">Google.com</option>
<option value="http://www.bing.com">Bing.com</option>
<option value="http://id.msn.com/?st=1">MSN Ind</option>
</select>

<input type="button" name="test" value="Go!" onClick="gone()">
</form>

<script language="javascript">
<!--

//Drop-down Document Viewer- Â© Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com

//Specify display mode (0 or 1)
//0 causes document to be displayed in an inline frame, while 1 in a new browser window

var displaymode=0

//if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown
var iframecode='<iframe id="external" style="width:95%;height:400px" src="http://www.yahoo.com"></iframe>'

/////NO NEED TO EDIT BELOW HERE////////////

if (displaymode==0)
document.write(iframecode)

function gone(){
var selectedurl=document.jumpy.example.options[document.jumpy.example.selectedIndex].value
if (document.getElementById&&displaymode==0)
document.getElementById("external").src=selectedurl
else if (document.all&&displaymode==0)
document.all.external.src=selectedurl
else{
if (!window.win2||win2.closed)
win2=window.open(selectedurl)
//else if win2 already exists
else{
win2.location=selectedurl
win2.focus()
}
}
}
//-->
</script>

Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis huruf.

warna hijau, URL yang dimaksud ( Alamat website/blog yang ingin ditampilkan )
warna merah, Variasi tampilan, 0 = document akan tampil inline dalam blog secara otomatis
warna merah, Variasi tampilan, 1 = document akan tampil pada new window
warna orange, URL yang akan ditampilkan pertama ( pasang URL yang ada pada urutan pertama, sesuai urutan URL - warna Hijau - )
warna orange, Lebar dan tinggi kotak viewer bila ditampilan secara inline ( dalam blog )