Css Background Image Gradient

Background image gradient tidak selalu harus menggunakan image jpg atau png. Bisa juga memanfaatkan kode css, seperti pada contoh di bawah ini.

<html>
<head>
<title>Latihan CSS</title>
<style>
body {
    background-image : linear-gradient(to right, #ff5722, #ff9800);
}
</style>
</head>
<body>

</body>
</html>

Kode css yg di gunakan pada bagian ini

body {
    background-image : linear-gradient(to right, #ff5722, #ff9800);
}

Silahkan mencoba semoga berhasil, wassalam.

Menu Navigasi Dengan Posisi Fixed Di Bawah Halaman Dengan Script CSS

Bagaimana cara membuat navigasi di bawah halaman dengan posisi yang selalu muncul alias tidak terbawa scroll ketika halaman keatas.

Berikut adalah contoh kode untuk membuat navigasi di bawah halaman. Pertama buat file html seperti dibawah nama file misalkan index.html.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Endang Cahya Permana</title>

    <!-- Library bootstrap 4 //-->
    <link rel="stylesheet" href="bootstrap-4.0.0/bootstrap.min.css">
    <script type="text/javascript" src="bootstrap-4.0.0/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-4.0.0/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap-4.0.0/popper.min.js"></script>
    <!-- Library iconic glyphicon //-->
    <link href="open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

    <!-- Kode css halaman //-->
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <div id="container">
        <div id="main">
        </div>
    </div>
    <footer id="nav-footer">
        <div class="row">
            <div class="col nav-item-footer">
                <span class="oi oi-menu" title="icon home" aria-hidden="true"></span>
            </div>
            <div class="col nav-item-footer">
                <span class="oi oi-cart" title="icon cart" aria-hidden="true"></span>
            </div>
            <div class="col nav-item-footer">
                <img src="images/whatsapp20.png">
            </div>
        </div>
    </footer>
</body>
</html>

Include kan library di bagian tag head.

<!-- Library bootstrap 4 //-->
    <link rel="stylesheet" href="bootstrap-4.0.0/bootstrap.min.css">
    <script type="text/javascript" src="bootstrap-4.0.0/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-4.0.0/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap-4.0.0/popper.min.js"></script>
    <!-- Library iconic glyphicon //-->
    <link href="open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

File library di atas bisa di download di halaman website resminya.

Didalam file style.css masukan kode di bawah.

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

#container {
    min-height: 100%;
}

#nav-footer {
    background: #3b589d;
    position: fixed;
    height: 45px;
    width: 100%;
    bottom: 0px;
}

.nav-item-footer {
    text-align: center;
    color: #fff;
    font-size: 20px;
    padding-top: 6px;
}

Link : Download File ZIP

Semoga bermanfaat. wassalam.

MyOS Mikro – Solusi usaha jualan online untuk UMKM

MyOS (My Online Shop) mikro adalah aplikasi atau website toko online yang di khususkan untuk berjualan barang-barang kebutuhan sehari-hari. Bedanya MyOS mikro dengan online shop lain, MyOS mikro yaitu sudah di lengkapi dengan data awal produk barang yang sudah ada di dalamnya, pengguna tinggal melakukan update penyesuaian harga barang.

Lengkapnya klik https://myos-mikro.blogspot.com/

Membuat Number Spinner Bootstrap

Berikut script untuk membuat number spinner, yang tampilannya itu ada tombol kurang 1 angkat di sebelah kiri input angka dan sebelahkanannya tombol untuk tambah 1 angka. Silahkan coba script dibawah.

Script HTML

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
	<div class="row">
		<div class="col-xs-3 col-xs-offset-3">
			<div class="input-group number-spinner">
				<span class="input-group-btn">
					<button class="btn btn-default" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>
				</span>
				<input type="text" class="form-control text-center" value="1">
				<span class="input-group-btn">
					<button class="btn btn-default" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
				</span>
			</div>
		</div>
	</div>
</div>

Script JQuery

$(document).on('click', '.number-spinner button', function () {    
	var btn = $(this),
		oldValue = btn.closest('.number-spinner').find('input').val().trim(),
		newVal = 0;
	
	if (btn.attr('data-dir') == 'up') {
		newVal = parseInt(oldValue) + 1;
	} else {
		if (oldValue > 1) {
			newVal = parseInt(oldValue) - 1;
		} else {
			newVal = 1;
		}
	}
	btn.closest('.number-spinner').find('input').val(newVal);
});

Semoga bermanfaat, salam coding, wassalam.

Membuat Navbar Responsive Dengan CSS

