|
Labels:
Tip dan Trik Bloger
Letak CSS Di Dalam Template
STRUKTUR DARI BAGIAN CSS STYLE
Di tutorial ini akan diperlihatkan struktur dari CSS Styling Section, yang
merupakan bagian ke 2 dalam struktur blogger template code.
Sekali lagi, tidaksemua template memiliki struktur yang sama. Itu tergantung style pribadi dari
desainernya. Tapi saya menemukan struktur yang memperlihatkan struktur
yang sangat logis dan banyak memudahkan ketika coding, debugging, dan
customizing template. Sekali lagi, Jika kita bisa mengerti tutorial ini, nanti kita
bisa mengubah desain dan struktur dengan cara yang kita mau. Tapi pertama-
tama kita harus mengerti ini dan di bawah ini ada struktur yang sangat
sederhana untuk dimengerti dan digunakan.
Kita bagi CSS Styling Section menjadi 9 bagian yang lebih kecil. Untuk saat ini
kita akan mempelajari bagian-bagian ini secara umum. Kita akan
mempelajarinya lebih detail mengenai coding di dalam sub-bagian2 ini nanti di
rangkaian tutorial ini. Selalulah mengacu pada struktur blogger template code
untuk membantu kita memahami sub-bagian yang dijelaskan di sini.
Subsection 1 - Variable:
Sub-bagian ini mengandung deklarasi (pengenalan) dari font dan warna
variable yang muncul di bagian Font and Color tab dalam page Layout.
Contohnya Text color atau text font variable yang bisa kita pilih dan ubah
menggunakan font and colors tab. Di dalam template-template yang dibuat
ourbloggertemplate.com, ditambahkan banyak variable (mendekati 40+)
disesuaikan dengan beberapa standard blogger template untuk memudahkan
kita mengatur banyak hal dalam template.
Subsection 2 - Global:
Bagian ini berisikan kode untuk mengontrol Layout dan tampilan umum. Jika
kita melihat kotak hijau d atas, kita akan melihat "body {.....}". ini berarti setiap
kode berada di dalam "{.....}" akan mengontrol property umum (size, layout, dan
tampilan) dari badan template (body/semua yang terlihat di layar komputer).
Sebagai contoh, bagian ini mengontrol lebar dari template dan warna latar
belakang atau gambar. Tapi ini tidak mengatur property detail dalam body
container, contohnya, jika ini mendeklarasikan text font kemudian dalam sub-
bagian memasang kembali property yang sama, property yang diatur dalam
body container akan tidak diperlihatkan atau dibatalkan.
Dalam sub-bagian, kita juga menemukan bagian besar yang penting lainnya-
Outer-wrapper dan content-wrapper- sehingga sub-bagian ini tempat untuk
mengatur bagian-bagian ini.
Subsection 3 - Header:
bagian ini mengatur property di dalam bagian header wrapper. Yang paling
umum adalah Blog Title dan Blog Description. Pada kebanyakan template di
ourblogspottemplate, sudah ditambahkan extra objek pada Header wrapper-
yakni Linkbar (Menubar Horisontal). Biasanya, kita tidak bisa menambah objek
pada header karena tidak bisa menggunakan tab Add Page Element. Untuk
menambahkan linkbar, kita bisa mengubah bagian ke 3 dari template code
struktur ( bagian data). Selain itu Ada juga yang menambahkan Google Search
Bar. Idealnya, kita bisa menambahkan apapun yang kita inginkan jika tahu
bagaimana caranya menggunakan bagian ketiga ini. Ini akan kita lakukan nanti.
merupakan bagian ke 2 dalam struktur blogger template code.
Sekali lagi, tidaksemua template memiliki struktur yang sama. Itu tergantung style pribadi dari
desainernya. Tapi saya menemukan struktur yang memperlihatkan struktur
yang sangat logis dan banyak memudahkan ketika coding, debugging, dan
customizing template. Sekali lagi, Jika kita bisa mengerti tutorial ini, nanti kita
bisa mengubah desain dan struktur dengan cara yang kita mau. Tapi pertama-
tama kita harus mengerti ini dan di bawah ini ada struktur yang sangat
sederhana untuk dimengerti dan digunakan.
Kita bagi CSS Styling Section menjadi 9 bagian yang lebih kecil. Untuk saat ini
kita akan mempelajari bagian-bagian ini secara umum. Kita akan
mempelajarinya lebih detail mengenai coding di dalam sub-bagian2 ini nanti di
rangkaian tutorial ini. Selalulah mengacu pada struktur blogger template code
untuk membantu kita memahami sub-bagian yang dijelaskan di sini.
Subsection 1 - Variable:
Sub-bagian ini mengandung deklarasi (pengenalan) dari font dan warna
variable yang muncul di bagian Font and Color tab dalam page Layout.
Contohnya Text color atau text font variable yang bisa kita pilih dan ubah
menggunakan font and colors tab. Di dalam template-template yang dibuat
ourbloggertemplate.com, ditambahkan banyak variable (mendekati 40+)
disesuaikan dengan beberapa standard blogger template untuk memudahkan
kita mengatur banyak hal dalam template.
Subsection 2 - Global:
Bagian ini berisikan kode untuk mengontrol Layout dan tampilan umum. Jika
kita melihat kotak hijau d atas, kita akan melihat "body {.....}". ini berarti setiap
kode berada di dalam "{.....}" akan mengontrol property umum (size, layout, dan
tampilan) dari badan template (body/semua yang terlihat di layar komputer).
Sebagai contoh, bagian ini mengontrol lebar dari template dan warna latar
belakang atau gambar. Tapi ini tidak mengatur property detail dalam body
container, contohnya, jika ini mendeklarasikan text font kemudian dalam sub-
bagian memasang kembali property yang sama, property yang diatur dalam
body container akan tidak diperlihatkan atau dibatalkan.
Dalam sub-bagian, kita juga menemukan bagian besar yang penting lainnya-
Outer-wrapper dan content-wrapper- sehingga sub-bagian ini tempat untuk
mengatur bagian-bagian ini.
Subsection 3 - Header:
bagian ini mengatur property di dalam bagian header wrapper. Yang paling
umum adalah Blog Title dan Blog Description. Pada kebanyakan template di
ourblogspottemplate, sudah ditambahkan extra objek pada Header wrapper-
yakni Linkbar (Menubar Horisontal). Biasanya, kita tidak bisa menambah objek
pada header karena tidak bisa menggunakan tab Add Page Element. Untuk
menambahkan linkbar, kita bisa mengubah bagian ke 3 dari template code
struktur ( bagian data). Selain itu Ada juga yang menambahkan Google Search
Bar. Idealnya, kita bisa menambahkan apapun yang kita inginkan jika tahu
bagaimana caranya menggunakan bagian ketiga ini. Ini akan kita lakukan nanti.
Subsection 4 - Main:
Bagian ini mengatur segala property (ukuran, Layout, dan tampilan) dalam
Main -Wrapper, antara lain- Date Header, Posting, Comment, feed link, dan
beberapa widget yang kita tarik ke bagian Main menggunakan tab add page
element.
Subsection 5 - Sidebar:
Bagian ini mengatur property dari segala sesuatu dalam Sidebar-wrapper,
contohnya label, Blog Archieve, adsense, links, dll. Tapi ini tidak mengatur
berapa banyak sidebar yang kita punya atau lokasinya di blog (contoh: template
Sidebar-main-sidebar atau main-sidebar-sidebar). Bagian yang mengatur hal itu
adalah bagian tiga dari struktur blogger template code - yaitu Data Section.
Subsection 6 - Miscellaneous:
Bagian ini mengatur property dari elemen-elemen tambahan yang tidak diatur
oleh bagian-bagian di atas. Elemen tersenut antara lain Profile (about me),
Blockquote, dan kode. Ini berarti jika ingin mengubah warna quoted text atau
font dari nama panggilan di profile, bagian inilah yang perlu diubah.
Bagian ini mengatur segala property (ukuran, Layout, dan tampilan) dalam
Main -Wrapper, antara lain- Date Header, Posting, Comment, feed link, dan
beberapa widget yang kita tarik ke bagian Main menggunakan tab add page
element.
Subsection 5 - Sidebar:
Bagian ini mengatur property dari segala sesuatu dalam Sidebar-wrapper,
contohnya label, Blog Archieve, adsense, links, dll. Tapi ini tidak mengatur
berapa banyak sidebar yang kita punya atau lokasinya di blog (contoh: template
Sidebar-main-sidebar atau main-sidebar-sidebar). Bagian yang mengatur hal itu
adalah bagian tiga dari struktur blogger template code - yaitu Data Section.
Subsection 6 - Miscellaneous:
Bagian ini mengatur property dari elemen-elemen tambahan yang tidak diatur
oleh bagian-bagian di atas. Elemen tersenut antara lain Profile (about me),
Blockquote, dan kode. Ini berarti jika ingin mengubah warna quoted text atau
font dari nama panggilan di profile, bagian inilah yang perlu diubah.
Subsection 7 - Post-Footer:
Dalam template umum, bagian ini mengatur 3 hal:
1. Post-Footer - text di bawah post body. Ini bagian yang berisikan Informasi
tentang posting, atau text yang berkata "Posted by YourNickname, Labels: ....., 5
Comments, dll.
2. Blog-Pager - Link di bawah posting yang berkata "Newer Posts, Home, atau
Older Posts".
3. Feed-Link - link yang bilang "Subscribe to: Posts (Atom)".
Subsection 8 - Comment:
Bagian ini mengatur property dari bagian Comment di dalam blog.
Subsection 9 - Footer:
Bagian ini mengatur property dalam bagian footer. Pada umumnya, bagian
footer berisikan beberapa text yang menjelaskan kepemilikan atau copyright dari
blog. Dalam beberapa blog, mereka juga meletakkan bagian extra seperti :
Recent Posts atau Popular Posts dalam 2 kolom atau lebih. Pada dasarnya, kita
bisa meletakkan apapun dalam footer seperti dalam sidebar. Tapi jika kita ingin
menambahkan lebih dari 1 kolom di bagian footer, kita harus merombak bagian
ketiga dari struktur blogger template code
Semakin dalam semakin pusing kepala saya dalam belajar hal ini ... tapi Alhamdulilah tidak sepusing waktu pertama saya belajar lebih banyak tahu jadinya dan semakin penasaran .
Saya akan lanjutkan pada psotingan yang lain Ingat ini hasil COPAS yang sudah di edit
Dalam template umum, bagian ini mengatur 3 hal:
1. Post-Footer - text di bawah post body. Ini bagian yang berisikan Informasi
tentang posting, atau text yang berkata "Posted by YourNickname, Labels: ....., 5
Comments, dll.
2. Blog-Pager - Link di bawah posting yang berkata "Newer Posts, Home, atau
Older Posts".
3. Feed-Link - link yang bilang "Subscribe to: Posts (Atom)".
Subsection 8 - Comment:
Bagian ini mengatur property dari bagian Comment di dalam blog.
Subsection 9 - Footer:
Bagian ini mengatur property dalam bagian footer. Pada umumnya, bagian
footer berisikan beberapa text yang menjelaskan kepemilikan atau copyright dari
blog. Dalam beberapa blog, mereka juga meletakkan bagian extra seperti :
Recent Posts atau Popular Posts dalam 2 kolom atau lebih. Pada dasarnya, kita
bisa meletakkan apapun dalam footer seperti dalam sidebar. Tapi jika kita ingin
menambahkan lebih dari 1 kolom di bagian footer, kita harus merombak bagian
ketiga dari struktur blogger template code
Semakin dalam semakin pusing kepala saya dalam belajar hal ini ... tapi Alhamdulilah tidak sepusing waktu pertama saya belajar lebih banyak tahu jadinya dan semakin penasaran .
Saya akan lanjutkan pada psotingan yang lain Ingat ini hasil COPAS yang sudah di edit
Sobat sedang membaca artikel tentang 
