Kamis, 20 Januari 2011
Membuat Border Dan Background Template Blogger
Jika temen-temen bosan dengan tampilan template blog, tutorial kali ini mungkin bisa sedikit membantu untuk memodifikasi blog anda agar lebih kelihatan hidup dan menarik. Setelah postingan saya membuat bingkai tulisan di blog, kali ini saya mencoba mengembangkan untuk modifikasi blog dengan membuat border dan background yang bisa anda gunakan untuk memperindah sidebar dan main-wrapper.Dalam bahasa Indonesia border dan background dikenal dengan istilah batas tepi dan latar belakang template blog. Dengan border dan background, maka blog akan semakin bagus dan tampak cantik, apalagi dipadukan dengan kombinasi warna yang sesuai.
Border dan background berguna untuk memisahkan bagian-bagian dari blog. Juga dapat menunjukkan bagian yang penting seperti posting blog dan fitur-fitur yang ditambahkan pada bagian sidebar. Contohnya pada blog ini, terdapat batas tepi untuk bagian posting, header, sidebar dan footer sehingga setiap bagian dipisahkan oleh batas tepi kotak-kotak yang berbeda pula. Yang paling penting lagi, border dan background tidak mengharuskan anda untuk memiliki skil dan pengetahuan khusus untuk mengunakannya pada blog. Ada banyak cara untuk mengatur penggunaan border dan backgroud pada blog. Dalam tutorial ini saya hanya menjelaskan pengunaan dasar border dan background saja.
Jenis-Jenis dan Pengaturan Border
Cara termudah untuk menambahkan border pada setiap elemen di blog adalah menambahkan kode <b:skin> pada bagian template blog. Misalnya pada bagian #main-wrapper blogger yang mengacu pada tempat blog post, dapat ditambahkan kode border seperti ini
#main-wrapper
border: 3px solid #000000;
[kode lainnya di sini]
Kode border: 3px solid #000000; mengartikan adanya penambahan garis tepi batas dengan tebal garis 3 pixel berwarna hitam solid seperti di bawah ini:
A section with a solid black border, three pixels wide
Contoh di atas masih dapat dimodifikasi lagi sehingga menjadi seperti di bawah ini:
A section with a solid red border, five pixels wide
Border tidak harus selalu solid namun anda dapat mengubahnya dengan style border yang lain seperti dotted, dashed, double dan outset. Oke, contohnya dapat dilihat seperti di bawah ini :
Dotted border: 3px dotted #000;
Dashed border: 5px dashed green;
Double border-style: double; border-color: blue;
Outset border-style: outset; border-color: #404040;
Jenis-Jenis dan Pengaturan Backgroud
Backgroud dapat berupa paduan warna (didefinisikan sebagai nilai hex, seperti # 000000) atau berupa gambar (yang didefinisikan oleh URL dari gambar). Sangat mudah menggunakan flat warna sebagai backgroud blog hanya dengan menambahkan kode nilai hex warna pada template blog. Sebagai contoh, jika temen-temen ingin menambahkan warna latar belakang merah pada sidebar, anda bisa menambahkan kode warna merah pada bagian #sidebar-wrapper sehingga kode template menjadi seperti ini:
# sidebar-wrapper {
background: #DF0101;
[kode lainnya di sini]
}
Untuk menggunakan gambar sebagai background pada bagian template, maka anda harus menyimpan dulu gambar tersebut pada image hosting online. Setelah itu, ambil alamat url penyimpanan yang menghubungkan gambar. Jika sudah, padukan dengan kode di mana gambar ingin dijadikan backgroud. Contohnya seperti ini:
#sidebar-wrapper {
background: url(http://imagehost.com/yourimage.jpg);
[kode lainnya di sini]
}
Nah, warna dan gambar dapat dikombinasi menjadi background seperti kode di bawah ini:
#sidebar-wrapper {background: #DF0101 url(http://imagehost.com/yourimage.jpg) no-repeat top left;[kode lainnya di sini]
}
Contoh di atas akan menampilkan gambar di kiri atas sidebar, sementara ruang lainnya akan menjadi merah.
Kombinasi Border dan Background Properties
Pada bagian ini akan dijelaskan bagaimana kita dapat mengkombinasikan border dengan perintah-perintah untuk background untuk template blog. Misalnya seperti ini:
Mengkombinasikan ini
wide grey border
Dengan ini
paler grey background
Temen-temen bisa membuat efek seperti ini:
stylish section for your blog
border: 5px solid #666666;background: #333333;
border: 5px solid #666666;background: #333333;
Bahkan anda juga bisa menambahkan background image dan menambahkan garis pada seluruh bagian, seperti ini:
Another example, using images, border and background color
border: 3px outset #99cccc;
background: #99cccc url(http://imagehost.image.jpg);
border: 3px outset #99cccc;
background: #99cccc url(http://imagehost.image.jpg);
Penempatan Border dan Background Styles pada Template Blogger
Bagian utama template blogger adalah header, main posts, sidebar dan footer. Nah, pada template blogger biasanya kode tersebut ditunjukkan seperti ini:
- Header Section - #header-wrapper atau #header-wrap
- Main Posts Section - #main-wrapper, #main-wrap atau #main
- Sidebar - #sidebar-wrapper, #sidebar-wrap, #sidebar atau .sidebar
- Footer Section - #footer-wrapper, #footer-wrap atau #footer
Jika anda meng-edit bagian-bagian tersebut pada <b:skin> template blog, disarankan untuk mengecek terlebih dulu apakah sudah ada penambahan kode border dan background. Jika sudah ada, maka anda hanya perlu meng-edit bagian itu saja daripada menambahkan kode yang baru. Patut diingat bahwa tiap template mungkin saja berbeda dan penggunaan border dan image background dapat disesuaikan karena apa pun bisa diganti-ganti pada bagian ini. Cobalah mennggunakan latar belakang warna yang berbeda-beda, membuat warna border dan background lebih kontras. Nggak apa-apa jika anda mencoba bereksperimen dengan berbagai jenis border dan image background serta warna-warna agar template blog semakin sesuai dengan keinginan. Untuk memudahkan pengaturan warna border dan background, gunakan kode warna ini.
Itu tadi penjelasan singkatnya, temen-temen bisa ganti warna dengan gambar atau sesuaikan dengan selera masing-masing. Selamat berkreasi dan semoga bermanfaat.
Label:
tutorial blog