Ali Syahab: February 2013

Wednesday, 27 February 2013

Tiga Gaya Menu Navigasi Bertingkat dengan Efek Smooth JQuery

Secara umum ada tiga tipe efek JQuery yang paling populer digunakan, yaitu efek Fade, Show dan Slide. Di sini Saya akan memberikan tiga buah efek dasar JQuery tersebut untuk diterapkan ke dalam sebuah menu navigasi dalam satu desain. Kamu tinggal memilih efek mana yang menurutmu paling cocok.
Agar langkahnya tidak berantakan, maka Saya balik urutannya yaitu mulai dari penempatan kerangka objek, pemodelan dan terakhir pemasangan JQuery:

Langkah Pertama: Penempatan Kerangka Objek dan Pemodelan:

Salin kode berikut ini kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<div class='hompimenu'>

    <ul>

        <li><a href='#'>BERANDA</a></li>

        <li><a href='#'>JURNAL</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a></li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

        <li><a href='#'>KOMENTAR</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a>
                    <ul>
                        <li><a href='#'>Tiga Satu</a></li>
                        <li><a href='#'>Tiga Dua</a></li>
                        <li><a href='#'>Tiga Tiga</a></li>
                        <li><a href='#'>TIga Empat</a></li>
                        <li><a href='#'>Tiga Lima</a></li>
                    </ul>
                </li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

        <li><a href='#'>KONTAK</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a></li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

    </ul>

</div>

Pelajari beberapa alternatif peletakkan menu navigasi di sini »

Setelah itu salin kode CSS ini, kemudian letakkan tepat di atas kode ]]</b:skin> atau </style>:

/**
 * Copyright Juli 2011 :: Taufik Nurrohman
 * (http://hompimpaalaihumgambreng.blogspot.com)
 */

.hompimenu {
  font:normal 12px Cambria,"Times New Roman",Times,serif;
  line-height:normal;
  text-transform:uppercase;
  margin:5px 0px;
  padding:0px 0px;
  color:white;
  text-decoration:none;
}

.hompimenu ul {
  height:34px;
  line-height:34px;
  background-color:#333;
  margin:0px 0px 10px;
  padding:0px 0px;
  border:2px solid #e6e6e6;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
}

.hompimenu li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
  color:white;
  float:left;
  display:inline;
  position:relative;
}

.hompimenu li a {
  display:block;
  background-color:#333;
  border-left:1px solid #444;
  border-right:1px solid #222;
  margin:0px 0px;
  padding:0px 15px;
  color:white;
  text-decoration:none;
  font-weight:bold;
  line-height:34px;
  text-shadow:1px 1px 2px #000;
  outline:none;
}

.hompimenu li ul {
  position:absolute;
  z-index:10;
  left:0px;
  top:100%;
  height:auto;
  margin:0px 0px;
  padding:0px 0px;
  width:170px;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  display:none;
}

.hompimenu li ul a {
  border-left:none;
  border-right:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  display:block;
}

.hompimenu li ul li {
  float:none;
  display:block;
  width:auto;
}

.hompimenu li ul ul {
  top:0px;
  left:100%;
}

.hompimenu li a:focus {
  background-color:#666;
  border-left-color:#777;
  border-right-color:#555;
}

.hompimenu ul li a:focus {
  background-color:#666;
  border-top-color:#777;
  border-bottom-color:#555;
}

.hompimenu li a:hover,
.hompimenu ul li a:hover {color:#ccc;}

Nah, terakhir kamu hanya perlu menentukan efek seperti apa yang menurutmu paling cocok. Pilih salah satu:

Efek SlideDown & SlideUp:

Untuk membuat efek SlideDown - SlideUp, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').slideDown(400);
    }, function() {
        $(this).children('ul').slideUp(400);
    });
});
</script>

Efek FadeIn & FadeOut:

Untuk membuat efek FadeIn - FadeOut, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').fadeIn(400);
    }, function() {
        $(this).children('ul').fadeOut(400);
    });
});
</script>
</script>

Efek Show & Hide:

Untuk membuat efek Show - Hide, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').show(400);
    }, function() {
        $(this).children('ul').hide(400);
    });
});
</script>
</script>

Khusus untuk kode yang Saya beri garis bawah, jika sudah ada tidak perlu ditambahkan.
Sekarang klik Pratinjau. Jika sudah puas dengan hasilnya, simpan templatemu.

CSS3 Properti Resize

Sedikit Banyak saya ingin membahas dasar-dasar css. tag-tag dan masing-masing kegunaannya...
yap..... semoga saya punya banyak waktu untuk berbagi ilmu dengan anda he he :).

kali ini saya akan membahas properti resize dalam css. Untuk contoh lihat Potongan kode di bawah:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

kode di atas akan tampil seperti berikut:

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

