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.
Ada sebuah software gratis video editing yaitu software Openshot. Software Openshot bisa di instal di berbagai flatform sistem operasi baik windows, mac, atau ubuntu. Tertaring ingin membuat video dengan software openshot di ubuntu silahkan baca cara instalnya di link Cara Instal Openshot. Wassalam.
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 (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/
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.
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.
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.
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.
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;
Endang Cahya Permana 