Border Dan Background Pada Template Blogger

Menggunakan border dan background pada blogger sangat mudah. 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 kamu 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 kamu 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 kamu ingin menambahkan warna latar belakang merah pada sidebar, kamu 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 kamu 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

Kamu bisa membuat efek seperti ini:

stylish section for your blog
border: 5px solid #666666;background: #333333;

Bahkan kamu 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);

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 kamu 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 kamu 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. Gak apa-apa jika kamu mencoba bereksperimen dengan berbagai jenis border dan image background serta warna-warna agar template blog semakin sesuai dengan keinginan. Secara lengkap saya sudah membuat artikel menggunakan gambar untuk latar belakang blog yang bisa melengkapi artikel ini. Untuk memudahkan pengaturan warna border dan background, gunakan color code ini. Oke, selamat bereksperimen dengan border dan image background template blog kamu.

Related Post:

CSS

• CSS Dock Menu Untuk Blogger
• Pasang Slider Zinmag Primus Di Blogger
• CSS Compressor Kurangi Berat Blog Anda
• Belajar CSS Border Padding dan Margin

or or