Showing posts with label script. Show all posts
Showing posts with label script. Show all posts
Tuesday, August 30, 2016
Cara Membuat Kotak Script Dengan Sroll Di Blogger
Cara Membuat Kotak Script Dengan Sroll Di Blogger

Pasti ribet kan Kalo gak ada kotak script , kenapa Karena tulisan script itu banyak sekali , jangan khawatir karena ada kotak sript maka akan mudah pengunjung me-copy sript itu atau lainnya
Petama Anda login dulu ke blogger dan pilih lah Entri Baru
Buat tulisan contoh Seperti di Gambar dan tulis lah enri sesuai pikiran anda di saat anda ingin menaruh kotak sript pilik HTMl di samping Compose

copy sript ini di bawah ini
<div style="border: 3px #eeeeee solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 100px; width: 520px;
text-align: left;">
.kode script disini.</div>
dan paste kan di HTML , contoh gambar di bawah ini

dan lihat hasil nya , Contoh di kotak script di bawah ini
Contoh :
Welcome to my blog
tenggarongcityblog.blogspot.com
By
Madan
Welcome to my blog
tenggarongcityblog.blogspot.com
By
Madan
Selamat Mencoba
Tutorial Coding Cara Membuat Script Html CSS Sederhana tapi Menarik menggunakan Notepad
Tutorial Coding Cara Membuat Script Html CSS Sederhana tapi Menarik menggunakan Notepad

Kali ini saya akan membuat sebuah tampilan web sederhana menggunakan html dan css menggunakan Notepad++.
Berikut tampilan html sederhana :

Pada gambar diatas, Saya menggunakkan elemen css box-shadow, border-radius dan :hover pada div panel.
Berikut script html nya :
<html lang="id">Atau juga bisa memodifikasinya sendiri. Silahkan download saja script nya pada link dibawah ini.
<head>
<title>Biodata Saya</title>
<style>
body{
color:#000;
background-color:#fff;
font-size:1.2em;
margin:auto;
padding:0;
}
.panel{
color:#000;
background-color:#add8e6;
text-align:center;
padding:18px;
margin:6px auto;
max-width:50%;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
box-shadow:0 2px 4px #888;
}
.panel:hover{
box-shadow:0 2px 8px #00008b;
}
</style>
</head>
<body>
<div class="panel"><b>BIODATA</b></div>
<div class="panel">
<p>
<img src="img.png" height="150" width="150"/>
</p>
<p align="center">
<table>
<tr><td><b>Nama Lengkap</b></td><td>: Syahrul Adiguna Kurniawan</td></tr>
<tr><td><b>NIM</b></td><td>: 14090018</td></td></tr>
<tr><td><b>Kelas</b></td><td>: 4A</td></td></tr>
<tr><td><b>Alamat</b></td><td>: Jl. Mawar No.04 Perumnas Gandasuli Brebes</td></td></tr>
<tr><td><b>Jenis Kelamin</b></td><td>: Laki-laki</td></td></tr>
<tr><td><b>E-Mail</b></td><td>: syahrulzzadie@gmail.com</td></td></tr>
<tr><td><b>Prodi</b></td><td>: D4-INFORMATIKA</td></td></tr>
</table>
</p>
</div>
</body>
</html>

Terimakasih atas kunjungan anda. Semoga Bermanfaat. :-)
Monday, August 29, 2016
Cara Membuat Kalkulator Menggunakan Script PHP dan CSS Sederhana
Cara Membuat Kalkulator Menggunakan Script PHP dan CSS Sederhana

