Wednesday, November 11, 2009

CARA MEMBUAT SLIDE BACKGROUND BLOG

Menghias atau mempercantik blog dengan memasang background yang bisa berubah-ubah atau bergaya slideshow barangkali merupakan pertimbangan tersendiri bagi anda yang ingin tampil sedikit beda. Bosan baragkali dengan template lama atau templatenya keliwat canggih ??? apa salahnya kita mencoba membuat, lebih tepatnya mengedit template dari minima klasik biasa, tokh ternyata bisa kita hias sedemikian rupa, kita tambah-tambahin kolom misalnya atau kita hiasi dengan background. Hitung-hitung buat belajar ngobok-ngobokin kode HTML, ya ngga ??? ...

Baik, tanpa berpanjang lebar lagi kita langsung praktek nih ...

PERSIAPAN

1. Buat sebuah blog baru dengan menggunakan template standar dari blogspot yaitu template minima putih biasa yang 2 kolom. Kalo kepengen memakai yang tiga kolom, boleh sobat download di sini. Atau kepengen yang multi kolom alias kebanyakan kolom? download di sini.

2. Setelah blogmu jadi, isi dengan sembarang posting, jangan lupa cantumkan beberapa buah label di kotak labels for this post pada ruang postingmu.

3. Pasang read more nya.

5. Pasang widget label di sidebar blogmu.

Nah, sekarang kita masuk ke tahap pembuatan backgroundnya.


A. MEMASANG BACKGROUND UTAMA

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

background-image:url('http://kojeksyahenim.googlepages.com/serangga.gif');background-color:transparent;
background-attachment: fixed;
background-position:top left;
background-repeat:no-repeat;

Ganti url gambar yang berwarna merah dengan url gambarmu.

kode top left yang berwarna biru bisa kamu ganti dengan top right, bottom left, bottom right, left, center atau right. Sesuaikan dengan besarnya gambarmu. Bila menggunakan gambar berukuran besar ganti saja dengan center.

Kode no-repeat yang berwarna hijau adalah kode yang menyatakan bahwa gambar yang kamu pasang tidak memerlukan pengulangan, Nah, kalau memakai gambar berukuran kecil semisal gambar texture, hapus saja kode no-repeat tersebut.

2. Login ke blogger --> Klik Customize --> Layout --> Edit html. 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;
}


3. Rubah kode di atas dengan menambahkan kode hasil editan kamu tadi sehingga hasilnya menjadi seperti di bawah ini : Perhatikan baik-baik penempatan kode hasil editan yang berwarna biru.

body {
background:$bgcolor;
background-image:url('http://kojeksyahenim.googlepages.com/serangga.gif');
background-color:transparent;
background-attachment: fixed;
background-position:top left;
background-repeat:no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

4. Simpan hasil pekerjaanmu dengan mengklik tombol SAVE TEMPLATE.

B. MEMASANG BACKGROUND HALAMAN DEPAN/FRONT PAGE

Tahap pertama

1. Kopi kode seperti di bawah ini, edit terlebih dahulu dengan menggunakan worpad atau document txt.



Ganti url gambar yang berwarna biru dengan url gambarmu.

Atur letak gambar dengan merubah kode bottom right yang berwarna kuning

Atur pengulangan gambar bila diperlukan dengan menghapus kode no-repeat yang berwarna hijau. Bila tidak biarkan saja, jangan di hapus.


Tahap ke_dua

Tahap ke dua adalah tahap pemasangan kode hasil editan tadi ke sidebar blog anda, caranya sebagai berikut :

1. Login ke blogger --> Klik Customize --> Layout --> add a gadget --> HTML/JavaScript.

2. Isi title/judul dengan (misalnya) css1.

3. Pastekan kode hasil editan tadi ke ruang content.

4. Klik save untuk menyimpan hasil hasil kerjamu.

Tahap ke_3

Tahap ini adalah tahapan dimana kita akan mengatur css background yang bkita beri nama css1 tadi untuk tampil di halaman depan saja dan akan menghilang bila kita bergerak ke halaman selanjutnya.

1. Login ke blogger --> Klik Customize --> Layout --> Edit html. Centeng kotak Expand Widget Templates

2. Cari nama css background tadi, lalu selipkan dua buah script seperti tampak di bawah ini. Perhatikan penempatan kode yang berwarna biru
















Secara default, setiap penambahan elemen halaman yang kita lakukan akan dinamai secara otomatis oleh blogspot denag HTML1, HTML2 dan seterusnya.

CSS1 nama dari elemen halaman yang kita tambahkan tadi untuk memudahkan kita mencari elemen yang bersangkutan di ruang edit HTML. Jadi sebaiknya setiap widget/aksesoris kita beri nama.

Kode



dan kode



adalah kode yang membuat elemen halaman yang kita pilih hanya tampil di halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya.

C. MEMASANG BACKGROUND UNTUK HALAMAN SELANJUTNYA

Di sini kerja kita sedikit mudah. Bukankah tadi anda punya kode css background yang anda edit dengan worpad atau document txt lalu anda pasang di side bar dan anda beri nama css1? Nah manfaatkan kode tersebut. Ikuti langkah-langakahnya seperti di mulai dari pengeditan css tersebut hingga css background tersebut terpasang di sidebar blog. Ingat !!! untuk memudahkan kita mencari css backround tersebut, berilah nama misalnya css2.

Untuk mengatur agar css backround yang kita beri nama css2 tadi anda tinggal mengikuti langkah MEMASANG BACKGROUND HALAMAN DEPAN/FRONT PAGE tahap ke_tiga, point 1 sampai 2. Kemudian selipkan 2 baris script seperti tampak pada kode di bawah ini : perhatikan letak penempatan kode yang berwarna biru.



















Nah, ngga terlalu sulit khan bloggers, selamat dech ... sekarang blog anda bisa tampil dengan background yang berbeda pada setiap halamannya.

CARA MEMBUAT TEKS BERGERAK

Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.

Marquee ini bisa di buat dengan menggunakan tag ....

Atribut yang sering di gunakan adalah :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks

DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks

BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan

Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.

SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :



marquee dari kanan ke kiri



hasilnya :

marquee dari kanan ke kiri

ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .

Contoh marquee dari perilaku gerakan :



marquee menurut perilaku



marquee menurut perilaku


Contoh marquee dengan variasi hurup dan warna latar belakang :

&ltFONT >



hasilnya :

marquee dengan variasi hurup


Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :



silahkan tunjuk ke sini



hasilnya :

silahkan tunjuk ke sini


Contoh marquee yang di dalam nya terdapat link :



Rubrik Elektronik


Electronic Rubric


Kolom iklan




hasilnya :
Free Template

Kolom iklan

Kang Rohman



Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Selamat ber eksperimen

Recent Tirai Examination's

Stocks Exchange