Tutorial Template Blogger 4 : Kontainer Umum Dan Elemen Template Blogger
Berikut adalah daftar dari semua kontainer umum dan unsur-unsur dalam template Blogger serta fungsinya (elemen pada dasarnya adalah setiap objek yang membuat fungsi blog dan kontainer , elemen besar mengandung unsur-unsur yang lebih kecil atau beberapa isi lainnya).
Unsur-unsur umum yang akan ditunjukan bukan berarti elemen yang ada atau harus ada dalam semua Template Blogger,karena itu tergantung selera pembuatnya. Disini hgnya akan diuurai beberapa elemen saja agar kita dapat mengembangkannya sendiri.
Yoo kita merujuk ke gambar Bagian CSS Styling di bawah ini agar dapat gambaran yang lebih jelas .
Simbol-simbol # . Menunjukkan atribut dari elemen (semacam klasifikasi dari jenis elemen).
Global :
- body {.....} - properti umum untuk seluruh template.
- # Outer-wrapper {.....} – Kontainer awal dan terbesar untuk semua isi template . Di dalamnya ada header-wrapper, content-wrapper, dan footer-wrapper.
- # Content-wrapper {.....} - berisi sidebars wrapper dan main wrapper/containers.
- a {.....} - ini menetapkan sifat keseluruhan teks link anda.
- a: visited {.....} - ini menetapkan sifat teks link yang dikunjungi .
- a: hover {.....} - ini menetapkan properti link teks jika mouse diarahkan kesitu.
Header:
- # Header-wrapper - container yang membungkus Judul Blog dan Deskripsi Blog.
- # Header - container hanya di dalam header-wrapper.
- # H1 header - perintah ini mengontrol tampilan dan tata letak Judul Blog .
- # Header h1 a - mengatur properti dari Judul Blog sebagai link teks.
- # Header deskripsi -. Sifat Deskripsi Blog .
- # Header a img - mengatur properti dari sebuah gambar di dalam kontainer header.
- # Main-wrapper - container yang membungkus Date Header, Blog Posts, Comments, Feed Link, dan setiap widget yang ada di atas atau di bawah Blog Posts.
- # Main – container atau wadah di dalam main-wrapper.
- # main .widget -. Mengontrol sifat dari semua widget dalam main kontainer.
- h2.date-header - mengatur properti dari date header (tepat di atas judul postingan).
- Post -. Menetapkan sifat-sifat Blog Post containers.
- Post h3 -. Menetapkan sifat-sifat Judul Posting .
- Post-body p -. Menetapkan sifat-sifat body atau isi dari posting .
- Post ul -. Menetapkan properti dari daftar unordered (daftar yang tidak bernomor).
- Pasca ol -. Mengontrol sifat-sifat ordered list (daftar bernomor).
- Post li -. Mengontrol properti dari daftar individu di dalam daftar unordered atau ordered list.
- a img - mengatur sifat umum dari suatu gambar (yang mengacu pada link, dan gambar itu sendiri adalah link).
- Sidebar-wrapper –. Kontainer yang membungkus semua elemen dan isi sidebar.
- Sidebar - kontainer hanya di dalam sidebar-wrapper.
- # Sidebar1 - mengatur properti dalam sidebar1.
- # Sidebar2 - mengatur properti di dalam sidebar2. Jika ingin sama sifat dalam sidebar1 dan sidebar2 , tidak perlu menuliskan # sidebar1 dan # sidebar2 dalam kode CSS Anda.
- .. Sidebar widget - mengatur properti dari semua widget (Elemen Halaman Added) pada sidebar .
- # Sidebar1 widget - hanya mengatur widget di sidebar1.
- Sidebar BlogArchive -.. Menetapkan sifat Blog Archive. Secara teknis, ini adalah sebuah widget sidebar juga,
- Sidebar h2 -. Menetapkan judul / header dari widget sidebar.
- Sidebar # BlogArchive1. H2-set properti dari judul Blog Archive's .
Secara teknis, Profil (About Me) ditempatkan di dalam sidebar, tapi aku meletakkannya di bagian Miscellaneous karena ada unsur yang lebih kecil bersama-sama dengan Profile.
- # Profile1 - set properti untuk blok About Me / Tentang Saya .
- # Profile1 h2 - mengatur judul / header untuk blok About Me.
- . Profil-img a img - Mengatur gambar di blok About Me.
- . Profil-textblock - Mengatur deskripsi penulis Aboutme blok.
- . Profil-data - Mengatur data penulis dalam About Me blok.
- . Profil datablock - mengatur blok keseluruhan data dalam About Me blok.
- Blockquote - Mengatur teks kutipan dalam posting Anda.
- Code - Mengatur teks yang terkandung dalam tag kode posting Anda.
- Post-footer -. Menetapkan sifat keseluruhan dari kontainer/wadah post-footer.
- Post-footer-line -. Menetapkan sifat untuk setiap baris baru dalam post-footer.
- Post-footer -. Mengatur properti teks link di dalam post-footer.
- .. Post-footer post-comment-link - menetapkan "komentar" link di dalam post-footer.
- # Blog-pager - mengatur properti dari link "posting baru", "Beranda/home", dan "posting lama".
- # Blog-pager-newer-link - mengatur properti dari link "posting baru".
- # Blog-pager-older-link - mengatur properti dari link "posting lama".
- . Feed-link – mengendalikan link feed: Entri (Atom)
- # Comments - mengatur properti kontainer/wadah komentar secara keseluruhan.
- # Komentar sebuah - mengatur properti teks link di dalam kontainer komentar.
- Komentar # h4 - mengatur header kontainer komentar.
- Deleted-comment -. Mengatur properti dari komentar dihapus.
- Comment-penulis - set properti dari penulis komentar.
- Comment-body p -. Menetapkan sifat Comment body.
- # Comments ul - mengatur daftar unordered dalam kontainer komentar.
- # Comments li - mengatur daftar individu di dalam kontainer komentar.
- # Footer-wrapper - container yang membungkus semua elemen dan isi di dalam bagian footer.
- # Footer - container di dalam footer-wrapper.
- # Footer h2 - mengatur properti dari judul footer / header.
- Widget # footer -. Mengontrol sifat widget footer.
- Footer a -. Mengontrol setiap teks link footer.
1. Posting sebelumnya Tutorial 3 : Setting Properti Kontainer Template Blogger
2. Posting selanjutnya Tutorial 5 : Menggunakan Blogger KursusTemplate
Source : Our Blogger Template.
- Thanks telah mampir, yo kita saling vote dan comment..
- Bila berkenan tolong share/bagikan dengan tombol share dibawah.
- Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan
Bang saya mau tanya. Saya kan bikin blog baru, pake template sederhana. Kalau dulu setahu saya template blog untuk edit HTML gak pake variable definition segala. Nah Ane udah utak atik nie script HTML. Saya mau kolom sidebar sebelah kanan persis kaya Blog di Milik Mas nie, ada border untuk masing2 widget. Kode yang harus saya cari dan tambah apa Mas ?? Saya tunggu jawbanya ya .. !!
BalasHapus@belajar bahasa inggris coba cari .sidebar .widget {
BalasHapusborder: 1px solid #eee;
.......
}