Gadget Absolute Position pada DIV Tertentu - Pagi ini kembali membahas CSS. Banyak permasalahan atau pertanyaan  yang muncul soal widget atau elemen menggantung. Mungkin sudah banyak yang tahu tentang cara membuat widget selalu di pojok layar, menggantung dan tidak ikut bergerak ketika scroll di gerakkan. Memanfaatkan css position: absolute/fixed kita bisa melakukannya.

Namun, pemula banyak mengalami kendala ketika ingin implementasikan pemosisian tersebut pada bagian divisi atau elemen tertentu. Misalkan ia ingin membuat judul postingan atau foto postingan menggantung pada main-wrapper, atau ia ingin membuat gadget di sidebar menggantung pada sidebar-wrapper, seperti contoh pada gambar berikut ini:





Semua itu bisa Anda lakukan dan masih banyak lagi modifikasi yang mungkin Anda lakukan. Untuk membuat effect effect seperti itu. Masalah yang sering dialamai blogger adalah: "widget bukannya menggantung pada elemen/divisi tertentu melainkan menggantung pada body atau menggantung di layar secara keseluruhan". Misalnya, ketika ingin menempatkan foto author di pojok kanan atas main-wrapper, tapi ternyata malah berada di pojok kanan atas blog/layar monitor.

Pemecahan Masalah
Untuk memecahkan masalah ini sangat sederhana. Kita hanya melakukan perubahan pada kode css.

Misalkan ada kode HTML

<div id="outer-wrapper">
   <div id="main-wrapper">
      <div id="blog1">
         <div id="elemenmenggantung">
           TEKS ANDA
         </div>
      </div>
   </div>
</div>

Dasar Pertama: Gunakan ABSOLUTE untuk membuat suatu elemen permanen pada area tertentu.

Seperti kita tahu, untuk membuat "TEKS ANDA" menjadi menggantung (TEKS ANDA berada di divisi "elemenmenggantung"), maka kita menggunakan css seperti berikut ini

#elemenmenggantung {
position: absolute;
left: 0;
top: 0;
}

*position: absolute; untuk membuat posisi TEKS ANDA menjadi permanen pada tempat tertentu, tidak terpengaruh pergeseran widget lain.
*left: 0; menempatkan elemen permanent berjarak 0px dari arah kiri.
*top: 0; menempatkan elemen permanent berjarak 0px dari atas.

 Untuk kode di atas sudah tidak masalah karena banyak yang sudah memanfaatkannya. Nah, yang perlu diperhatikan adalah dasar kedua.

Dasar Kedua: Setiap elemen ABSOLUTE akan otomatis mengikuti elemen RELATIVE di atasnya.

Dalam artian seperti kode tadi, kita tulis ulang:

<div id="outer-wrapper">
   <div id="main-wrapper">
      <div id="blog1">
         <div id="elemenmenggantung">
           TEKS ANDA
         </div>
      </div>
   </div>
</div>

jika Anda menggunakan CSS:
#blog1 {
position: relative;
}

maka TEKS ANDA akan absolute/permanent menggantung  pada divisi blog1, berjarak 0px dari kiri blog1 dan berjarak 0px dari atas blog1.

Tapi, jika tidak ditemukan position:relative pada blog1, maka TEKS ANDA akan mencari ke divisi yang di atasnya lagi, pada kode di atas berarti: main-wrapper. Jika main-wrapper memiliki css position:relative maka TEKS ANDA akan menggantung pada main-wrapper. Tapi jika pada main-wrapper tidak ditemukan css position:relative maka TEKS ANDA mencari ke atasnya lagi yakni outer-wrapper. Begitu seterusnya.

Nah, akhirnya terjawab kenapa suatu elemen seringkali justru malah menggantung pada blog secara keseluruhan/pada body/atau berada di pojok monitor. Hal ini karena tidak ditemukan position:relative pada divisi-divisi di atasnya.

Di Akhir...
Bagi Anda sekarang jelas dan mudah, untuk membuat elemen menggantung ingat dua dasar:
Dasar 1: Gunakan ABSOLUTE untuk membuat suatu elemen permanen pada area tertentu.
Dasar 2: Setiap elemen ABSOLUTE akan otomatis mengikuti elemen RELATIVE di atasnya.

Semoga bermanfaat... Blogging is Sharing...

Item Description: Gadget Menggantung Pada Divisi Tertentu

Crop Image dengan Modifikasi Kode - Beberapa tombol cepat menggantung di tambahkan di editor postingan blogger yang baru. Salah satunya adalah tombol untuk kontrol gambar yang di upload. Misalnya saja, tombol untuk memilih ukuran gambar yang terdiri dari small (lebar atau tinggi 200px, menyesuaikan landscape dan potrait gambar), medium (lebar atau tinggi 320px, menyesuaikan landscape dan potrait gambar), large (lebar atau tinggi 400px, menyesuaikan landscape dan potrait gambar), x-large (lebar atau tinggi 640px, menyesuaikan landscape dan potrait gambar) dan original size (ukuran asli).

Nah, terkadang beberapa pilihan ukuran tersebut masih tidak sesuai dengan keinginan kita. Misalkan kita ingin menampilkan beberapa gambar di postingan dengan ukuran yang sama, tapi ukuran asli panjang dan lebar berbeda. Kita bisa memodifikasi kode gambar dengan merubah width dan height.

<img height="200" src="http://1.bp.blogspot.com/-q0SllRWoMWQ/UhQh2TYnEcI/AAAAAAAAFvg/Clu_7MgPCpg/s200/375640_536780363026119_737594887_n.jpg" width="200" />

*yang berwarna merah angkanya bisa diubah sesuai ukuran yang diinginkan.
*kode width dan height muncul setelah pemilihan ukuran small, medium, lareg atau x-large.

Namun, sudah pasti proporsional gambar akan berbeda-beda tergantung bentuknya persegi panjang atau persegi. Untuk menyeragamkan mungkin Anda bisa mencoba crop gambar dengan modifikasi kode seperti berikut:

<img src="http://1.bp.blogspot.com/-q0SllRWoMWQ/UhQh2TYnEcI/AAAAAAAAFvg/Clu_7MgPCpg/s200/375640_536780363026119_737594887_n.jpg"/>

menjadi

<img src="http://1.bp.blogspot.com/-q0SllRWoMWQ/UhQh2TYnEcI/AAAAAAAAFvg/Clu_7MgPCpg/s200-c/375640_536780363026119_737594887_n.jpg"/>

*hilangkan width dan height pada kode gambar.
*edit pada bagian yang berwarna merah dengan menambahkan kode -c  seperti kode di atas

Dengan cara ini otomatis gambar akan di-crop menjadi bentuk persegi, dan gambar tidak akan terkesan menjadi gepeng.

Item Description: Mengubah Ukuran Gambar Postingan Blogspot dengan Crop