Menambahkan Background Pada Posting & Sidebar Widget (1)
17 September 2010
0
comments
Salah satu rekan saya bertanya,“…mau tanya lagi kang, si blog ini ada kolom Tutorial & Make Over Blog, saya lihat itu tampilannya kok beda ya kang, pake background kura2 kalau tidak keberatan caranya buat gimana kang? ditunggu ya kang, thx.” Pertanyaan tersebut sebenarnya sudah diajukan kepada saya beberapa hari yang lalu, tetapi karena kesibukan baru hari ini saya membalasnya. Agar lebih mudah dimengerti saya putuskan untuk membuat posting, dan saya harap bisa berguna buat rekan blogger lainnya.
Posting kali ini saya akan membagi dalam 2 bagian, yang pertama adalah menambahkan background pada posting dan bagian kedua adalah menambahkan background pada sidebar widget.
PendahuluanAgar memudahkan rekan blogger, perlu dijelaskan terlebih dulu format dasar untuk menambahkan background, yaitu:
dan ditutup dengan
Keterangan : Kode_warna adalah kode warna dalam kode HTML, silakan ganti dengan warna yang kamu inginkan, contoh warna putih = #FFFFFF, atau hitam = #000000.
Dengan format dasar seperti di atas, kamu bisa menambahkan kode-kode lainnya seperti padding, border, text-align, dan lain-lain. Agar lebih mudah saya akan berikan contoh penggunaannya.
Bagian 1. Menambahkan Background Pada PostingCoba kamu masuk/login ke www.blogger.com dan bikin posting baru. Ketikkan kode di bawah ini pada halaman Edit HTML:
"The quick brown fox jumps over the lazy dog" is a pangram (a phrase that contains all of the letters of the English alphabet). It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Due to its shortness and coherence, it has become widely known and is often used in visual arts.
"The quick brown fox jumps over the lazy dog" is a pangram (a phrase that contains all of the letters of the English alphabet). It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Due to its shortness and coherence, it has become widely known and is often used in visual arts.
Kita lihat hasilnya di atas terlihat text terlalu dekat dengan bagian tepi, supaya terlihat lebih proporsional kita bisa tambahkan kode padding. Dan bila ingin membuat teks tersebut rata tengah (center) cukup tambahkan kode text-align. Contoh penerapannya sebagai berikut: "The quick brown fox jumps over the lazy dog" is a pangram (a phrase that contains all of the letters of the English alphabet). It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Due to its shortness and coherence, it has become widely known and is often used in visual arts.
"The quick brown fox jumps over the lazy dog" is a pangram (a phrase that contains all of the letters of the English alphabet). It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Due to its shortness and coherence, it has become widely known and is often used in visual arts.
Oh ya, kamu juga bisa merubah warna teks dengan menambahkan kode color: kode_warna. Dan garis tepi dengan kode border: tebal_garis kode_warna tipe_garis (contoh border: 1px #000000 solid). Kamu coba sendiri dan lihat hasilnya seperti di bawah ini:"The quick brown fox jumps over the lazy dog" is a pangram (a phrase that contains all of the letters of the English alphabet). It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Due to its shortness and coherence, it has become widely known and is often used in visual arts.
Sekarang kita tambahkan image sebagai latar belakang. Pertama-tama kamu siapkan image yang akan digunakan dan simpan (upload) ke situs penyimpanan file (file hosting) seperti flickr.com, photobucket.com, dan lain-lain. Misalkan saya sudah menyimpan image di flickr.com dan mendapatkan url imagenya seperti ini: http://farm4.static.flickr.com/3548/3518913074_0859d9f70e_o.jpg. Coba kita pasang kodenya seperti di bawah ini: "The quick brown fox jumps over the lazy dog" is a pangram (a phrase that contains all of the letters of the English alphabet). It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Due to its shortness and coherence, it has become widely known and is often used in visual arts.
"The quick brown fox jumps over the lazy dog" is a pangram (a phrase that contains all of the letters of the English alphabet). It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Due to its shortness and coherence, it has become widely known and is often used in visual arts.
Keterangan: kode no-repeat digunakan agar gambar/image tidak digunakan berulang-ulang, hal ini biasa digunakan apabila gambar/image berukuran besar. Kode top right menentukan posisi dari gambar/image yaitu posisi atas sebelah kanan. Dan kode justify adalah kode untuk perataan teks (rata kiri dan rata kanan).Bagaimana, sudah jelas kan? Apabila ada yang belum jelas silakan bertanya, atau apabila ada kesalahan penulisan kode mohon kritik dan saran. Terima kasih dan selamat mencoba. Dan tunggu bagian kedua segera.
Jangan Lupa Berikan Komentarnya ya Teman-teman anak muda
Categories:
BerBloG RiA,
Pemrograman,
Tips Komputer
If You Like This Post, Share it With Your Friends & Peers
0 Comments
