Baca Juga


Apa kabarnya nih pengunjung setia blog Techno ... Kali ini saya mau berbagi template website yang sudah saya buat sebelumnya dan untuk anda yang kepingin punya source code nya . Tenang saya sudah menyiapkan segala kebutuhan para punggawa Techno hehehehe ;).

techno evolution

Sebelum kita melangkah ke tutorialnya nih guys ... saya mau memberikan kabar gembira nih .. Kabar gembira kini maspin kulit manggis ada ekstrak buah alami nya .. Eh kok malah ngawur ane ya :v . Oke daripada ntar ane tambah ngawur langsung ke Tkp ajah ;)

Alat dan Bahan :

1. Komputer / Laptop 
2. Xampp download disini
3. Secangkir teh hangat .. karena di tempat ane dingin :v

Proses :

1. Yang udah pasti hidupkan Komputer atau Laptop kalian :/

2. Aktifkan server lokal dengan lokal host ... oh ya sobat untuk cara penginstalan Xampp dan pengaktifan server lokalnya saya tidak akan menjelaskan lagi disini .. karena saya sudah menjelaskannya pada artikel :
---------------------------------------------------------------- 
Cara membuat form login keren dengan html dan css 
--------------------------------------------------
klik disini untuk melihat tutorialnya 
--------------------------------------------------

3. Oke tahap yang ketiga nih buka text editor kalian dan salinlah Code dibawah ini .. Bisa kalian salin dengan cara menulis atau copas yang penting heppy aja dah :v
--------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>www.techno-evolutioner.blogspot.com</title>
    <!-- Mengambil index-style dari folder yang sama -->
    <link rel="stylesheet" type="text/css" href="index-style.css">
</head>
<body>
<!-- Ini adalah syntag untuk membuat display pas di tengah -->
<div id="wrapper">
    <img src="https://s32.postimg.org/ls2e49f39/Logo_Blog_Techno_ver_3.png">
</div>
<!-- Ini adalah syntq untuk konten / isi dari sebuah website -->
<div id="content">
<!-- Syntax link dari sebuah website -->
<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="#">Kontak</a></li>
    <li><a href="#">About</a></li>
    <li><a href="daftar.php">Login</a></li>
</ul>
<p id="line">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
</div>
<div id="footer">
    <p id="foot">Lisensi Kode Full Dari Techno-Evolution | www.techno-evolutioner.blogspot.com</p>
</div>
</body>
</html>
---------------------------------------------------------------------
Simpan code diatas dengan format index.html ... 

4. Lanjut salin lagi ni kode ya guys ;)
---------------------------------------------------------------------
body {
    padding: 10px;
    margin: 0;
    background-color: grey;
}

#wrapper {
    width: 980px;
    min-height: 300px;
    background-color: white;
    margin: 0 auto;
}

img {
    height: 310px;
    width: 980px;
}

#content {
    width: 980px;
    min-height: 300px;
    background-color: #fff;
    position: fixed;
    top: 340px;
    left: 193px;
}

li{
    list-style: none;
    float: left;
    background-color: grey;
}

a {
    text-decoration: none;
    padding: 10px;
}

a:hover {
    background-color: #fff;
    padding: 8px;
}

a:visited {
    color: blue;
}

#line {
    position: fixed;
    left: 193px;
    top: 400px;

}

#footer {
    width: 980px;
    min-height: 80px;
    background-color: #000;
    position: fixed;
    top: 600px;
    left: 193px;
}

#foot {
    color: white;
    text-align: center;
}
---------------------------------------------------------------------
Simpan code diatas dengan format index-style.css 

5. Setelah anda memiliki dua buah file diatas yakni file index.html dan index-style.css , pindahkan kedua file tersebut ke 
---------------------------------------------------------------------
C:/Xampp/htdocs/latihan
------------------------
ket: Latihan adalah folder baru yang harus anda buat terlebih dahulu didalam folder htdocs
---------------------------------------------------------------------

6. Nah setelah kedua folder diatas sudah diletakkan di pos terdekat . eh salah di direktori Latihan  , Sekarang kita lihat hasilnya . 

7. Buka browser kalian dan ketikkan di halaman pencarian browser localhost/latihan/ -> Enter .

       
Untuk Source Kode nya download dibawah ini ;).
---------------
|DOWNLOAD
--------------- 

 Oke guys bila ada problem atau anda ingin menyampaikan kritik dan saran .. Monggo saya persilahkan dan juga saya tunggu komentar anda.