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

Selamat Mencoba

Get

Read more »

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">
<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>
Atau juga bisa memodifikasinya sendiri. Silahkan download saja script nya pada link dibawah ini.



Terimakasih atas kunjungan anda. Semoga Bermanfaat. :-)

Get

Read more »

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>
<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>
Atau download saja Scriptnya disini (Download ZIP)

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.


Sekian dari saya. silahkan dicoba di pc/laptop anda masing-masing. Semoga Bermanfaat. :)

Wassalammualaikum Wr. Wb..

Get

Read more »