Tampilkan postingan dengan label Menu Lain. Tampilkan semua postingan
Tampilkan postingan dengan label Menu Lain. Tampilkan semua postingan

Membuat menu DropDown

Menu Dropdown atau Menu Pull-down merupakan kumpulan beberapa data (berupa text dan link)  yang di ringkas menjadi menu tunggal, Menu dropdown bisa digunakan sesuai kebutuhan anda, selain bisa digunakan sebagai alternatif Blogroll, bisa juga anda gunakan untuk memuat banyak alamat Link ke situs tujuan. mau tau cara pembuatannya?

Cara Buat Menu Dropdown Standar


Menu1 Menu2 Menu3  
<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://alamat-url1.com&quot;>Menu1</option>
<option value="http://alamat-url2.com&quot;>Menu2</option>
<option value="http://alamat-url3.com&quot;>Menu3</option>
</select>
</form>
 

Cara Buat  Menu Dropdown dengan Tombol

Menu1 Menu2 Menu3
<form name="jump">
<select name="menu">
<option value="http://alamat-url1.com&quot;>Menu1</option>
<option value="http://alamat-url2.com&quot;>Menu2</option>
<option value="http://alamat-url3.com&quot;>Menu3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="OK">
</form>


Cara Buat Menu Dropdown dengan Tombol Gambar

function jumpMenu(){ location=document.jump.menu.options[document.jump.menu.selectedIndex].value; } Menu1 Menu2 Menu3
<form name="jump">
<script>
function jumpMenu(){
location=document.jump.menu.options[document.jump.menu.selectedIndex].value;
}
</script>
<select name="menu">
<option value="http://alamat-url1.com&quot;>Menu1</option>
<option value="http://alamat-url2.com&quot;>Menu2</option>
<option value="http://alamat-url3.com&quot;>Menu3</option>
</select>
<a href="Javascript:jumpMenu()"><IMG src="http://oom.blog.googlepages.com/Go.gif" border=0></a>
</form>

Catatan : kode ditandai warna merah bisa diganti sesuai keinginan anda.
 
< Prev   Next >
»»  READMORE...
0 komentar Label:

Cara menampilkan halaman lain di blog (Tab Document Viewer)

Pertanyaan diatas disampaikan salah satu sahabat blogger di shoutbox, yaitu bagaimana menampilkan halaman lain di blog kita, biasanya ini dinamakan Document Viewer. Gunanya buat apa om? *sambil garuk-garuk kepala* buat apa ya? mungkin buat aksesoris tambahan aja. Menurut om kayaknya aksesoris ini gak terlalu berguna selain itu juga bikin lambat loading page. Namum tidak ada salahnya kita mencoba membuat Document Viewer ini sekalian aja buat nambah ilmu untuk belajar koding  :)

Agar gak bingung kita lihat gambar dibawah:


Contoh tampilan tab document viewer.


Halaman yang kita buat nantinya merupakan Tab Dokumen Viewer, setiap tab akan mempunyai link tersendiri yang bisa kita modifikasi.

Ikuti langkah dibawah ini:

LANGKAH I.
Buka Template -> Edit HTML -> masukan kode CSS dibawah diantara kode CSS yang ada pada coding blogger kita, biasanya di antara code <head>....</head>

/*Eric Meyer's based CSS tab*/
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a:hover{
color: #000000;
background: #C1C1FF;
border-color: #227;
}
#tablist li a.current{
background: lightyellow;
}


LANGKAH II
Kemudian masukan lagi kode javacript dibawah ini diantara code <Body>....</Body>


<script type="text/javascript">

