Cara sederhana membuat div berada di bawah kanan browser dengan css

Untuk membuat posisi div ingin berada di bawah kanan pada browser caranya tidak sulit. contoh kodenya adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<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>Css Position Fixed Bottom</title> 
 <style>
 .nav-fixed {
 background: #FF5722;
 position: fixed;
 bottom: 0;
 right: 0;
 padding: 8px 15px;
 margin-right: 5px;
 color: #fff; 
 }
 .nav-fixed-radius {
 border-radius: 4px 4px 0 0;
 }
 </style>
</head>
<body>
 
</body>
</html>

Jika dilihat pada contoh kode di atas, Kunci attribut yang di pergunakan agar porsisi div dibawah adalah pada atribut position : fixed, bottom: 0, dan right: 0.

silahkan coba sendiri untuk ber eksperimen. wassalam.

Advertisements

Membuat Dropdown Menu On Hover di Bootstrap

Secara default Navigator Menu Atau Dropdown Menu akan memunculkan submenunya ketika diklik. Namun, bagaimana caranya jika Dropdown menu akan muncul ketika mouse berada diatas menu, yakni dengan menambahkan kode javascript berikut.

 

 <[removeSpace]script type="text/javascript">
 $('ul.nav li.dropdown').hover(function() {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
 }, function() {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
 });
 <[removeSpace]/script>

 

catatan : hapus tulisan [removeSpace]

Ok, semoga bermanfaat, wassalam :-).

Kode CSS Untuk Modal Overlays Ketika Loading Proses

Modal Overlays di pergunakan untuk memblok layar sementara pada halaman web,
secara teknis layar modal ini berada pada posisi layer yang lainnya, dengan demikian layer-layer dibawahnya tidak bisa di akses. Mengapa ini di pakai, adalah memberi tahukan sedang ada proses kepada user, sehingga user dapat menunggu hingga proses yang berjalan selesai.

Bagaimana membuatnya … berikut adalah contoh kode untuk membuat modal overlays dengan menggunakan css dan jquery.

Kode CSS yang digunakan adalah sebagai berikut :

#loading-img {
background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
height: 100%;
z-index: 20;
}

.overlay {
background: #e9e9e9;
display: hide;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}

Kode JQuery yang digunakan adalah sebagai berikut :

$(“#button”).click(function () {
$(“.overlay”).show();
});
Dan, kode HTML yang digunakan adalah sebagai berikut :

<[remove_this]div class=”overlay”>
<[remove_this]div id=”loading-img”><[remove_this]/div>
<[remove_this]/div>

semoga bermanfaat, wassalam.

Cara install Sass – Scss di windows

endang-sass

Sebelum melakukan instalasi sass, anda harus mendownload aplikasi ruby terlebih dahulu. untuk mendapatkannya anda bisa mendownload melalui link dibawah ini :

http://www.4shared.com/file/jcVQwO8uce/rubyinstaller-231.html

jika sudah didownload buka insall program ruby.exe. ikuti langkah-langkah instalasi seperti pada aplikasi pada umumnya. jika sudah selesai, buka program command line.

lalu ikuti langkah-langkah seperti dibawah ini.

ketik

gem install sass

1-endang-gems-install-sass

jika error install sass, maka ketik perintah

gem sources-a http://rubygems.org/

dan ketik y

2-endang-gems-install-sass

setelah itu, ketik kembali

gem install sass

3-endang-gems-install-sass

jika ada progress instalasi hingga 100%, berarti sass sudah berhasil di install, untuk memeriksanya, ketikkan

sass –version

4-endang-gems-install-sass

untuk aplikasi tambahannya, yang nanti akan dibutuhkan ketika membuat scss. download aplikasi scout app, di link berikut :

http://www.4shared.com/zip/0Na5HnGNce/scout-app-071-win.html

selesai semoga bermanfaat. wassalam

 

Apa itu parallax dalam istilah web ?

Parllax adalah sebuah istilah yang penjelasannya kurang lebih seperti ini, ketika kita menscroll halaman sebuah web, dimana ada sebuah bagian web dan dibelakangya terdapat background gambar, apabila kita mencsroll ke bawah atau ke atas gambar di belakang ikut tersecroll namun pergerakannya lebih lambat dari pada bagian depannya. sehingga menimbulkan sebuah perspektif atau kesan pemandangan yang menarik, seperti kita melihat pemandangan objek gunung atau pohon dalam sebuah jendela mobil yang berjalan.

endang-gambaran-cara-kerja-parallax

Adapun kode untuk membuatnya adalah seperti berikut :
Kode HTML

< div class="header">
Header text, logo, dll
</div>

Kode CSS

.header {                
        background:url("images/bg.png") no-repeat center center fixed;
        background-size: cover;
        background-repeat: no-repeat   
    }    

Kode JQuery

    // Y axis scroll speed
        var velocity = 0.5;

        function update(){ 
            var pos = $(window).scrollTop(); 
            $('.header').each(function() { 
                var $element = $(this);
                // subtract some from the height b/c of the padding
                var height = $element.height()-18;
                $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px'); 
            }); 
        };

        $(window).bind('scroll', update);        
    

Kode untuk membuat posisi box pencarian agar tetap di atas

fixed-search-menu

 

Betikut cara untuk membuat kode pencarian berada diatas tidak ikut scroll dan tetap berada diatas.

 

Kode HTML

