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

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.

Related Posts

• 4 February 2009 -- Busy.Sleepy.Dying.SelMa UB
• 20 August 2009 -- Ubah Permalink WordPress Tanpa Kehilangan Traffic Blog
• 27 July 2009 -- Memutar, menjungkirkan, dan Menulis Mundur Teks

Type your message here...

Name

Mail (not published)

Website

Type code above