27/10/11

Utak Atik Template Bag. 1 (Ganti Tampilan Header)


21.30 |


Good evening, Good morning, Salam jumpa, Salam-Salaman dan Good-Goodan lah.
Semalaman Sarigala Senja habiskan buat belajar utak-atik HTML. Maklum, baru tuker template(nyombong...hehheee).
Masih ngantuk euy, mau tidur nanggung, bisa ketinggalan jum'atannya ntar. pikir-pikir mending nambah postingan. Walaupun ini tangan berasa keram, mata perih, pinggang pegal-pegal tapi daripada ga ada kegiatan mending curhat and berbagi pengalaman. ^_^


Terinspirasi dari kerjaan tadi malam, Kali ini Srigala Senja akan berbagi bagaimana cara mengganti header blog.
Jangan menunggu lama, mari kita lakukan reka peristiwa :-D
Bagi teman-teman yang bosan dengan tampilan header dan berfikir untuk nge-fresh-in tampilan blog tapi belum tahu caranya berikut Srigala Senja berikan.

Cara #1

  1. Sign-in ke blog
  2. Pilih Design/Rancangan
  3. Klik Page Elements/Elemen Laman
  4. Dihalaman itu akan tampil konsep blog anda, dibagian Header klik Edit
    Muncul jendela baru, tinggal diisi.
    Disitu kamu bisa merubah/menabah tulisan dan/atau Masukkan URL image/Upload image* yang akan dijadikan Header blog
  5. Klik SAVE
  6. Selesai! silahkan lihat Header Baru kamu *-*
*catatan: jika ingin memasukkan gambar/image sebagai header ada baiknya kamu cek dulu kode HTML template kamu. caranya: dibagian Rancangan tadi pilih Edit HTML, centang "Expand Template Widget" kemuadian cari kode #header-wrapper disitu kamu akan mendapati set untuk header kamu. contoh:

"#header-wrapper{ width:1000px; height:230px; margin:0px; padding:0px; text-align:left; background:#eeeeef; border-bottom:1px solid #242424; border-top:1px solid #242424;}"
Lihat tulisan width:1000px; itu artinya lebar blog adalah 1000 pixel, height:230px artinya tinggi header kamu 230 pixel, artinya lagi header kamu cocok sama gambar yang memiliki dimensi 1000x230px.

Jadi sebelum menjadikan gambar tersebut sebagai header ada baiknya kamu cocokkan dulu, terserah mau rubah yang mana. mau gambar yang dicocokkan sama header atau header yang dicocokkan sama gambar (panjang ya catatannya... :-D)

Cara #2
  • Sign-in ke Blog
  • Pilih Design/Rancangan
  • Masuk ku Edit HTML, centang "Expand Template Widget"
  • Cari kode /* Header ----------------------------------------------- */
    (agar mudah mencarinya klik F3/Ctrl+F pada keyboard)
    disitu kamu tinggal masukin URL image kamu.
    ini contohnya:
    /* Header ----------------------------------------------- */

    #header-wrapper {
    width:500px;
    margin:0 auto 10px;
    border:1px solid #ccc;
    background:url(http://thexzone.606h.net/Header15.gif);
    }
    }
    (tulisan warna kuning adalah URL image header kamu)
  • Klik Pratinjau
  • kalau sudah sip tinggal di Save.
Oke segitu saja dulu. ga kuat lagi ne!! :-/
Ooop opppp oopppzzz................
catatan paling penting sebelum utak-atik blog kamu sebaiknya DOWNLOAD TEMPLATE LENGAP kamu dulu buat jaga-jaga!!!


0 komentar: