Friday, August 26, 2011

Pemahaman Footer 3 Kolom

Pemahaman Footer 3 Kolom
Untuk membuat footer 3 kolom–yang paling pertama, buat dulu tag html pembentuknya, nantinya kita pakai tag div, kenapa pakai tag div? tanya sama w3C yah :)
setelah tag HTML-nya sudah siap, selanjutnya kita menggunakan CSS, untuk membentuk dan menyesuaikan tampilanya. Setelah terbentuk, barulah kita masukan fungsi-fungsi wordrpess supaya nantinya bisa dimasukan ke theme dan bisa di(drop-drag/widget). Ok, lanjut dengan
Code tag html dan style css footer 3 atau 4 kolom
untuk previewnya silakan salin source code berikut, lalu paste ke notepad kemudian save as dengan namafooter3atau4kolom.html lalu jalankan menggunakan peramban kesayangan sobat *firefox
<html>
<head>
<title>Footer 3 atau 4 komlom by indam</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<meta http-equiv="refresh" content="120;url=http://www.indaam.com"/>
<style type='text/css'>
/*
ini adalah cssnya, silakan diedit
* background-color berfungsi untuk mengatur warna latar belakang
* margin berfungsi untuk mengatur jarak luar
* padding berfungsi untuk mengatur jarak dalam,
* border berfungsi untuk mengatur pinggiran
* font berfungsi untuk mengatur font/
* text-transform untuk mengatur apakah huruf itu kapital, kecil semua atau diawai dengan kapital
* color berfungsi untuk mengatur warna(umumnya text)
* float berfungsi untuk mengatur untuk mengatur penekanan apakah ke kiri-atau kekanan
* width berfungsi untuk mengatur lebar
* height berfungsi untuk mengatur tinggi
* text-align berfungsi untuk mengatur perataan text
* http://www.indaam.com
*/
#footer-3-atau-4-kolom{
padding:0;
margin:0;
min-width:100%;
clear:both;
background-color:#fff;
color:#333;
}
#footer-3-atau-4-kolom .dalam-footer-3-atau-4-kolom{
margin:20px auto 0 auto;
text-transform:capitalize;
padding:0 2px;
}
#footer-3-atau-4-kolom .dalam-footer-3-atau-4-kolom .widget-kolom{
float:left;
width:25%;
font-size:16px;
margin:0 0 15px 0;
}
#footer-3-atau-4-kolom h4{
font:normal 15px arial;
text-align:center;
border-bottom:4px double #ccc;
padding:4px 0;
text-transform:uppercase;
margin:6px 4px 4px 4px;
}
#footer-3-atau-4-kolom .isi{
margin:0 4px;
min-height:200px;
}
#footer-3-atau-4-kolom ol,
#footer-3-atau-4-kolom ul{
list-style:none;
margin:0;
padding:0;
}
#footer-3-atau-4-kolom li{
padding:5px 4px 2px 4px;
margin:0;
border-bottom:1px solid #ccc;
}
#footer-3-atau-4-kolom a,
#footer-3-atau-4-kolom a:link,
#footer-3-atau-4-kolom a:visited{
font-weight:bold;
text-decoration:none;
color:inherit;
font-size:15px;
}
#footer-3-atau-4-kolom a:hover,
#footer-3-atau-4-kolom a:active{
font-style:italic;
}
#footer-3-atau-4-kolom a:focus{
outline:2px solid lime;
}
/* silakan tambahakan style
* http://www.indaam.com *
*/
</style>
</head>
<body>
<div id='footer-3-atau-4-kolom'>
<div class='dalam-footer-3-atau-4-kolom'>
<div class='widget-kolom'>
<h4>title-nya</h4>
<div class='isi'>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
</ul>
</div>
</div><!-- .widget-kolom -->
<div class='widget-kolom'>
<h4>title-nya</h4>
<div class='isi'>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
</ul>
</div>
</div><!-- .widget-kolom -->
<div class='widget-kolom'>
<h4>title-nya</h4>
<div class='isi'>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
</ul>
</div>
</div><!-- .widget-kolom -->
<div class='widget-kolom'>
<h4>title-nya</h4>
<div class='isi'>
<ul>
<li><a href='http://www.indaam.com'title='indam site'>link ke Indam site</a></li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
</ul>
</div>
</div><!-- .widget-kolom -->
</div><!-- .dalam-footer-3-atau-4-kolom -->
<div style='clear:both'></div>
<!-- http://www.indaam.com -->
</div><!-- #footer-3-atau-4-kolom -->
<span style='position:fixed;bottom:3%;right:3%;display:block:margin:0;font:italic bold 120% "comic sans ms";'>Original Source Code by <a style='text-decoration:none;color:red;' href='http://www.indaam.com' target='_blank' title='Indam Site'>Indam Site</a></span>
</body>
</html>
Lanjut! source code diatas adalah contoh tampilan static-nya.