Anda Sudah lihat hasilnya kan.....
Dalam sebuah website, css berperan untuk menentukan tampilan. Seperti Contoh di atas elemen <div> dengan class id kotak di atur oleh kode css div.kotak. dimana:
lebarnya/width 100px
tingginya/height 100px
memiliki garis tepi/border 1px
dengan jenis garis padat/solid
dan berwarna merah/red

Karena ukuran kotak hanya (100px X 100px) sedangkan elemen di dalamnya membutuhkan tempat yang lebih luas, maka Elemen di dalamnya di tampilkan melewati kotak 100px X 100px tadi. untuk mengatasi masalah tersebut kita tambahkan Properti overflow. jadi kodenya seperti berikut:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
</style>
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

Tampilannya seperti berikut:

Properti overflow berfungsi untuk menangani elemen yang melebihi batas yang sudah di tentukan.
adapun hidden bisa kita sebut nilai properti overflow. hidden berarti sembunyikan. Karena itulah elemen yang melebihi batas 100px X 100px di sembunyikan. namun nilai properti overflow bukan hidden saja.
Berikut nilai-nilai Properti lain berikut Fungsi masing-masing:

visible (terlihat) : Elemen yang melebihi garis akan di tampilkan. jadi terlihat seperti conto pertama.
hidden (sembunyikan) : Elemen yang melebihi batas akan di Sembunyikan.
scroll (gulir) : Elemen yang melebihi batas akan di sembunyikan namun bisa di gulir untuk melihatnya.
auto (otomatis) : Elemen yang melebihi batas akan di sembunyikan dan bisa di gulir namun jika tidak melebihi batas, efek scroll secara otomatis tidak di tampilkan.

Berikut Contoh Masing-masing:
overflow: visible;

overflow: hidden;

overflow: scroll;
Jika elemen melebihi batas

jika elemen tidak melebihi batas

Elemen

overflow: auto;
jika elemen melebihi batas

jika elemen tidak melebihi batas

Elemen

Sekarang kita lanjut ke pembahasan properti resize.properti resize memungkinkan kita untuk merubah ukuran blok yang sudah di tentukan ke ukuran yang kita suka hanya dengan mengklik tepi untuk merubah ukuran dan menggesernya menjadi ukuran yang kita suka. untuk contoh lihat kode berikut:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: scroll;
resize: both;
}
</style>
<br />
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

Akan Terlihat seperti berikut:

Anda bisa merubah ukuran kotak 100px X 100px di atas dengan mengklik pada pojok kanan bawah kotak, tahan dan geser. itu karena kita menggunakan properti resize. adapun both adalah nilai properti. properti resize juga memiliki beberapa nilai properti. Inilah nilai-nilai properti resize berikut fungsi masing-masing:

both (keduanya) : Memungkinkan anda merubah ukuran kotak secara horisontal dan vertikal.
horizontal (horisontal) : Memungkinkan anda merubah ukuran kotak secara horisontal saja.
vertical (vertikal) : Memungkinkan anda merubah ukuran kotak secara vertikal saja.

untuk Contoh masing-masing silahkan anda buat sendiri......
saya sudah capek mengetik hehe :)
kalau ada pertanyaan bisa anda tinggalkan komentar di bawah....
dan kalau anda ingin copas silahkan. karena saya sendiri juga suka copas artikel orang...
tapi ini murni tulisan saya.

semoga bermanfaat
Sumber :

DAFTAR ISI

Saturday, 23 February 2013

Contoh Company Profile

Sumber :

DAFTAR ISI

Saturday, 2 February 2013

Standard Sumur Resapan

Salah satu upaya untuk meningkatkan kemampuan tanah meresapkan air hujan yaitu melalui pembuatan sumur resapan.

Salah satu upaya untuk meningkatkan kemampuan tanah meresapkan air hujan yaitu melalui pembuatan sumur resapan. Sumur resapan air khususnya di kawasan pemukiman baik di perkotaan maupun di pedesaan, selain dapat menekan terjadinya banjir, sumur resapan ini juga dapat berfungsi untuk menyediakan cadangan air tanah pada musim kemarau. Dengan sumur resapan ini, air hujan akan ditampung dan diresapkan ke dalam tanah sehingga dapat memperbaiki permukaan air tanah serta mengurangi aliran permukaan. Sementara itu, dengan pembuatan sumur resapan ini akan mampu menekan banjir dan menyediakan air tanah pada musim kemarau sehingga sumur-sumur dan mata air yang ada dapat tetap berair pada saat kemarau.

STANDARISASI SUMUR RESAPAN

Pemerintah pada dasarnya teiah mewajibkan pembuatan sumur resapan di setiap pekarangan rumah. Akan tetapi, banyak dari masyarakat yang belum mengetahui standar sumur resapan air yang balk dan benar. Berdasarkan Standar Nasional Indonesia (SNI) No. 03-2453-2002, dapat diketahui bahwa persyaratan umum yang harus dipenuhi sebuah sumur resapan untuk lahan pekarangan rumah adalah sebagai berikut.

