Kode CSS Template Bagian Body 2

Tutorial 8 : Kode CSS Template Bagian Body 2

Masih sekitar tutorial blog serial Struktur CSS Template Blogger yang sudah lama tidak saya update, Sebelum ini saya posting artikel tentang Kode Template Bagian Body silahkan kalau mau baca dulu agar nyambung dengan artikel ini sebagai lanjutannya yaitu Kode CSS Template Bagian Body 2 , begitu ceritanya….

Beberapa perintah khusus akan kita lihat dalam Kode CSS (Cascading Style Sheets) Template Bagian  Body  seperti sample di bawah ini :


<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no' >
<b:widget id='Header1' locked='true' title='Blog Title' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no' >
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes' >
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Blogger Template | JournalBlue' type='Text'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>

Catatan dalam Kode CSS Bagian Body ini adalah :

  1. Setiap bagian atau kontainer harus dibungkus (to be wrapped) dengan tag div dan tag b:section , begitulah secara defaultnya.
  2. Kemudian setiap tag div dan b:section diidentifikasi dengan perintah id. lebih lanjut perintah tersebut diklasifikasikan kedalam 'class' menggunakan perintah class.
  3. Identifikasi dan klasifikasi ini akan memudahkan dalam mengatur kode css untuk properinya.
  4. Didalam kode CSS, perintah id ditandai dengan  simbol #
  5. Symbol dan perintah class ditunjukkan dengan menggunakan simbol . (dot/titik)
  6. Sebagai contoh, dikode CSS terdapat #main-wrapper {...} atau .sidebar {...} yang mana kode ini digunakan untuk mengatur model di main-wrapper dan sidebar.
  7. Kita dapat pelajari lebih lanjut tentang identifikasi dan klasifikasi di w3schools.com

Beberapa hal penting lainnya dalam Kode CSS Bgian Body diatas :

  1. Semua blok yang dibungkus menggunakan tag b:section adalah widgets atau gadget, juga dinamakan Page Element. Sebagai contoh, dalam Header ada widget dengan nama Header1. Perhatikan, bahwa widget ini berisi kode maxwidgets='1' showaddelement='no'.
  2. Kode maxwidgets='1' berarti bahwa jumlah widget maksimum di header-wrapper adalah 1. Kita tidak dapat menambah widget / gadget dengan  Page Element pada Header seperti ini.
  3. Kode showaddelement='no' berarti bahwa tombol Add a Page Element tidak ditampilkan dibagian Header.
  4. Didalam main-wrapper, kita hanya bisa memberi kode showaddelement='no'yang  berarti tombol Add Page Element tidak boleh ditambahkan disini, tetapi kita dapat meletakkan widget diatas atau dibawah  Blog Posts didalam main-wrapper.
  5. Di sidebar-wrapper, terdapat kode preferred='yes'. Kode perintah ini berfungsi agar tombol Add a Page Element bisa diunakan untuk menambahkan widgets berapapun yang diinginkan. Selain itu dapat dipakai untuk memindahkan widget ke bagian/ wrapper lain dengan mendrag/menggesernya kelokasi lain.
  6. Di footer-wrapper, tidak ada kode perintah id. Ini berarti tidak ada tombol Add Page Element, tetapi dapat meletakkan widget kedalam bagian Footer.

Ok sampai disini dulu Belajar Tutorial Blog dalam topik bahasan Kode CSS Template Bagian Body 2 . Semoga bermanfaat dan jika sobat ingin menerima setiap artike dari Blog Tutorial Dan Bisnis secara gratis, silkahkan klik Subscribe Disini yang ada dibawah postingan ini.


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong share/bagikan dengan tombol share dibawah.
  3. Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Kode CSS Template Bagian Body 2 dengan Url https://tutorialdanbisnis.blogspot.com/2012/11/kode-css-template-bagian-body-2.html , bila berkenan silahkan bagikan dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, letakan link aktif artikel ini sebagai sumbernya dengan copy kode di bawah ini.


Related Post:

3 komentar:

Silahkan Comment disini, saya comment di sana..

Langganan Artikel

Enter your email address:

Delivered by FeedBurner

Label

  1. Bisnis (5)
  2. Daftar Isi (4)
  3. Info (4)
  4. Link (2)
  5. Olah Raga (1)
  6. SEO (5)
  7. Software (3)
  8. Template (14)
  9. Tips Dan Trik (2)
  10. Tutorial (16)

Alexa