background yang berbeda untuk setiap halaman blog

Bikin background yang berbeda untuk setiap halaman blog? kenapa tidak. Lumayan dech buat tampil agak lain dari yang lain. Narsis gitu ..., dan pengunjung ngga bakalan bosan menjelajah blog kita karena bisa tampil dengan background yang berbeda-beda di setiap halamannya. Untuk demonya, klik di sini

Setelah sekian lama ngilikin template minima klasik, plus belajar apa itu css background, akhirnya ide untuk membuat background berbeda di setiap halaman blog bisa aku terapkan. Mumpung lagi hangat nih di kepala, mending aku posting aja dari pada keburu hilang, ya ngga...

Agak njelimet sih bro, tapi pelan-pelan pasti bisa. Baik, sebelum anda mulai ngilikin template, ada baiknya sobat membaca postingan tentang cara mengganti background blog di sini atau di sini.


Persiapan :

1. Buat dulu sebuah blog baru
2. isi dengan sembarang posting
3. buatkan label untuk postingan tadi, misalnya, blog, blogger hack, template, article dan sebagainya.
4. Lakukan trik trik semua menampilkan judul posting atau menampilkan hanya judul posting
5. Buat juga Readmore nya sekalian.
6. Posting tulisanmu.
7. Pasang widget label di sidebar blogmu
6. Bila semua udah selesai, sekarang kamu bisa melangkah ke tahap berikutnya

Memasang background utama :

Background utama yang kumaksud di sini adalah script backgroud yang terpasang langsung di Template blogmu, alias terpasang pada struktrur htmlnya. Ok kita lanjut yach.

1. Kopi kode di bawah ini, lalu edit dengan menggunakan worpad atau document txt.

body {background-image: url("http://syahenimkojek.googlepages.com/slank_logo2.jpg"); background-position: left; background-repeat: no-repeat; background-attachment: fixed;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
}


2. Gantilah url gambar/image yang berwarna merah dengan url gambarmu.

3. Kode center no-repeat; (Yang berwarna orange) bisa kamu ganti dengan left atau right. Ini adalah kode yang mengatur tata letak gambar pada blogmua, apakah mau di taruh di tengah, di kanan atau di kiri.

4. Kode no-repeat; boleh kamu hapus bila akan menggunakan gambar yang kecil dan memerlukan pengulangan agar gambarnya menjadi penuh. Contahnya seperti gambar di bawah ini ;



5. Kalau sudah selesai ngeditnya , balik lagi ke blogmu. Cari kode seperti di bawah ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5. Hapus seluruh kode di atas, lalu gantikan dengan kode hasil editan kita tadi.

6. Jika udah beres, klik SAVE

Nah sampai pada tahap ini, kita sudah bisa melihat perubahan background blog kita, klik aja View Blog.

Memasang background untuk halaman depan :

Halaman depan adalah halaman atau tampilan utama blog kita. Di halaman ini kita menempatkan berbagai widget/aksesoris yang wajib ada di halaman depan, diantaranya semisal tab menu, link para sobat kita, label, buku tamu atau widget-widget lain yang kita anggap perlu demi memudahkan pengunjug menjelajah isi blog kita.

Kerja kita kali ini agak sedikit praktis, karena css background dipasang seperti layaknya kita menambah widget/aksesoris ke sidebar blog.

Langkah pertama :

a. Copy script di bawah ini :