Sumur resapan harus berada pada lahan yang datar, tidak pada tanah berlereng, curam atau labil.
Sumur resapan harus dijauhkan dari tempat penimbunan sampah, jauh dari septic tank (minimum 5 m diukur dari tepi), dan berjarak minimum 1 m dari fondasi bangunan.
Penggalian sumur resapan bisa sampai tanah berpasir atau maksimal 2 m di bawah permukaan air tanah. Kedalaman muka air (water table) tanah minimum 1,5 m pada musim hujan.
Struktur tanah harus mempunyai permeabilitas tanah (kemampuan tanah menyerap air) lebih besar atau sama dengan 2,0 cm/jam (artinya, genagan air setinggi 2 cm akan teresap habis dalam 1 jam), dengan tiga klasifikasi, yaitu sebagai berikut.
- Permeabilitas sedang, yaitu 2,0-3,6 cm/jam.
- Permeabilitas tanah agak cepat (pasir halus), yaitu 3,6-36 cm/jam.
- Permeabilitas tanah cepat (pasir kasar), yaitu lebih besar dari 36 cm/jam.

Untuk bentuk dan ukuran konstruksi sumur resapan air yang ideal dapat mengacu pada SNI No. 03-2459-1991 yang dikeluarkan oleh Departemen Kimpraswil, yaitu berbentuk segi empat atau silinder dengan ukuran minimal diameter 0,8 m dan maksimum 1,4 m serta kedalamannya disesuaikan dengan tipe konstruksi sumur resapan air. Sementara itu, pemilihan bahan bangunan yang dipakai tergantung dari fungsinya, seperti plat beton bertulang tebal 10 cm dengan campuran 1 semen : 2 pasir : 3 kerikil untuk penutup sumur dan dinding bata merah dengan campuran spesi 1 semen : 5 pasir tidak diplester, tebal 1/2 bata. <update>Aturan ini telah direvisi dengan SNI 03-2453-2002 (Tata cara perencanaan sumur resapan air hujan untuk lahan pekarangan).

Jenis-jenis Sumur Resapan

Sumur dengan susunan batu kali (kiri). Sumur dengan susunan batu bata (kanan).

Jenis bangunan sumur resapan cenderung bervariasi. Bentuk dan jenis bangunan sumur resapan dapat berupa bangunan sumur resapan air yang dibuat segi empat atau silinder dengan kedalaman tertentu dan dasar sumur terletak di atas permukaan air tanah. Berikut ini merupakan berbagai jenis konstruksi sumur resapan yang sering dipakai.

Sumur tanpa pasangan di dinding sumur, dasar sumur tidak diisi apa pun (kosong).
Sumur tanpa pasangan di dinding sumur, dasar sumur diisi dengan batu belah dan ijuk.
Sumur dengan susunan batu bata, batu kali atau batako di dinding sumur. Dasar sumur diisi dengan batu belah dan ijuk atau kosong.
Sumur menggunakan besi beton di dinding sumur.
Sumur menggunakan blawong (batu cadas yang dibentuk khusus untuk dinding sumur).

Berbagai konstruksi tersebut memiliki keunggulan dan kelemahan masing-masing. Pemilihannya dapat disesuaikan dengan kondisi batuan/tanah (formasi batuan dan struktur tanah). Selain itu, disesuaikan juga dengan kebutuhan dan anggaran dana yang dimiliki.

Selain berbagai jenis konstruksi di atas, saat ini juga telah ditemukan alternatifjenis sumur resapan yang relatif sederhana berupa lubang resapan biopori (LRB). Secara teknis, LRB merupakan lubang silindris yang dibuat secara vertikal ke dalam tanah dengan diameter 10-30 cm. Kedalamannya tidak melebihi kedalaman muka air tanah yaitu sekitar 100 cm. Pembuatan LRB yang relatif sederhana sangat cocok untuk kawasan pemukiman, balk di kota maupun di desa.

Prinsip kerja lubang resapan biopori (LRB) hampir sama dengan sumur resapan yaitu meresapkan air ke dalam tanah. Air tersebut meresap melalui biopori yang menembus permukaan dinding LRB ke dalam tanah di sekitar lubang. Biopori sendiri merupakan ruangan atau pori dalam tanah yang terbentuk akibat adanya aktivitas makhluk hidup seperti fauna tanah dan akar tanaman.

Jumlah dan ukuran biopori akan terus bertambah mengikuti pertumbuhan akar tanaman serta peningkatan populasi dan aktivitas mikroorganisme tanah. Oleh karena itu, untuk meningkatkan populasi dan mikroorganisme tanah maka LRB diisi dengan bahan organik seperti dedaunan kering dan sampah organik lainnya.