< div class="wrap" id="wrap"> 
  
  < header class="top-header"> 
    < span class="menu-icon"> ☰< /span> 
  < /header> 
  
  < div class="search"> 
    < input type="search" placeholder="Search or type URL" /> 
  < /div> 
  
  < div class="top"> 
    < div class="hero"> < /div> 
  < /div> 
  
  < main> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
  < /main> 
  
< /div> 

Kode CSS

* {
box-sizing: border-box;
}
body {
margin: 0;
}

.wrap {
width: 320px;
border: 1px solid #ccc;
height: 480px;
overflow: auto;
position: relative;
}
.top-header {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 60px;
.menu-icon {
position: absolute;
top: 0;
right: 0;
padding: 18px 20px;
}
.fix-search & {
background: #eee;
}
}

.search {
position: absolute;
top: 155px;
left: 20px;
right: 20px;
input {
width: 265px;
border: 1px solid #ccc;
padding: 8px;
font-size: 15px;
transition: width 0.2s;
-webkit-appearance: none;
}
.fix-search & {
position: fixed;
top: 10px;
input {
width: 250px;
}
}
}

.top {
height: 250px;
padding-top: 40px;
}
.hero {
width: 200px;
height: 100px;
background: #ccc;
margin: 0 auto;
}

main {
padding: 0 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
div {
width: 125px;
height: 80px;
background: #ccc;
margin: 0 0 20px 0;
}
}

Kode JS/ Jquery

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}

});

Kode untuk memperbaiki style css pencarian google custom

search-custom-engine-button-icon-not-show

Kode css berikut untuk . dimana tampilan button google terlihat abu dan ceper, aneh tapi nyata tapi memang bawaannya seperti itu. Akhirnya harus ditambahkan kode berikut untuk membenahi style css button tersebut.

<style>
.cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
height: 26px !important;
margin-top: 0 !important;
min-width: 13px !important;
padding: 5px 26px !important;
width: 68px !important;
}
</style>

tambahkan di html didalam tag <head>…</head>, sederhana namun semoga bermanfaat. wassalam.

Cara membuat css agar background gambar tidak ikut scroll (fixed) website

Setiap halaman website dibuat sebagus mungkin agar menarik para pengunjung. salah satu cara agar website tampil bagus adalah dengan menambahkan background gambar di belakang halaman. cara yang digunakan untuk menambakannya adalah dengan menggunakan kode css (bagi yang baru kenal css, silahkan searching di google apa itu css).

Biasanya dihalaman website background gambar ikut terbawa scroll ketika di geser. Namun, Bagaimana caranya agar gambar background gambar ini tidak ikut kebawa scroll ketika halaman di geser ke bawah. caranya adalah dengan menambahkan kode css dihalaman tersebut seperti cuplikan kode berikut .

 

body {
background: url(./images/endang_bg.jpg) no-repeat;
background-size: 100% 100%;
background-attachment:fixed;
}

untuk kode

url(./images/endang_bg.jpg)

disesuaikan dengan gambar dan lokasinya berada.

background-size: 100% 100%;

supaya ukuran gambar lebar dan tingginya full halaman.

background-attachment:fixed;

adalah untuk gambar background tidak bergeser.

 

demikian penjelasan dari saya semoga sukses, wassalam.

 

Cara CSS Membuat DIV Posisi Berada di Bawah Kanan Layar

endangcahyapermana-css-div-posisi-bawah-kanan
Div Box

Ketika kita buka halaman website, sering kita lihat ada kotak kecil yang berada di posisi bawah sebelah kanan layar. Kotak tersebut kadang berisi iklan, control navigasi atau layanan live chat atau chating langsung via website. Hal tersebut sungguh menyuguhkan tampilan website menjadi lebih interaktif dengan pengunjung. Namun, bagaimana caranya untuk membuatnya di halaman web html.

Setelah googling akhirnya menemukan cara untuk membuatnya, yaitu dengan menggunakan kode css dan jquery. Lengkap kode nya adalah sebagai berikut.

Didalam kode CSS adalah sebagai berikut

<style type=”text/css”>
.screen {
text-align: center;
background: #00DD88;
background: -moz-linear-gradient(center top , #00DD88 0%, #00CC00 100%) repeat scroll 0 0 transparent;
border-radius: 30px 30px 30px 30px;
margin: 5px 0 10px 15px;
position: absolute;
right: -980px;
display: none;
z-index: 100;
}
</style>

Didalam kode Javascript atau Jquery adalah sebagai berikut

$(‘.screen’).animate({
opacity: 1,
right: “50px”,
bottom: “10px”,
height: “toggle”
}, 1000, function() {
// Animation complete.
}).css(‘position’,’fixed’);

Dan kode html div box adalah sebagai berikut

<!DOCTYPE html>
<html>
<head>
 <title>Endang</title>
 https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
 <style type="text/css">
 .screen {
 text-align: center;
 background: #00DD88;
 background: -moz-linear-gradient(center top , #00DD88 0%, #00CC00 100%) repeat scroll 0 0 transparent;
 border-radius: 30px 30px 30px 30px;
 margin: 5px 0 10px 15px;
 padding: 15px;
 position: absolute;
 right: -980px;
 display: none;
 z-index: 100;
 color: #fff;
 }
 </style> 
</head>
<body>
 < div class='screen' >
 welcome to my website
 < /div >
 
 $('.screen').animate({
 opacity: 1,
 right: "50px",
 bottom: "10px",
 height: "toggle"
 }, 1000, function() {
 }).css('position','fixed');
  
</body>
</html>

 

http://www.4shared.com/rar/MFqPXbD9ce/Div_Box_Posisi_Bawah_Kanan_-_e.html