Ini adalah beberapa contoh kegemaran saya bagaimana sempadan dan latar belakang boleh digunakan untuk kandungan berasingan:
Nih adalah rekaan yang sangat baik ini mencontohkan tema posting ini dengan sempurna. sempadan tebal dan latar belakang yang sederhana dengan segera menyampaikan daerah mana penting. 
Ini latar belakang berwarna diletakkan untuk kesan yang besar, dengan hanya sempadan halus di bawah unsur untuk menambah rasa perspektif.Sempadan dan warna latar belakang yang berbeza-beza warna palet yang sama: perubahan halus di tambah kedalaman warna untuk setiap elemen dari tema ini.Setelah melihat contoh-contoh ini, anda mungkin bertanya-tanya bagaimana anda boleh mencapai kesan yang sama pada template Blogger Anda! Jadi izinkan saya untuk menjelaskan dasar-dasar menambah latar belakang dan batas ke blog anda.
Berbeza gaya untuk batasAda banyak cara untuk mengetahui ciri-ciri untuk sempadan di template blog anda.Dalam tutorial ini, saya hanya akan menjelaskan konsep asas untuk membantu anda memulakan.
Kaedah paling mudah untuk menambah sempadan ke sebuah elemen dari template anda adalah menambah hotel sempadan untuk elemen blog tertentu di bahagian template Blogger anda.
Misalnya, "# main-wrapper" bahagian dalam sebahagian Blogger template merujuk kepada bahagian posting utama. Untuk menambah border ke bahagian ini, kita boleh menambah baris seperti ini:
# Main-wrapper {
border: 3px solid #000000;
[other properties here]
}
Ini akan menyalinkan lebar 3 pixel, sempadan hitam pekat, seperti ini:Bahagian dengan sempadan hitam solid, tiga piksel lebar
A section with a solid black border, three pixels wide
Dengan menggunakan contoh ini, anda juga boleh menukar warna(ketahui kod warna tertentu di http://html-color-codes.info/) , dan lebar sempadan, seperti ini : A section with a solid red border, five pixels wide
Borders tidak semestinya perlu solid!Alih-alih sempadan solid, anda boleh menambah ciri-ciri yang berbeza untuk mencipta kesan-kesan yang tidak biasa seperti:
Dotted
border: 3px dotted #000;
Dashed
border: 5px dashed green;
Double
border-style: double; border-color: blue;
Outset
border-style: outset; border-color: #404040;
Berbeza gaya untuk latar belakangLatar belakang boleh menjadi warna datar (ditakrifkan sebagai nilai hex, seperti # 000000) atau sebagai gambar (yang ditakrifkan oleh URL dari gambar).
warna latar belakang Flat mudah dibuat dengan menambah nilai warna hex imej sebagai hotel di bahagian gaya template Blogger anda. Sebagai contoh, jika saya ingin menambah warna latar belakang kuning untuk sidebar saya, saya boleh menambah baris dalam merah ke hotel sidebar-wrapper # dalam kod template saya, seperti ini:
# Sidebar-wrapper {
background: # FFCC00;
[Property gaya lain di sini]
}
Untuk menggunakan gambar sebagai latar belakang untuk sebahagian daripada template anda, anda akan perlu untuk menjadi tuan rumah online gambar latar belakang, dan menentukan gambar dengan menyambung ke URL dari gambar, seperti ini:
# Sidebar-wrapper {
background: url (http://imagehost.com/yourimage.jpg);
[Property gaya lain di sini]
}Anda juga boleh menggabungkan sifat warna dan imej latar belakang, seperti ini:
# Sidebar-wrapper {
background: # FFCC00 url (http://imagehost.com/yourimage.jpg) no-repeat-kiri atas;
[Property gaya lain di sini]
}
Contoh di atas akan memaparkan gambar di sebelah kiri atas sidebar, sementara semua ruangan lain akan kuning.Anda boleh membaca lebih lanjut tentang menambah imej latar ke blog Blogger anda di dalam artikel ini sebelumnya.
Menggabungkan Properties Border dan Latar BelakangIni adalah di mana hotel sempadan dan latar belakang boleh menjadi sangat stylish ketika diterapkan pada unsur-unsur dari template Blogger anda.
Dengan menggabungkan
A wide grey border
Dengan...A Paler Grey Background
Korang boleh gak wat efek camni:A stylish section for your blog!
border: 5px solid #666666;
background: #333333;
Korang boleh menambah imej latar belakang gak, mengulangi di seluruh bahagian, seperti ini:
Another example, using images, border and background color
border: 3px outset #99cccc;
background: #99cccc url(http://imagehost.image.jpg);
Dimana korang boleh masukkan border style dan background dalam template korang?
Bahagian utama dari template Blogger anda akan menjadi header, posting bahagian, sidebar (s) dan bahagian footer.
Watak hotel untuk bahagian ini dalam template anda mungkin akan kelihatan seperti ini:
Header Section - #header-wrapper or #header-wrap
Main Posts Section - #main-wrapper, #main-wrap or #main
Sidebar(s) - #sidebar-wrapper, #sidebar-wrap, #sidebar or .sidebar
Footer Section - #footer-wrapper, #footer-wrap or #footer
Jika anda mengedit salah satu bahagian di bahagian template Blogger anda, pastikan anda menyemak apakah sudah ada suatu hotel sempadan atau latar belakang ditakrifkan. Jika ada, anda akan perlu mengedit bahagian ini, bukan menambah yang lebih baru. Jika suntingan anda tidak akan muncul seperti yang anda ingin mereka untuk melihat!
Ingat: anda perlu melakukan pratonton sebelum menyimpan template anda!Kemudian jika anda memutuskan anda tidak menyukai perubahan yang telah anda buat, anda boleh mengklik butang "save" dan mula lagi.
Percubaan dengan gaya yang berbeza!
Percubaan dengan gaya yang berbeza!Menggunakan harta untuk sempadan dan hotel latar belakang dari bahagian yang berbeza dalam template anda, kemungkinan gaya are endless! Cuba skim warna yang berbeza, sempadan kontras dan latar belakang, dan bereksperimen dengan ubin gambar untuk melihat apa yang akan bekerja dengan baik untuk desain blog anda sendiri.
Berikut adalah beberapa sumber bermanfaat untuk membantu anda menggunakan sempadan dan imej latar belakang di desain sendiri template Blogger anda:
Saya berharap posting ini telah membantu anda mempelajari lebih lanjut tentang hotel sempadan dan latar belakang. Tolong beritahu saya tahu bagaimana anda telah menggunakan teknik-teknik dalam desain anda sendiri dengan meninggalkan komentar Anda di bawah ini.
