Ada cara lain yang memungkinkan anda membuat background header selain menggunakan fitur yang disediakan blogger. Jika umumnya kita membuat background header melalui klik "EDIT" di Elemen Header (buka gambar di samping!), mungkin anda akan lebih tertarik untuk membuatnya melalui kode CSS. Mengapa demikian? Yah..., karena dengan kode CSS anda lebih punya kebebasan untuk berimprovisasi. Bahkan, jika menggunakan elemen header hanya dapat membuat (upload) satu background image), melalui kode CSS anda bisa menambahkan beberapa image lain sebagai background header. Jadi pada intinya melalui kode CSS anda punya kesempatan membuat background header blogger dari penggabungan beberapa background image. Sulitkah membuat background header menggunakan kode CSS? He.... he .... jangan kuwatir! Gampang... gampang ..., ko! Ada beberapa kode html yang digunakan blogger pada bagian header, tetapi secara khusus ketika anda membyat background header melalui "Elemen Header" yang digunakan adalah #header-inner (id='header-inner'). Anda akan menjumpai syntax ini ketika menggunakan Template Tata Letak (Template Blogger lama), sedang di Blogger Template Designer tak akan anda temukan.
Syntax #header-inner di Template Tata Letak
#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}Karena kini hampir semua blogger menggunakan Blogger Template Designer (Perancang Template Blogger) maka kita akan mencoba melakukan penambahan kode CSS di Blogger Template Designer.
D E M O
Penting untuk melihat demo blog yang membangun background headernya menggunakan kode CSS agar anda bisa membandingkan sejauh mana nilai lebih menggunakan kode CSS dalam membuat background header Blogger Template Designer bila dibandingkan dengan hanya mengandalkan fitur yang disediakan blogger. Silahkan klik link demo di bawah ini:
D E M O Background Header Blogger Template Designer
Kode CSS untuk membuat background header Blogger Template Designer
Kode dasar Background Header
#header-inner{
position:relative;
background:transparent url('background-header.jpg');
background-position:center;
background-repeat:no-repeat;
}Penambahan position:relative; akan memungkinkan anda membuat kode baru guna memasang teks atau image (background) tambahan melalui #header-inner:before dan #header-inner:after (CSS pseudo Classes). Selain itu anda juga dapat menggunakan kode html setelah id=header-inner dalam posisi absolute.
Yang penting diperhatikan sebelum membuat background header dg kode CSS
- Tentukan berapa lebar dan tinggi #header-inner. Anda bisa mengetahui tinggi dan lebar #header-inner secara cepat dan akurat dengan membuka link di bawah ini:
Trik ampuh untuk ketahui ukuran background header blogger. - Sebelum melakukan penambahan kode CSS, agar nantinya kode CSS berfungsi dengan sempurna silahkan hapus terlebih dahulu background header yang sudah terpasang melalui "EDIT" di "Elemen Header" (bagi yang sebelumnya sudah menggunakan background header).
Langkah membuat background header dg kode CSS
Untuk login klik di sini !Login di Blogger. Jika anda mennggunakan google mail (gmail), login cukup dilakukan dengan menuliskan user name dan password, namun jika bukan dari gmail tuliskan alamat email secara lengkap.
Setelah login dilakuka anda akan memasuki halaman dasbor (dasboard) yang di dalamnya berisi beberapa fitur , seperti posting, Stats, Rancangan (Design), Comments (Komentar, Settings (Pengaturan) dll.
Fitur Design (Rancangan) akan menghubungkan pengguna dengan fungsi edit template. Fungsi editing berada di Rancangan | Elemen Laman (Design | Page Elements) dan di Rancangan | Edit HTML (Design | Edit HTML). Klik "Edit HTML".
Kode CSS di simpan di antara tag pembuka head (<head>) dan tag penutup head (</head>) atau tepatnya di atas kode ]]></b:skin>.
Cari kode kode ]]></b:skin>.- Kode CSS yang disimpan ditemplate di atas kode ]]></b:skin> tidak memerlukan tag pembuka dan penutup style (<style type="text/css"> dan </style>)
- Klik Simpan Template (Save Template).
Contoh Kode CSS buat Background Header
Kode CSS yg lebih komplek
#header-inner{
position:relative;
background:#666 url('http://gubhugreyot-image-post.googlecode.com/files/gubhugreyot_bridge-900-200.jpg') center no-repeat;
}
#header-inner:before{
position:absolute;
display:block;
width:58px;
height:50px;
left:60px; /* code by: http://gubhugreyot.blogspot.com */
top:0px;
content:url('https://lh5.googleusercontent.com/-WVnUd2BO_UQ/TzvcQeXo4XI/AAAAAAAAAL8/av3xRaGcXjw/h120/gubhugreyot-animasi-pesawat-terbang-02.gif');
}
#header-inner:after{
position:absolute;
display:block;
font-size:27px;
color:red; /* code by: http://gubhugreyot.blogdetik.com */
text-shadow:1px 1px 1px #000;
right:20px;
bottom:10px;
content:"http://gubhugreyot.blogspot.com";
}Catatan/Keterangan:
- Panduan berbagai cara menyimpan kode CSS di template bisa anda baca dengan klik link berikut:
Berbagai cara simpan kode css - Jika menggunakan gambar animasi gif akan lebih baik seandainya anda meng-upload di http://picasaweb.google.com.
- Anda bisa mengembangkan contoh kode CSS di atas untuk disesuaikan dengan blog anda.
- Selalu akan lebih baik mengetahui terlebih dahulu ukuran background yang diperlukan ketika membuat sebuah background image
- Usahakan untuk menggunakan background dengan beban image tidak terlalu besar agar tidak mengganggu loading blog. Hal ini berlaku untuk keseluruhan background yang digunakan pada blog.
- Jangan terlalu banyak menggunakan image/gambar animasi secara berlebihan karena beban gambar animasi gif yang besar dan komplek sangat besar.
- Selain kode CSS di atas, masih banyak kemungkinan pengembangan kode background header dengan melibatkan syntax yang lain. Tunggu saja tutorial berikutnya!
- Gambar memang jadi alat yang hebat untuk membuat tampilan blog semakin cantik dan indah, tetapi menggunakan gambar tak ubahnya orang makan. Makan terlalu banyak bikin perut sakit dan akhirnya jalanpun tak bisa! He ... paling bisanya lari ke WC!!!!
:) bagus banget blognya
ReplyDelete