CARA MEMBUAT FOOTER 3 KOLOM DI WORDPRESS


Beberapa hari ini saya ngga ngupdate blog, di waktu yang senggang ini kita akan share cara menambah footer 3 kolom di themes wordpress, untuk tampilanya nanti sobat bisa edit sendiri sesuai selerah
Tanpa basa-basi lagi, berikut cara membuat footer di wordpress!

Footer 3 Kolom Versi Static

Maaf ya gan!, versi staticnya dulu berikut!
Perhatikan code markup dibawah
<style type="text/css">
#pembentuk-footernya{
clear:both;
width:100%;
/*sobat bisa menambahkan beberapa property lagi seperti
background-color:blue;
border:1px solid;
dan lain sebagainya
*/
}
/**/
.bagian-dalam-footernya{
float:left;
width:31%;
min-height:300px;
border-bottom:1px dotted black;
margin:1% 1% 1% 1%;/*ini adalah jarak bagian dalam footer(kiri-kanan-tengah) sobat bisa menggantinya dangan length(px)*/
font:normal 17px times;
/*
sobat bisa menambah peropety lain, seperti
background-color:red;
color:white;
margin:0;
padding:0;
serta beberapa property lainya;
*/
}
/**/
.bagian-dalam-footernya h2{
border-bottom:2px dotted silver;
text-transform: capitalize;
font:normal 22px 'times new roman';
margin:5px 0;
padding:0 0 0 5px;
}
/**/
.bagian-dalam-footernya .isiwidgetnya{
margin-left:10px;
margin-top:10px;
}
</style>
<div id="pembentuk-footernya">
<!-- // -->
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer kiri</h2>
<div class="isiwidgetnya">
<!-- masukkan kode widget disini -->
</div>
</div>
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer tengah</h2>
<div class="isiwidgetnya">
<!-- masukkan kode widget disini -->
</div>
</div>
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer kanan</h2>
<div class="isiwidgetnya">
<!-- masukkan kode widget disini -->
</div>
</div>
<!-- // -->
<!-- // -->
<!-- // -->
<div style="clear: both;"></div>
<!-- // -->
<!-- // -->
</div>
Untuk melihat hasilnya

Design HTML dg CSS3


.contohlah kita bisa membuat sebuah border yang melengkung tanpa gambar atau membuat shadow text. Pokoknya ada banyak deh! Kan nggak mungkin dijelasin one by one. Untuk belajar CSS 3 kamu tidak harus mengunjungi situs W3.org, Artikel menemukan ebook yang berisi property baru di CSS3, tinggal download, belajar anda langsung deh develop web kamu.
Download Di sini
Jangan lupa jika butuh bantuan gunakan daftar website yang mungkin sangat berguna dalam web design. Bagi yang pemula banget, untuk belajar HTML sama CSS itu nggak sulit kok, gampang-gampang nggak susah!! Nah ini yang bintang lakukan untuk belajar…
  • Pertama kunjungi atau cari website yang memiliki design bagus dan terlihat simple.
  • Lihat source code web itu, View — Page Source kalau di firefox.
  • Lalu utak atik deh tuh code CSS , dan lihat apa yang terjadi pada text, menu, background dsb. Lama-lama juga akan ngerti sendiri. Mengapa? karena pengalaman adalah guru terbaik.
  • Sttt!!! akan lebih jika menguasai Photoshop dan Javascript.

form kontak


Untuk membuat form kontak, bisa menggunakan HTML untuk pembuatan tampilan formnya. Sedangkan untuk mengirimkan pesannya ke email si pemilik website bisa menggunakan PHP.
Berikut adalah contoh coding untuk pembuatan form kontak:
Nama file kontak.html
<form action=’kirim.php’ action=’post’>
Nama : <input type=’text’ name=’nama’>
Email : <input type=’text’ name=’email’>
Pesan : <textarea name=’pesan’ cols=30 rows=5></textarea>
<input type=’submit’ value=’Kirim’>
</form>
Berikutnya adalah file kirim.php yang akan berfungsi untuk memproses data dari user lalu mengirimkannya ke email admin website.
Nama file kirim.php
<?php
//terima data input dari user
$nama=$_POST['nama'];
$email=$_POST['email'];
$pesan=$_POST['pesan'];
//konfigurasi kiriman
$to=”belajarwebdesign@gmail.com”;
$subjek=”Kontak dari Form”;
$from=”From: $nama <$email>”;
//kirimkan ke email admin
@ mail($to, $subjek, $pesan, $from);
echo “Pesan berhasil terikirim.”;
?>
PENJELASAN SCRIPT
  1. Pertama form dibuat di dalam file kontak.html yang kemudian akan diproses oleh file kirim.php.
  2. Di dalam file kirim.php, pertama-tama menampung dulu nilai (input) yang dimasukan user di file kontak.html
  3. Kemudian kita kirimkan ke email admin 

