Dalam tutorial ini menjelaskan sedikit lagi tentang beberapa perintah khusus yang kamu akan lihat dalam bagian Body. Di bawah ini contoh kodenya.
<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>Secara default, setiap container harus dibungkus dengan tag div dan tag b:section setiap div dan b:section diberi nama dengan mengidentifikasinya dengan id. Lebih jauh lagi bisa diklasifikasikan dengan kelas menggunakan perintah class pengidentifikasian dan klasifikasi ini berguna sebagai acuan ketika kita ingin mempermaknya menggunakan CSS. Dalam CSS kode, perintah id adalah mengacu pada penggunaan symbol command # (pagar) dan perintah class mengacu pada penggunaan symbol . (titik). Contohnya, dalam CSS kode, kita mungkin melihat #main-wrapper {...} atau .sidebar {...} yang merupakan kode untuk mendandani main-wrapper dan sidebar. Kita bisa melihat lebih jauh tentang ini dalam w3schools.com
semua yang dibatasi di dalam b:section adalah widget (sering disebut Page Element). Sebagai contoh, di dalam Header ada sebuah widget bernama Header1. Note : widget ini mengandung kode maxwidgets='1' showaddelement='no'. maxwidgets='1’ berarti jumlah maximum widget di dalam header-wrapper hanya 1 saja. Ini berarti kita tidak bisa menyeret Page Element dan menempatkannya di bawah atau di atas Header. Kode showaddelement='no' berarti tombol Add a Page Element tidak akan muncul di dalam bagian Header
di dalam main-wrapper, kita hanya punya kode showaddelement='no' yang berarti kita tidak akan memiliki tombol Add a Page Element di sana, tapi kita masih bisa menyeret widget lain dan menempatkannya di atas atau di bawah Blog Posts di dalam main-wrapper.
dalam sidebar-wrapper, kita punya kode preferred='yes' perintah ini akan membuat tombol Add a Page Element untuk menambah widget. Ditambah lagi, kita tidak dibatasi untuk sebanyak apapun widget yang kita tambahkan. Seperti yang sudah kita ketahui, kita selalu bisa menyeret widget ke wrapper lainnya selama bagian tersebut tidak membatasi jumlah widget yang ditampilkan dalam wrapper tersebut.
Di dalam footer-wrapper, tidak ada kode yang mengikuti perintah id. Ini berarti kita tidak akan memiliki tombol Add a Page Element tapi kita bisa drag widget ke dalam bagian footer.
translate dari : ourbloggertemplate.com
Tanya dong....
ReplyDeleteKlo membuat body post yg fleksibel gimana yah? Maksudnya yg menyesuaikan dengan besarnya post. Misal kita posting gambar dengan ukuran besar, otomatis postingan gambar kita akan melewati batas side bar kanan atau kiri. Nah, bagaimana supaya post body, lebarnya bisa menyesuaikan sendiri, klo postingan gambar besar dia bisa ngikut melebar, klo postingan gambar ukuran kecil dia juga ikutan kecil, gmana yah caranya?? Mohon bantuannya ...
hallo, numpang nanya ne, kan saya bikin template, sendiri. mulai dari nol, saya coba pasang di blog saya, templatenya tampil. tapi ketika saya coba bikin postingan, gak muncul,
ReplyDeleteTerus kalau saya lihat di "elemen laman", disana kosong melompong. tidak ada "add Gadget" dan lain lain.
Saya rasa ada kaitannya dengan code pada bagian "body" ini,
Tolong bantu kalau paham ya,
thanks
This comment has been removed by the author.
ReplyDeleteMaaf mas Kalau OOT (keluar topik).
DeleteKalau Variable definition dibuang bagai mana yach cara-nya memasukan-nya di dalam ID dan Class CSS dalam templete..??
Kerena kalau variable definitions itu ada pasti mau-nya ganti warna dan Huruf, ukuran dll
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#1a222a"/>
-------- CODE lain masih banyak Di sini -------
<Variable name="tab.border.radius" description="Tab Border Radius" type="length" default="10px" />
<Variable name="tab.first.border.radius" description="First Tab Border Radius" type="length" default="10px" />
<Variable name="tabs.border.radius" description="Tabs Border Radius" type="length" default="0" />
<Variable name="tabs.spacing" description="Tab Spacing" type="length" default=".25em"/>
<Variable name="tabs.margin.bottom" description="Tab Margin Bottom" type="length" default="0"/>
<Variable name="tabs.margin.sides" description="Tab Margin Sides" type="length" default="20px"/>
<Variable name="main.background" description="Main Background" type="background"
default="transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left"/>
<Variable name="post.margin.sides" description="Post Margin Sides" type="length" default="-20px"/>
<Variable name="post.border.radius" description="Post Border Radius" type="length" default="5px"/>
<Variable name="widget.title.text.transform" description="Widget Title Text Transform" type="string" default="uppercase"/>
<Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
default="transparent none repeat scroll top left"/>
<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>
*/