Final Touch untuk PolarisSpica™

Posted in: Komputer & IT,Website & Blog |

PolarisSpica™ ini blog milik Minnie Amalia yang dipublish di blogger. Beberapa waktu yang lalu, dia ingin desain blog yang simple dengan dekorasi warna hijau dan bintang. Sempat terlintas bayangan tentang desainnya, karena bintang tidak terlihat di siang hari, maka menggunakan nightscape serta landscape bernuansa hijau. Akhirnya ketemu juga setelah mencari2 nightscape dan landscape yang cocok. Tinggal bagaimana cara untuk mengedit gambar-gambar tersebut dan mengolahnya menjadi desain web.

PolarisSpica

PolarisSpica

Bagian headernya dibuat dengan

div#header_overlay{
  background: black url(...) no-repeat center top;

  /* z-index dari div supaya top-most dari element-element
  yang lain*/
  z-index: 99998;

  /* supaya posisi div nya tetap di tampil posisi tertentu di document
  walau document di scroll */
  position:fixed;
  top:25px;
  left:0;
  float:left;

  /* supaya div nya melebar 100% di inner width browser*/
  width:100%;
}

Bagian inner-content-nya menggunakan

background: transparent url(...) no-repeat center bottom;

supaya gambar backgroundnya berada di bagian bawah ketika di-scroll, dan tidak menganggu tulisan postingan.

Kemudian di bagian body juga menggunakan

background: transparent url(...) fixed no-repeat center bottom;

supaya gambar backgrond dari body berada tetap di bagian bawah document jadi ketika document di-scroll background akan selalu tampak di bagian bawah.

Selain itu juga ditambahkan CSS untuk mengoverride navbar blogger di bagian paling akhir template sebelum :

#navbar{
  width:100%;
  position:fixed;
  top:0;
  left:0;
  float:left;
  z-index: 99999;
}

Style ini supaya navbar selalu berada di atas document walau discroll sekalipun.




Speak Up!

Leave your own comment

Notify me of follow-up comments via e-mail (or subscribe here).




 

Share

Subscribe Feed

Email

Facebook

Twitter

Delicious

Digg

StumbleUpon

Google Buzz

Deviantart