body {background-image: url("

Visit InfoServe for Blog Nebiak Sangau.

b. Edit dengan menggunakan wordpad atau document.txt.

c. Ganti url gambar (kode yang berwarna merah ) dengan url gambarmu

d. Ganti kode (yang berwarna biru) dengan left atau right, kode ini merupakan kode yang mengatur letak gambarmu itu nantinya.

e. Kode no-repeat; bloeh kamu hapus kalo memakai gambar dengan ukiran kecil atau berupa motif yang memerlukan pengulangan untuk bisa tampil penuh pada seluruh halaman

Langkah ke-dua :

Sekarang kita memasuki tahap kedua dimana kita akan memasang kode hasil editan tadi ke sidebar blog. pasti udah pada bisa dech. Namun ngga ada salahnya kalau aku uraikan kembali di sini. nyok ...

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Add a Gadget.
5. Pilih HTML/JavaScript.
6. Beri nama CSS1 pada kolom titel atau kolom judul, ini hanya penamaan saja. Terserah mau dikasih nama apa. Yang jelas, nama ini untuk mempermudah kita mencari widget ini nanti di ruang edit html.
7. Pastekan kode hasil editan kita tadi ke ruang conten.
8. Save.

Langkah ke-tiga :

Sekarang kita masuk pada langkah ke_tiga, dimana kita akan mengatur kode css backround yang kita pasang dengan nama CSS1 pada sidebar tadi supaya tampil pada halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya. Udah siap??? let's go ...

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Edit HTML
5. Conteng kotak Expand Widget Templates
6. Cari kode seperti di bawah ini : Kode yang berwarna biru merupakan kode tambahan yang membuat css background hasil editan kita tadi tampil di halaman utama atau front page.

7. Klik save, lantas klik view blog untuk melihat hasilnya.

Ok, kita sekarang sudah punya 2 buah backround berbeda, istirahat dulu. Besok baru diteruskan lagi. Tapi kalo mau dilanjutkan ... monggo mas ...

Memasang background untuk halaman Selanjutnya :

Halaman selanjutnya adalah halaman yang akan tapil bila kita bergerak (misalnya ) dengan mengklik readmore atau menglik judul posting. Kalo kita ingin membuat backroundnya, maka langkah kita semakin ringan . Kan tadi sobat udah punya kode script yang dikasi nama CSS1 ? ingat kan. Nah kode tersebut sobat ganti namanya menjadi CSS2, ini umpamanya. Untuk memudahkan pencarian kode ini nantinya.

Namun biar lebih jelas, baiknya ku uraikan sedikit di bawah ini. ok coy ...

1. Ikuti langkah pertama seperti pada saat kita membuat backround untuk halaman pertama tadi, dari point a sampai d. Yaitu mengedit kodenya dengan worpad atau document txt.

2. setelah selesai di edit, pasang ke side bar seperti biasa dan beri nama widget kita ini dengan nana CSS2.

3. Ikuti langkah ke-tiga dengan penempatan kode berwarna biru yang sedikit berbeda seperti tampak pada kode di bawah ini ; perhatikan baik-baik perbedaannya.

4. Save dan view blog untuk melihat hasilnya.


Sedikit tambahan :

A. Membuat blog baru

Ini maksudnya supaya kita tidak kelabakan kalau terjadi hal-hal yang tidak di inginkan yang diakibatkan oleh eror atau hal-hal lain yang tak terduga

B. Pemilihan Background

Backround yang di pilih sebaiknya jangan yang terlalu besar, ini untuk menghindari lamanya proses loading page. Kalau backdround dasarnya hitam, maksudku background gambar yang kita pilih dasarnya hitam, maka usahakan kedua backround yang lain juga bernuansa hitam. Agar kita tidak kebingungan mengatur huruf postingan kita nantinya. Begitu pula misalnya kalau kita memilih memakai gambar yang bernuansa putih dan sebagainya. Lebih sip lagi bagi yang udah jago mengolah gambar dengan fhotoshop. ini sangat membantu. Namun kalo kebelet pengen mencoba, sobat boleh minta bantuan abah google untuk berburu gambar. ketikkan aja kata kunci background atau free wallpaper, lalu klik kanan pada gambar dan pilih open link a new tab. Setelah tab baru terbuka, klik "lihat ukuran gambar dalm ukuran sebenarnya. Tuggu hingga proses loading page selesai. Klik kanan pada gambar yang udah terbuka penuh lalu pilih copy image location. Pastekan deh lokasi atau url gambar tadi ke kode css bckroun yang kita edit.

C. Edit dengan worpad atau documen txt.

Ini berguna untuk menghindari kesalahan edit atau kesalahan letak kode tanpa mengganggu template blog kita. Plus hasil editan kita tadi bisa disimpan untuk dipergunakan nanti bila diperlukan.

D. Langkah-langkah pemasangan background.

Urutan langkah pemasangan dan pembuatan backgroun di atas ngga mutlak harus dimulai dari Memasang background utama kemudian background halaman depan lalu backgroun halaman selanjutnya. Sobat boleh langsung membalik langkah tersbut atu mencoba memanfaatka css backgrund seperti pada pemasangan untuk background halaman depan. Ini malah lebih asik. Sobat bisa mengati-ganti gambar dengan mengganti url gambarnya langsung seperti mengedit widget. Pada minima klasik, kalo kita sedang login khan ada gambar palu dengan obeng tuch. nah sobat tinggal klik aja gambar tersebut untuk mengedit kode di dalamnya. Asik kan, ganti-ganti deh sampe ketemu dengan gambar yang pas sesuai selera sobat.

E. Trik mengatur penampilan background (membuat blog lebih dinamis)

Trik ini juga sangat berguna bagi kita untuk memilah dan memilih mana widget yang harus kita tampilkan di halaman depan, mana yang boleh kita taroh di halaman selanjutnya. Ini bertujuan mengoptimalkan blog kita, biar loading page ngga terlalu berta tentunya. Trik ini ku dapat dari kang jaloe dan kuposting lagi dengan seizin beliau. Terimakasih boss ...

F. Trik menampilkan semua judul posting.

Nah trik ini ikut berperan penting dimana dengan trik ini blog kita seakan akan punya tiga halaman berbeda. Coba anda klik salah satu kategori pada label atau klik "show all post" di bawah deretan labal, maka judul posting kita akan tampil tanpa menyertakan isinya, nah backround yang akan muncul adalah backround yang kita pasang pertama kali. Tanpa kita sadari kita udah bikin Daftar Isi Blog. Asik khan, sambil nyelam minum air .... keselek ....

G. Permohonan Maaf

Berhubung bikin postingnya teburu-buru, jadi harap dimaklumi kalo penjelasannya uadi bertele-tele dan tulisannya banyak yang kurang huruf atau terbolak balik. Kritik dan sarannya kojek tunggu di ruang komen demi kemajuan kojek dalam bikin posting.

H. Ucapan terima kasih

Kojek mau ngucapin terimakasih sama Kang Jaloe yang udah ngasi izin untuk Kojek mencatut script-script di blognya.

Juga kepada rekan-rekan yang selalu ngasih suport buat Kojek. Tampa kalian Kojek bukan siapa-siapa.

Salam bloggers ...