membuat 2 kolom dengan header dan footer


Cara membuat 2 kolom dengan header dan footer. Tentu saja Pakai CSS. Pertama kita tulis dulu kode HTML -nya.
<div id=”container”>
<h1> <!– Pakai h1 biar SEO bagus–>
Cara membuat 2 Kolom
</h1>
<div id=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Tentang</a></li>
<li><a href=”#”>Kerjasma</a></li>
<li><a href=”#”>Apalah</a></li>
<li><a href=”#”>Kontak</a></li>
</ul>
</div>
<div id=”content”>
<h2> <!– Pakai h2 biar SEO bagus–>
Membuat web dengan CSS
</h2>
<p>
Dan bla..bla..bla
</p>
<p>
Ayo donk
</p>
</div>
<div id=”footer”>
Copyright &copy; BlogBintang.com
</div></div>
Selesai HTML kita tulis kode CSS-nya.
/* pakai center supaya setiap element ke tengah */
body{text-align: center;background: #B0BFC2; color: #444;}
/*pakai margin: 0 auto supaya ikut ke tangah */
#container{text-align: left;margin: 0 auto; width: 700px;background: #c00}
a:link{color: #175B7D;}
a:visited{color: #600;}
a:hover, a:active{color: #fff;background: #175B7D;}
/* pakai margin:0 supaya h1 merapat*/
h1{background: #D36832; color: #FFF; padding: 20px; margin: 0; border-bottom: 5px solid #387A9B;}
#menu{float: left; width: 130px; display: inline; margin-left: 20px; padding: 15px 0;}
#menu ul{margin: 0;padding: 0;list-style-type: none;text-align: right;}
#menu li{background: url(header-bullet.gif) no-repeat 100% .4em;padding: 0 10px 5px 0;}
#content {float: left;width: 475px;margin-left: 45px;padding: 15px 0;}
#footer{clear: both;background: #387A9B;color: #fff;padding: 5px 10px; text-align: right; font-size: 80%;}
h2{margin-top: 0;color: #B23B00; font-weight: normal;}

Saturday, August 20, 2011

Simulasi konfigurasi router

Hari ini gw mw share ilmu dikit tentang Simulasi konfigurasi router pada static routing pada 2 jaringan
Disini saya akan memakai software simulasi CISCO packet tracer 5.3
Pertama”, kita pasang dulu PC – PT, Switch PT, dan Router PT
4 PC – PT

Simulasi setting bios









.
Simulasi setting Bios Bisa Anda Klik di link Halaman ini
http://appro.mit.jyu.fi/tools/biossimu/simu.html

Sebelum instalasi windows Anda bisa mendalami setting Bios dengan Baik


Friday, August 19, 2011

reset bios dengan software


BIOS, singkatan dari Basic Input Output System, dalam sistem komputer IBM PC atau kompatibelnya (komputer yang berbasis keluarga prosesor Intel x86) merujuk kepada kumpulan rutin perangkat lunak yang mampu melakukan hal-hal berikut:

    Inisialisasi (penyalaan) serta pengujian terhadap perangkat keras (dalam proses yang disebut dengan Power On Self Test, POST)
    Memuat dan menjalankan sistem operasi
    Mengatur beberapa konfigurasi dasar dalam komputer (tanggal, waktu, konfigurasi media penyimpanan, konfigurasi proses booting, kinerja, serta kestabilan komputer)
    Membantu sistem operasi dan aplikasi dalam proses pengaturan perangkat keras dengan menggunakan BIOS Runtime Services.

BIOS menyediakan antarmuka komunikasi tingkat rendah, dan dapat mengendalikan banyak jenis perangkat keras (seperti keyboard). Karena kedekatannya dengan perangkat keras, BIOS umumnya dibuat dengan menggunakan bahasa rakitan (assembly) yang digunakan oleh mesin yang bersangkutan.

Istilah BIOS pertama kali muncul dalam sistem operasi CP/M, yang merupakan bagian dari CP/M yang dimuat pada saat proses booting dimulai yang berhadapan secara langsung dengan perangkat keras (beberapa mesin yang menjalankan CP/M memiliki boot loader sederhana dalam ROM). Kebanyakan versi DOS memiliki sebuah berkas yang disebut “IBMBIO.COM” (IBM PC-DOS) atau “IO.SYS” (MS-DOS) yang berfungsi sama seperti halnya CP/M disk BIOS.

Kata BIOS juga dapat diartikan sebagai “kehidupan” dalam tulisan Yunani (Βίος).

Dalam BIOS, terdapat beberapa komponen dasar, yakni sebagai berikut: