Apapun yang terjadi kepada Anda, akan tetap menjadi sesuatu yang menguatkan Anda, bila Anda tidak mengijinkannya untuk melemahkan Anda.Maka mulailah dari tempat di mana Anda berada, dan mulailah sekarang. Anda sampai, hanya karena Anda berangkat.Dan ingatlah, bahwa Batas waktu itu dibuat bukan karena Anda harus selesai, tetapi karena Anda harus segera memulai. Dan setelah pengertian ini mendapatkan tempat yang kuat di hati Anda, perjelaslah bagi diri Anda sendiri, bahwa Keberhasilan Anda ada pada tempat yang lebih tinggi dari yang sedang Anda kerjakan sekarang. Kemudian, janganlah berlaku seperti orang yang mengeluhkan apa saja yang tidak terlihat di dalam sebuah gambar, Berfokuslah pada yang telah jelas terlihat, karena dari sana lah Anda mencapai tempat-tempat yang belum terlihat bahkan oleh imajinasi Anda. Lalu bekerja keraslah dalam kedamaian bahwa Anda telah melakukan yang benar. Janganlah berupaya menjelaskan mengapa Anda tidak mencapai yang belum Anda capai. Bekerjalah untuk mencapai yang telah jelas bagi Anda. Maka, Mulailah keberhasilan Anda dari mana pun Anda berada.(Mario Teguh)

19 Apr 2009

Membuat Drop Down Menu Description

Drop Down Menu ini adalah model alternatif untuk membuat menu2 link yg efisien (g amakan tempat). contohnya bisa dilihat di bagian atas blog ini, di sana temen2 lihat ada semacam engine search yg dikonfirm dengan mengklik button "GOOOOO..OOO". Itu saya buat dengan model Drop Down Menu Description.
Kalau temen2 berminat simpel saja, cukup masukan kode berikut dalam elemen halaman blog temen2 melalui menu gadget untuk javascript. Caranya seperti biasa:
1. Masuk Layout
2. Tata Letak
3. Tambah Gadget
4. Pilih menu gedget javascript
5. Paste kode HTML-nya
6. Simpan
7. Lihat hasilnya
8. Dicoba

Berikut kodenya:


<!--Example drop down menu 1-->

<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://www.javascriptkit.com">JavaScript Kit </option>
<option value="http://freewarejava.com">Freewarejava.com</option>
<option value="http://wired.com" target="newwin">Wired News</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.codingforums.com" target="newwin">Coding Forums</option>
</select>
<input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"><br>
<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>
</form>

<!--Example drop down menu 2-->

<form name="form2">
<select name="select2" size="1" style="background-color:#E3FFDF" onChange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')">
<option selected value="http://www.cnn.com">CNN</option>
<option value="http://www.msnbc.com">MSNBC</option>
<option value="http://news.bbc.co.uk">BBC News</option>
<option value="http://www.theregister.com/">The Register</option>
</select>
<input type="button" value="Go"
onClick="jumptolink(document.form2.select2)"><br>
<span id="textcontainer2" align="left" style="font:italic 13px Arial">
</span>
</form>



<!--IMPORTANT: Below script should always follow all of your HTML codes above, and never proceed them-->
<!--To be safe, just add below script at the end of your page-->

<script type="text/javascript">

/***********************************************
* Drop down menu w/ description- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
var thetext1=new Array()
thetext1[0]="Comprehensive JavaScript tutorials and over 400+ free scripts"
thetext1[1]="Direct link to hundreds of free Java applets online!"
thetext1[2]="Up to date news on the technology front"
thetext1[3]="News.com- The #1 technology News site."
thetext1[4]="Web Coding and development forums"

/// You may define additional text arrays if you have multiple drop downs:
var thetext2=new Array()
thetext2[0]="CNN- US and World News."
thetext2[1]="MSNBC- NBC News online."
thetext2[2]="BBC News- Updated every minute of every day."
thetext2[3]="TheRegister- Daily IT news."

// Now, see 2) below for final customization step

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}

function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}

//2) Call function displaydesc() for each drop down menu you have on the page
// This function displays the initial description for the selected menu item
// displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag):
// Important: Remove the calls not in use (ie: 2nd line below if there's only 1 menu on your page)

displaydesc(document.form1.select1, thetext1, 'textcontainer1')
displaydesc(document.form2.select2, thetext2, 'textcontainer2')

</script>


Catatan:
Perhatikan kode berikut ini, ganti oleh temen2 alamat URL dan JUDULanya, sesuai kebutuhan:

<option selected value="http://www.javascriptkit.com">JavaScript Kit </option>
<option value="http://freewarejava.com">Freewarejava.com</option>
<option value="http://wired.com" target="newwin">Wired News</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.codingforums.com" target="newwin">Coding Forums</option>



<option selected value="http://www.cnn.com">CNN</option>
<option value="http://www.msnbc.com">MSNBC</option>
<option value="http://news.bbc.co.uk">BBC News</option>
<option value="http://www.theregister.com/">The Register</option>


Contoh yang saya GANTI dengan URL dan JUDUL yg sesuai dengan kebutuhan saya:

<option selected value="http://www.pesantren-latansa.sch.id">LA TANSA</option>

URLnya adalah : http://www.pesantren-latansa.sch.id, dan JUDUL LINKnya :adalah LA TANSA
Selamat mencoba, semoga bermanfaat!

Tidak ada komentar:

Posting Komentar

SOBAT KANG JURED