Fungsi Fixed Dan Cara Menggunakannya

Belajar fungsi arahan Fixed dan cara menggunakannya diblog. Fixed merupakan arahan css yang berarti menetapkan, dalam penggunaannya, fixed akan menciptakan posisi widget atau gadget menjadi menetap. Atau posisinya akan tetap disitu² saja. Walaupun kita mengarahkan mouse hingga kebawah. Untuk lebih jelasnya silakan lihat gambar dengan goresan pena Contoh penggunaan arahan fixed dibawah ini dibawah kiri. 

Dari contoh, posisi gambar tetap, walaupun mouse diarahkan ke atas atau bawah. Bagaimana membuatnya, silakan baca artikel cara membuat hidangan melekat diblog.

Setelah tamat membaca dan mencoba cara menciptakan hidangan melekat diblog. Sekarang aku beri pola penggunaan arahan fixed pada bab header blog, sedikit lebih rumit dari cara sebelumnya. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Lalu klik Desainer Template > tingkat lanjut > Tambahkan CSS.
3. Copy arahan dibawah ini. Lalu pastekan di kotak pada Tambahkan CSS.
#header {
  width: 100%;
  position: fixed;
top: 0px;
  left: 0px;
  right: 0px;
height: 88px;
margin:0px 0px 0px 0px;
padding:10px 0px 0px 10px;
z-index: 99;
white-space: nowrap;
background-color: #33aaff;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #1780dd 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
4. Maka tampilan header blog akan menetap, tapi masalahnya jikalau header kita beri fixed, bab posting(main) dan juga sidebar, posisinya akan naik. Ini dikarenakan posisi pertama dalam sebuah template itu ialah header, dikala header diberi fungsi fixed, maka akan ada kekosongan diposisi pertama, sehingga posisi kedua(main dan sidebar) akan naik menjadi posisi pertama.
5. Untuk mengatur main(posting) dan sidebar turun, tambahkan arahan berikut dibawah arahan dari langkah 3 tadi.
#main{margin:40px 0px 0px 0px;}
.sidebar{margin:40px 0px 0px 0px;}

Keterangan kode:
#main untuk bab posting
.sidebar untuk bab widget kanan dan kiri blog.
40px 0px 0px 0px untuk mengatur posisinya, atas, kanan, bawah, kiri.
6. Atur sesuai dengan yang kalian inginkan. Setelah itu gres save template. Selesai.

Sekarang, Pertanyaannya, berapa banyak widget yang anda gunakan diblog??? Jika kita hanya mengatur header saja, apalagi memakai background warna. Maka widget/gadget lain yang ada di bab header akan tertutup/tidak terlihat.

Solusinya, kita harus memperlihatkan fungsi fixed juga pada gadget lain yang ada diheader. Contoh: Misalkan anda memakai 2 Gadget lain pada bab header, menyerupai pola dibawah ini.

1. Gadget Menu Laman.
2. Gadget Kotak search.

Kita cari dulu kode id dari kedua Gadget/widget diatas. Cara mencarinya dapat dibaca di menciptakan cara menciptakan hidangan menempel diblog. Berikut pola dari kedua arahan id diatas:

1. PageList1
2. CustomSearch1

Setelah ketemu semua kode, selanjtunya menambahkan satu persatu arahan tersebut dengan fungsi fixed. Contoh Dari Keseluruhan arahan diatas.

#PageList1{
width: 100%;
  position: fixed;
  top: 0px;
  left: 790px;
  right: 0px;
  height: 30px;
z-index: 99;
white-space: nowrap;
}

#CustomSearch1{
width:30%;
position:fixed;
top:0px;
right:0px;
margin:40px 0px 0px 0px;
z-index:99;
white-space:nowrap}

Jika sudah memasang background pada header, gadget yang lain tidak perlu diberi background. Cukup dengan mengatur posisinya saja, atur arahan width: top, right, dan margin untuk mengatur posisi widget. Semoga Bermanfaat.

Contoh penggunaan arahan fixed dibawah ini