Selasar Inspirasi

Membuat Mode Show Hide



Pernah melihat tulisan yang bisa di show/hide ?

image

berikut contoh code untuk membuatnya

<html>
<head>
<style type='text/css'>
/* Use a checkbox to workaround showing and hiding */
input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
label {
    cursor: pointer;
}
/* Shown */
div.showhide {
    display: inline;
}
/* Hidden */
input[type=checkbox]:checked ~ div.showhide {
    display: none;
}
</style>
</head>
<body>
<label for="showHide">Show/Hide</label>
<input type="checkbox" id="showHide">
<div class="showhide">
    <p><b>ini tulisan yang bisa disembunyikan maupun ditampilkan</b></p>
</div>
<p>cara menampilkan dan menyembunyikan tulisan tanpa javascript</p>
</body>
</html>

[Read More...]


Membuat List Hirarki Sederhana



Pernah melihat list hirarki yang bisa dibentangkan dan dilipat (expand-collapse) seperti berikut
image
Ada beraneka macam cara untuk membuatnya, namun penulis membuatnya dengan menggunakan javascript.
Berikut contoh source code-nya
<html>   
<head> 
<title>Pasal-Pasal</title> 
<style> 
   A {text-decoration: none;} 
</style> 
<script language="javascript" type="text/javascript"> 
function Toggle(item) { 
   obj=document.getElementById(item); 
   visible=(obj.style.display!="none") 
   key=document.getElementById("x" + item); 
   if (visible) { 
     obj.style.display="none"; 
     key.innerHTML="[+]"; 
   } else { 
      obj.style.display="block"; 
      key.innerHTML="[-]"; 
   } 
} 
</script> 
</head> 
<body>
<h2>Pasal-Pasal</h2> 
<hr/><hr/> 
<b><a ID="xpasal1" name="pasal-1" href="javascript:Toggle('pasal1')">[+]</a> 
   Pasal 1</b><br> 
   <div ID="pasal1" style="display:none; margin-left:2em"> 
1. bla bla bla<br> 
2. bli bli bli<br> 
3. blu blu blu<br></div>

<b><a ID="xpasal2" name="pasal-2" href="javascript:Toggle('pasal2')">[+]</a>   
   Pasal 2</b><br>
   <div ID="pasal2" style="display:none; margin-left:2em"> 
<ol> 
<li>bla bla bla</li> 
<li>bli bli bli</li> 
<li>blu blu blu</li></ol></div>
<hr/><hr/>
<a href="#pasal-1">kembali ke pasal 1</a><br> 
<a href="#pasal-2">kembali ke pasal 2</a> 
</body> 
</html>

Output Program

image
[Read More...]


Upload Gambar Tanpa Login



Bagi yang tidak ingin ribet ketika upload gambar bisa langsung dapat link gambar tanpa harus login, dapat memanfaatkan situs http://imgur.com

caranya simple, buka http://imgur.com –> pilih gambar yang akan di upload (dari computer atau dari web)

image

misal saya upload gambar dari komputer, maka pilih gambar dari komputer, kemudian bila tidak ada pengeditan langsung klik Start Upload

image

tunggu beberapa saat

image

dan gambar pun sudah terupload dengan sukses, lalu tinggal dicopy saja alamat gambarnya Smile.. ada 2 versi link: link biasa ketika di klik akan tampil seperti gambar 1. Sedangkan direct link ketika di klik akan tampil seperti gambar 2

image
gambar 1

image
gambar 2

[Read More...]


 
Return to top of page Copyright © 2010 | Platinum Theme Converted into Blogger Template by HackTutors