Assalammualaikum Wr. Wb.
Kali ini saya akan share Cara Membuat Kalkulator Menggunakan Script PHP dan CSS Sederhana. sebelumnya kita harus menginstall XAMPP terlebih dahulu agar bisa membuka file .php nya.. jika sudah langsung saja saya bagi scriptnya.
Script PHP Kalkulator:
<html>Atau download saja Scriptnya disini (Download ZIP)
<head>
<title>Kalkulator Sederhana</title>
<style>
body{
color:#000;
background-image:url(background.jpg);
background-size:full;
background-color:#fff;
font-family:Tahoma, sans-serif;
font-size:18px;
margin:0;
padding:0;
}
input{
font-size:24px;
padding:6px;
border: 1px solid #000;
}
.panel{
background-color:skyblue;
box-shadow:0 2px 5px #000;
padding:18px;
line-height:28px;
margin:150px auto 2px;
max-width:380px;
}
.tombol{
color:#fff;
font-size:14px;
background-color:#212121;
boder-bottom:2px solid #000;
padding:8px;
margin:2px;
}
.tombol:hover{
background-color:orange;
}
a{
text-decoration:none;
color: #F57C00;
}
.footer{
max-width: 100%;
padding: 10px;
color: lime;
}
</style>
</head>
<body>
<?php
$bil1 = isset($_POST[bil1]) ? $_POST[bil1] : NULL;
$bil2 = isset($_POST[bil2]) ? $_POST[bil2] : NULL;
$hasil = isset($hasil) ? $hasil : 0;
if(isset($_POST[tambah])){
$hasil = $bil1+$bil2;
}
if(isset($_POST[kurang])){
$hasil = $bil1-$bil2; }
if(isset($_POST[kali])){
$hasil = $bil1*$bil2;
}
if(isset($_POST[bagi])){
$hasil = $bil1/$bil2;
}
if(isset($_POST[clear])){
$hasil=;
$bil1=;
$bil2=;
}
if(isset($_POST[sqrt])){
$hasil=sqrt($bil1);
}
if(isset($_POST[^2])){
$hasil=($bil1*$bil1);
}
if(isset($_POST[%])){
$hasil=($bil1*$bil2)/100;
}
if(isset($_POST[1/x])){
$hasil=(1/$bil1);
}
echo <div class="panel">.
<form action="" method="post">.
<div align="center"> KALKULATOR SEDERHANA </div>.
<div align="center">=============================</div>.
<b>MASUKAN BILANGAN KE-1:</b><br/>.
<input type="text" name="bil1" value=".$bil1."/><br/>.
<b>MASUKAN BILANGAN KE-2:</b><br/>.
<input type="text" name="bil2" value=".$bil2."/><br/>.
<input class="tombol" type="submit" name="tambah" value="+"/>.
<input class="tombol" type="submit" name="kurang" value="-"/>.
<input class="tombol" type="submit" name="kali" value="X"/>.
<input class="tombol" type="submit" name="bagi" value=":"/>.
<INPUT class="tombol" type="submit" name="clear" value="C"/>.
<input class="tombol" type="submit" name="sqrt" value="sqrt"/>.
<input class="tombol" type="submit" name="^2" value="^2"/>.
<input class="tombol" type="submit" name="%" value="%"/>.
<input class="tombol" type="submit" name="1/x" value="1/X"/><br/>.
</form>.
<b>HASIL:</b><br/>.
<input type="text" value=".$hasil." readonly/><br/>.
</div>;
?><br/><br/><br/><br/><br/>
<div class="footer">
Copyright © 14090008 & 14090018 | <a href="https://naufalhanifalbani.wordpress.com/">naufalhanifalbani.wordpress.com</a>, <a href="https://syahrulzzadie.blogspot.com/">syahrulzzadie.blogspot.com</a> | Jangan Lupa Kunjungi Blog Kami yaaa..
</div>
</body>
</html>
Copy dan Paste di Notepad++ lalu Simpan Sebagai index.php di folder C:/xampp/htdocs/kalkulator/"taruh disini" (kalau belum ada folder kalkulator, buat sendiri saja).
Setelah disimpan, buka browser anda lalu ketikan http://localhost/kalkulator/ kemudian enter.
Berikut beberapa screenshot tampilan kalkulatornya :
- Tampilan Utama Kalkulator.

- Operasi hitung Penambahan.

- Tampilan Operasi Hitung Pengurangan.

- Tampilan Operasi Hitung Perkalian.

- Tampilan Operasi Hitung Pembagian.

- Tampilan Tombol C / Clear.

- Tampilan Fungsi sqrt / Akar kuadrat.

- Tampilan Fungsi Bilangan Kuadrat.

- Tampilan Fungsi Tombol Persen.

- Tampilan Fungsi 1/X. 1 dibagi Bilangan Input.

Wassalammualaikum Wr. Wb..
Labels:
cara,
css,
dan,
kalkulator,
membuat,
menggunakan,
php,
script,
sederhana
Subscribe to:
Posts (Atom)