Navbar merupakan bagian yang tidak terpisahkan dalam halaman sebuah website. Wajib ada dan di butuhkan dalam sebuah website, mungkin seperti itu. Dalam pembuatan sebuah navbar bisa dengan berbagai cara. Ada yang menggunakan script html, javascript dan css, ada yang hanya css. Untuk contoh di atas pembuatan navbar hanya menggunakan css dan html saja. Silahkan coba script di bawah ini.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link 
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=
swap" 
rel="stylesheet"> 
  	<style>
      header {
        margin-top: 60px;
      }
  	   img {
        display: block;
        width: 100%;
  	  }
      nav {
        position: fixed;
        z-index: 10;
        left: 0;
        right: 0;
        top: 0;
        font-family: "Montserrat", sans-serif;
        padding: 0 5%;
        height: 60px;
        background-color: #3e65da;
      }
      nav .logo {
        float: left;
        width: 40%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #fff;
      }
      nav .links {
        float: right;
        padding: 0;
        margin: 0;
        width: 60%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      nav .links li {
        list-style: none;
      }
      nav .links a {
        display: block;
        padding: 1em;
        font-weight: bold;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
      }
      #nav-toggle {
        position: absolute; 
        top: -60px;
      }
      nav .icon-burger {
        display: none;
        position: absolute; 
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
      }
      nav .icon-burger .line {
        width: 30px;
        height: 5px;
        background-color: #fff;
        margin: 5px;
        border-radius: 3px;
        transition: all .3s ease-in-out;
      }
      @media screen and (max-width: 768px) {
        nav .logo{
          float: none;
          width: auto;
          justify-content: center;
        }
        nav .links{
          float: none;
          position: fixed;
          z-index: 9;
          left: 0;
          right: 0;
          top: 60px;
          bottom: 100%;
          width: auto;
          height: auto;
          flex-direction: column;
          justify-content: space-evenly;
          background-color: rgba(0, 0, 0, .8);
          overflow: hidden;
          box-sizing: border-box;
          transition: all .5s ease-in-out;
        }
        nav .links a{
          font-size: 14px;
        }
        nav .icon-burger{
          display: block;
        }
        nav :checked ~ .links {
          bottom: 0;
        }
        nav :checked ~ .icon-burger .line:nth-child(1) {
          transform: translateY(10px) rotate(225deg);
        }
        nav :checked ~ .icon-burger .line:nth-child(3) {
          transform: translateY(-10px) rotate(-225deg);
        }
        nav :checked ~ .icon-burger .line:nth-child(2) {
          opacity: 0;
        }
      }
  	</style>
</head>
<body>
<header>
    <div class="container">
      <nav>
        <input id="nav-toggle" type="checkbox">
        <div class="logo">
          Logo<strong>Perusahaan</strong>
        </div>
        <ul class="links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Login</a></li>
            <li><a href="#">Register</a></li>
        </ul>
        <label for="nav-toggle" class="icon-burger">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </label>
      </nav>
    </div>
</header>
      <img src="https://picsum.photos/200/300?random=1">
</body>
</html>

Hasil tampilan website

Semoga bermanfaat, salam koding, wassalam.

Penampakan Windows 11

Logo menjadi berbentuk kotak-kotak dengan sisi-sinya yang sedikit melengkung.

Pada halaman desktop icon-icon aplikasi tersimpan di dalam kotak di tengah-tengah layar, berikut icon-icon di taskbarnya.

Pemilahan aplikasi yang terbuka bisa di tampilkan dalam beberapa bagian window layout.

Tambahan lainnya aplikasi-aplikasi android bisa langsung terakses tanpa harus instal aplikasi pihak ketiga.

Demikian cuplikan dari windows11, Anda berminat, tertarik dan bersemangat ……? kalau anda tidak berminat berarti anda mungkin user linux ubuntu. Semoga bermanfaat, wassalam.

Seri Belajar PHP Dari Dasar

PHP merupakan bahasa pemrograman yang tidak terlalu sulit untuk di pelajari oleh siapa pun baik itu dari pelajar sma, smp, bahkan sd, mahasiswa, atau pun umum. Banyak referensi-referensi yang sudah ada di internet bisa kita gunakan. Namun tidak jadi berdosa jika disini di buatkan kembali versi blog. Bagi yang berminat silahkan pantau alamat di bawah ini.

http://endangcahyapermana.blogspot.com/

Ubuntu Enable Autologin

Samahalnya di windows, pada gui ubuntu pada awal pertama kali masuk akan diminta user id dan password untuk login. Untuk sebagian kasus tidak dibutuhkan maka halaman login bisa tidak di perlukan, secara default tampilan login akan muncul. Agar tidak muncul dan langsung ke halaman desktop, maka hal yang di lakukan adalah salah satunya dengan merubah konfigurasinya seperti berikut.

Masuk terminal, ketik perintah berikut.

vim /etc/sddm.conf

Lalu pada file configurasi ssdm.conf

Tambahkan script di bawahnya nama user misal rahman di file ssdm.com

User=<user_name>

Lengkapnya

[Autologin]
Session=Lubuntu
User=rahman

Coba reboot untuk mengetesnya.

Semoga bermanfaat, wassalam;