Blogsome : Add Header

Trik memasang header memang laris untuk menyiasati tampilan blog secara instan. Bila di blogger kita sudah sempat membahasnya (baik dengan mode layout maupun template) maka akan lebih adil lagi bila pengguna blogsome juga diberi kesempatan yang sama. Cara ini juga tak menutup kemungkinan bisa digunakan pengguna wordpress di hostingan sendiri maupun yang sudha terinstal di komputer lokal, mengingat platform yang digunakan juga masih sama. Hanya yang digunakan disini adalah blogsome dengan platform wordpress lama.

Untuk pengguna Blogsome silahkan masuk log dengan membuka alamat URL blognya dan capai tautan login dibagian sidebar. Tautan ini biasanya beralamat di http://namablog.blogsome.com/wp-login.php. Atau untuk yang menginstal di komputer lokal akan beralamat di http://localhost/wp-admin.php.

Sesaat setelah berhasil masuk ke dashboard, hal yang pertama perlu kita siapkan adalah menyiapkan gambar untuk dipasang di bagian header. Ingat kan, kita akan memasang gambar sebagai header. Jadi syarat utama ini harus kita siapkan sebelumnya. Khusus untuk pengguna blogsome file gambar yang diperkenankan diunggah (upload) adalah jenis gambar berekstensi jpg, jpeg, gif dan png dan ukuranya tak lebih dari 300kb.

Bila gambar dalam keadaan siap dan siaga untuk diunggah, tuju bagian Upload.
Cari file gambar dibagian Browse, isi kolom Description bila perlu (kosongpun tak mengapa). Bila ada pilihan ciptakan thumbnail (Create Thumbnail), pilih No thanks(ini artinya kita mengabaikan pilihan, sekali lagi tak masalah). Setelah selesai akan ada konformasi File Uploaded! Your file headerku.jpg was uploaded successfully! Here’s the code to display it: %lt;img src=’/images/headerku.jpg’ alt=” />. Salin alamat file ini.

Untuk menayangkan gambar sebagai header kita perlu mengedit bagian CSS. Tuju tab Manage dan pilih subtab Files, gulung ke bawah hingga menenujab opsi Site Style Sheet.Klik. Cari bagian #Header seperti berikut pada theme :

#header {
background: #3C5FA1;
border-bottom: double 3px #CFDEE1;
border-left: solid 1px #CFDEE1;
border-right: solid 1px #CFDEE1;
border-top: solid 1px #CFDEE1;
font: italic normal 40px Georgia,’Times New Roman’, Times, serif;
margin: 0;
padding: 15px 10px 15px 60px;
}

tambahkan salinan alamat file tadi pada bagian CSS background-image: url(/images/headerku.jpg);
hingga lengkapnya menjadi :

#header {
background: #3C5FA1;
background-image: url(/images/headerku.jpg);
border-bottom: double 3px #CFDEE1;
border-left: solid 1px #CFDEE1;
border-right: solid 1px #CFDEE1;
border-top: solid 1px #CFDEE1;
font: italic normal 40px Georgia,’Times New Roman’, Times, serif;
margin: 0;
padding: 15px 10px 15px 60px;
}
terakhir klik button update template!

Selesai.

Dan sebenarnya header kita sudah terpasang. Hanya saja blogsome perlu beberapa saat untuk membarui halaman CSSnya. Untuk itu ada baiknya pula kita buka alamat URL blog tadi di jendela perambah lainnya. Atau lebih baik lagi bila bisa dicek di komputer lain untuk mendapatkan cache terbaru. Ini terjadi karena Blogsome hanya menyediakan 5 kali suntingan pada tiap halaman. Jadi bisa dimaklumi bila gambar header tak langsung muncul saat kita klik tautan untuk View Blog.


Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

6 pemikiran pada “Blogsome : Add Header

  1. aku nyoba ganti header dengan ngikutin cara2 yang tertulis d sini mas, tapi gagal maning gagal maning =(

    apa karena layout satu dengan yang lain beda code ya mas??

    Suka

  2. Kang, kayaknya perlu konsul lagi. Cara pasang gambar di wp yang hosting sendiri detailnya gmana ya? di theme asala dah ada gambar, ingin kuganti dengan imageku, gimana ya? please ya Kang.

    Baru belajar WP, tapi Blogspot tidak dilupakan.

    Suka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s