/***********************************************
* Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var selectedtablink=""
var tcischecked=false

function handlelink(aobject){
selectedtablink=aobject.href
tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false
if (document.getElementById && !tcischecked){
var tabobj=document.getElementById("tablist")
var tabobjlinks=tabobj.getElementsByTagName("A")
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
document.getElementById("tabiframe").src=selectedtablink
return false
}
else
return true
}
function handleview(){
tcischecked=document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked){
if (selectedtablink!="")
window.location=selectedtablink
}
}
</script>
Jika sudah jangan lupa di simpan.

LANGKAH III
Buka Template -> Element Halaman -> Tambahkan sebuah Elemen Halaman -> Lakukan Copy-Paste Kode dibawah ini -> kemudian simpan dan lihat hasilnya.

<ul id="tablist">

<li><a class="current" href="http://www.o-om.com" onClick="return handlelink(this)">O-om's Blog</a></li>
<li><a href="http://www.google.com" onClick="return handlelink(this)">Google</a></li>
<li><a href="http://www.yahoo.com" onClick="return handlelink(this)">Yahoo</a></li>
<li><a href="http://www.msn.com" onClick="return handlelink(this)">MSN</a></li>
<li><a href="http://www.news.com" onClick="return handlelink(this)">News.com</a></li>
<li><a href="http://www.dynamicdrive.com" onClick="return handlelink(this)">Dynamic Drive</a></li>
</ul>
<iframe id="tabiframe" src="http://www.o-om.com" width="98%" height="350px"></iframe>
<form name="tabcontrol" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview()" value="ON"> Open tab links in browser window instead.
</form>

URL yang berwarna biru bisa kita ganti sesuai dengan keinginan.
URL yang berwarna pink merupakan  alamat yang akan ditampilkan pertama kali

Cara menambahkan Alamat:

Untuk menambahkan halaman kita tinggal menambahkan kode dibawah ini dibawah code warna merah diatas :)

<li><a href="http://Alamat URL" onClick="return handlelink(this)">Nama URL</a></li>
»»  READMORE...
0 komentar Label:

Menghemat Ruang Blog dg Menu Tutup Buka

Banyak usaha peblogger untuk menampilkan blognya masing-masing agar kelihatan lebih menarik para pengunjung.
Salah satu trik untuk kearah itu dapat anda lakukan dengan menggunakan menu tutup buka sehingga isi dari menu tersebut akan tersembunyi, dan akan terbuka jika pengunjung mengklik menu tersebut. Selain dapat menambah keindahan blog tips ini juga dapat menghemat ruang pada blog serta dapat diletakkan pada postingan maupun pada elemen halaman.
Sebagai contoh, coba anda perhatikan menu dibawah ini :

Jika anda berminat, anda tinggal copy script dibawah kemudian paste pada blog anda, baik pada postingan maupun pada elemen halaman.

<div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input value="BUKA" style="margin: 0px; padding: 5px; width: 30%; font-size: 11px; background:#0066CC; color:#ffffcc; border:1px dashes yellow;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" type="button" /></div><div class="alt2"><div style="display: none;"><div style="border: 2px dashes white; color:blue;background-color:NONE; text-align: justify; padding:10px; ">TEMPAT MENGISI IMAGE ,TULISAN ATAU APA SAJA </div>

Selanjutnya anda tinggal mengganti kode yang bercetak merah dengan keinginan anda, agar tampil lebih menarik :
  • value="BUKA" = dapat anda ganti dengan kata lain misalnya : OPEN
    • . Kata BUKA ada 2 buah , silahkan anda ganti keduanya.
  • width: 30%; = merupakan ukuran dari lebar menu, dapat anda ganti dengan px
  • font-size: 11px; = merupakan ukuran huruf yang tampil pada menu
  • border:1px dashes yellow;" = merupakan border menu berupa garis ganda berukuran ipx dan berwarna kuning
  • background:#0066CC; = merupakan warna latar dari menu
  • value = 'TUTUP'; = dapat anda ganti dengan kata lain misalnya CLOSE
  • border: 2px dashes white; color:blue;background-color:NONE; = menunjukkan bahwa border yang muncul setelah diklik berupa garis ganda dengan ukuran 2 px dan berwarna putih, tulisan berwarna biru serta tidak ada background, silahkan anda ganti seperlunya, dapat anda ganti dengan solid atau dotted
  • TEMPAT MENGISI IMAGE ,TULISAN ATAU APA SAJA = dapat anda ganti dengan apa saja yang ingin anda tampilkan
»»  READMORE...
0 komentar Label:

ShoutMix chat widget
free counters

Copyright © 2010 Tips dan Trik Template by Dean agus.