Belajar fungsi kode Fixed dan cara menggunakannya diblog. Fixed merupakan kode css yang berarti menetapkan, dalam penggunaannya, fixed akan membuat posisi widget atau gadget menjadi menetap. Atau posisinya akan tetap disitu2 saja. Walaupun kita mengarahkan mouse sampai kebawah. Untuk lebih jelasnya silakan lihat gambar dengan tulisan Contoh penggunaan kode fixed dibawah ini dibawah kiri.
Dari contoh, posisi gambar tetap, walaupun mouse diarahkan ke atas atau bawah. Bagaimana membuatnya, silakan baca artikel cara membuat menu menempel diblog.
Setelah selesai membaca dan mencoba cara membuat menu menempel diblog. Sekarang saya beri contoh penggunaan kode fixed pada bagian header blog, sedikit lebih rumit dari cara sebelumnya. Ikuti langkah-langkah dibawah ini.
- Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
- Lalu klik Desainer Template > tingkat lanjut > Tambahkan CSS.
- Copy kode dibawah ini. Lalu pastekan di kotak pada Tambahkan CSS.
- Maka tampilan header blog akan menetap, tapi masalahnya jika header kita beri fixed, bagian posting(main) dan juga sidebar, posisinya akan naik. Ini dikarenakan posisi pertama dalam sebuah template itu adalah header, ketika header diberi fungsi fixed, maka akan ada kekosongan diposisi pertama, sehingga posisi kedua(main dan sidebar) akan naik menjadi posisi pertama.
- Untuk mengatur main(posting) dan sidebar turun, tambahkan kode berikut dibawah kode dari langkah 3 tadi.
- Atur sesuai dengan yang kalian inginkan. Setelah itu baru save template. Selesai.
#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);
}
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);
}
#main{margin:40px 0px 0px 0px;}
.sidebar{margin:40px 0px 0px 0px;}
Keterangan kode:
#main untuk bagian posting
.sidebar untuk bagian widget kanan dan kiri blog.
40px 0px 0px 0px untuk mengatur posisinya, atas, kanan, bawah, kiri.
.sidebar{margin:40px 0px 0px 0px;}
Keterangan kode:
#main untuk bagian posting
.sidebar untuk bagian widget kanan dan kiri blog.
40px 0px 0px 0px untuk mengatur posisinya, atas, kanan, bawah, kiri.
Sekarang, Pertanyaannya, berapa banyak widget yang anda gunakan diblog??? Jika kita hanya mengatur header saja, apalagi menggunakan background warna. Maka widget/gadget lain yang ada di bagian header akan tertutup/tidak terlihat.
Solusinya, kita harus memberikan fungsi fixed juga pada gadget lain yang ada diheader. Contoh: Misalkan anda menggunakan 2 Gadget lain pada bagian header, seperti contoh dibawah ini.
- Gadget Menu Laman.
- Gadget Kotak search.
Kita cari dulu kode id dari kedua Gadget/widget diatas. Cara mencarinya bisa dibaca di membuat cara membuat menu menempel diblog. Berikut contoh dari kedua kode id diatas:
- PageList1
- CustomSearch1
Setelah ketemu semua kode, selanjtunya menambahkan satu persatu kode tersebut dengan fungsi fixed. Contoh Dari Keseluruhan kode 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}
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 kode width: top, right, dan margin untuk mengatur posisi widget. Semoga Bermanfaat.
Contoh penggunaan kode fixed dibawah ini
