|
Untuk Demo dan Cara Memasang Script Kalian Bisa Cek Link DIbawah
Penting!
Sebelum Memulai Nya Ada Baiknya Kalian Memback-up Template Kalian Terlebih dahulu.
Source Code
Tambahkan cdn ini Terlebih dahulu di Atas Kode </head> Anda<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>
<div class="bottom-menu">
<div class="search-bar">
<input type="text" id="searchInput" placeholder="Type here to search">
<button onclick="performSearch()"><i class="fas fa-search"></i></button> <!-- Ikon pencarian -->
</div>
<div class="icons">
<div class="icon icon-windows"><i class="fab fa-windows"></i></div>
<div class="icon icon-github"><i class="fab fa-github"></i></div>
<div class="icon icon-chrome"><i class="fab fa-chrome"></i></div>
<div class="icon icon-firefox"><i class="fab fa-firefox"></i></div>
<div class="icon icon-file"><i class="fas fa-file-alt"></i></div>
<div class="icon icon-cloud"><i class="fas fa-cloud"></i></div>
<div class="icon icon-youtube"><i class="fab fa-youtube"></i></div>
<div class="icon icon-facebook"><i class="fab fa-facebook"></i></div>
<div class="icon icon-power"><i class="fas fa-power-off"></i></div>
</div>
</div>
<style>
.bottom-menu,.icon,.icons,.search-bar{display:flex}.bottom-menu{align-items:center;justify-content:space-between;background-color:#fff;padding:10px 20px;border-top:2px solid #007bff;box-shadow:0 -2px 10px rgba(0,0,0,.1);position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;flex-wrap:wrap}.search-bar{flex-grow:1;margin-right:20px;align-items:center}.search-bar input{width:100%;padding:10px;border:1px solid #007bff;border-radius:5px;transition:border-color .3s}.search-bar input:focus{border-color:#0056b3;outline:0}.search-bar button{background-color:transparent;border:none;cursor:pointer;margin-left:10px;color:#007bff;font-size:20px}.search-bar button:hover{color:#0056b3}.icons{gap:15px;flex-wrap:wrap}.icon{width:40px;height:40px;border-radius:5px;align-items:center;justify-content:center;transition:transform .3s;cursor:pointer;color:#fff}.icon:hover{transform:scale(1.1)}.icon-windows{background-color:#00a3e0}.icon-github{background-color:#211f1f}.icon-chrome,.icon-power{background-color:#4285f4}.icon-firefox{background-color:#ff7139}.icon-file{background-color:#f8c300}.icon-cloud{background-color:#4ea1ff}.icon-youtube{background-color:red}.icon-facebook{background-color:#3b5998}@media (max-width:600px){.bottom-menu{flex-direction:column;padding:10px}.search-bar{margin-right:0;margin-bottom:10px;width:100%}.search-bar input{width:calc(100% - 50px)}.icons{justify-content:center}.icon{width:35px;height:35px}}
</style>
Kosong
Kesimpulan
Diatas adalah Menu Buttom Windows., Jika Ingin Request Silahkan Berikan Komentar atau menuju Halaman Request:v. Sampai Jumpa di potingan Berikutnya :p
