Belajar membuat template sendiri-bag.3

Belajar membuat template sendiri-bag.3

Setelah sebelumnya saya telah membagikan apa yang telah saya baca pada artikel berjudul belajar membuat template sendiri bagian 1, dan bagian 2 di blog THINKING OUT OF THE BOX ,sekarang saya lanjutkan dengan membagikan bagian 3 nya,yang baru saja saya baca di blog THINKING OUT OF THE BOX.Pada bagian ini kita fokus ke section 2, yaitu section ini terdapat code css di dalamnya. di artikel tersebut tidak di berikan  penjelasan panjang lebar, agar kita bisa bereksperimen dengan stylenya masing-masing.yang penting kita mengenal sedikit kode CSS, seperti width, font, border, background, color, margin dan padding,sisanya akan mengikuti seiring dengan berjalannya usaha kita dalam belajar membuat template.

Di artikel tersebut telah dirangkum hasil dari bereksperimen dan melihat pola struktur template terutama di section 2. Pola penulisan kode pada bagian section 2 ini adalah seperti ini :

selector{property:value}

Ket :
- selector = merupakan pembentuk suatu elemen HTML
-{ } = sebagai tag penutup dari property dan value
- property = memberikan suatu atribute untuk merubah selector
- value = memberikan nilai untuk property

contoh =

body (background:#000000)

artinya : untuk element body - (definisi body saya sudah jelakan di bagian 1-red) mempunyai background (latar belakang) berwarna hitam (#000000) ini semua berlaku global atau keseluruhan.

Bagaimana menyatakan untuk setiap element yang berbeda?
Nah, di sini diperlukan untuk id selector dan class selector
- untuk id selector dimulai dengan tanda # (slash)
- untuk class selector di mulai dengan tanda . (dot)
Contoh :

#sidebar-wrapper (width: 350px;background-color:#00000)
artinya : element id sidebar mempunyai panjang 350px dan backgroundnya warna hitam. Nilai ini berlaku hanya untuk element id sidebar

Sekarang untuk class selector adalah di mana satu element bisa di style berbeda-beda.
Contoh :

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar ol {
list-style-type: decimal;
margin:0 0 0 25px;
padding:0 0 0 0;
}

Pada intinya di bagian 3 ini adalah sobat bisa menambahkan selector serta merubah property dan value dari masing-masing container/tag.
Sekarang masuk ke bagian masing-masing container :

Header:

* #header-wrapper - container yang berisi title blog dan descriptionnya.
* #header - container yang berada dalam header-wrapper.
* #header h1 - mengkontrol container header dan memberikan nilai dari tampilan title blog
* #header h1 a - mengkontrol nilai title blog ketika sebagai link teks
* #header .description - memberikan properties untuk description blog
* #header a img - mengkontrol properties image (gambar) di dalam container

Main:

* #main-wrapper - container yang berisi umumnya : post, comments, date header, dan widget yang berada di dalamnya
* #main - container yang berada dalam main wrapper
* h2.date-header - mengatur nilai untuk tanggal postingan
* .post - mengatur nilai untuk postingan
* .post h3 - mengatur nilai judul postingan
* .post-body p - mengatur isi content di post
* .post ul - menagatur nilai unordered list (daftar yang tidak ada bernomor)
* .post ol - mengatur nilai ordered list (daftar yang bernomor).
* .post li - mengatur nilai daftar tersendiri dari unordered list atau ordered list.

Sidebar :
* #sidebar-wrapper - container yang berisi umumnya sidebar (memblock)
* .sidebar h2 - mengatur propeties title sidebar
* .sidebar .widget - mengatur properties dari widget sidebar
* .sidebar ul - mengatur nilai dari unordered list

Comments :
* #comments - mengatur container comments
* #comments a - mengatur nilai link teks di dalam container comments
* #comments h4 - mengatur nilai title header comments
* #comments ul - mengatur nilai dari unordered list yang berada dalam comment container.
* .comment-author - mengatur nilai comments author
* .comment-body p - mengatur nilai body isi komentar
* .deleted-comment - mengatur nilai ketika delete comments
Footer :

* #footer-wrapper - mengatur element footer container
* #footer - container yang berada dalam footer-wrapper.
* #footer h2 - mengatur properties dari footer title/header.
* #footer .widget - mengatur footer widget properties.
* .footer a - mengatur nilai link teks di footes
* .footer ul - mengatur nilai dari unordered list yang berada dalam footer

seperti itulah yang jelaskan di artikel tersebut,gimana ngerti gak?jujur,kalau saya masih belum ngerti,tapi insayaAllah lah,kalau lebih serius lagi belajarnya bisa ngerti... untuk sobat blogger yang pengen lebih lengkapnya kunjungi aja blog THINKING OUT OF THE BOX di 

http://subagya.blogspot.com

Read more: http://subagya.blogspot.com/2008/10/belajar-membuat-template-sendiri-3.html#ixzz1wDhvQE2B
Under Creative Commons License: Attribution

Semoga Bermanfaat!!!

Belajar Membuat Template Sendiri-bag.2

 Belajar Membuat Template Sendiri-bag.2

Setelah sebelumnya kita telah belajar tentang Struktur layout template,sekarang kita belajar untuk memahami struktur kode template yang tentunya akan berisi kode-kode,yang penting buat sobat blogger adalah pemahaman kode tersebut sudah cukup untuk dasar membuat template sendiri.yang saya dapatkan setelah membaca artikel belajar desain layout bag.2 dari blog THINKING OUT OF THE BOX.dan berikut penjelasanya:

Semua template blogspot umumnya dibagi menurut pembagian ini, dan menurut pengamatannya bagian tersebut dibagi menjadi 3 section.

Bagian-bagian tersebut :

Section 1.

Merupakan keterangan kode pengenalan template dan berisi informasi-informasi didalamnya, biasanya peletakan metatag di taruh di bagian ini.

Umumnya di bagian section 1 :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr: dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'xmlns:b='http://www.google.com/2005/gml/b'xmlns: data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

Section 2

Bagian ini menyimpan kode CSS untuk membentuk keindahan blog, bagian ini bisa kita modifikasi dan kita tambahkan. Pada bagian ini perlu pemahaman tentang CSS, ya ga perlu jago asal tahu perbedaan margin dan padding aja juga cukup :p , tetapi sobat secara dasar harus paham dengan kode CSS yang sederhana saja.

Umumnya section 2 bentuk kodenya seperti ini :

<b:skin><![CDATA[/*
body {...}
#header-wrapper {...}
#header-inner {...}
#header {....}
#outer-wrapper {....}
#main-wrapper {....}
#sidebar-wrapper {...}
h2 {...}
h2.date-header {
margin:1.5em 0 .5em;
}
.post {..... }
#comments h4 {....}
.sidebar {....}
#footer {.....}
]]></b:skin>

Perhatikan perbedaannya dengan section 1 dan section 2

Section 3 

Pada bagian ini biasanya untuk memanggil data-data pada blog kita, seperti isi postingan, komentar, serta juga menentukan yang mana akan mau di tampilkan lebih dahulu seperti urutan yang standar dulu biasanya dimulai dari header, main, sidebar, dan footer kemudian bagian ini di percantik oleh section 2 (kontrol CSS) sehingga menampilkan tampilan yang unik atau serasi pada browser.

Umumnya kode section 3 seperti ini :

</head>
<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='Just Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>

Pahami setiap section, umumnya untuk mempercantik biasanya pada section 2 dan sedikit pada section 3.

Semuanya menjadi satu kesatuan dan menghasilkan template yang anda bisa lihat, yang perlu ditekankan adalah keahliah sobat dalam memahami struktur dari template dan sedikit keahlian bahasa CSS.

NB :  Untuk variable umumnya seperti ini terletak pada section 2  dan biasanya hal ini untuk mengubah setting font dan color dalam dashboard blogspot  Layout > Fonts and colors  dan tidak perlu mutlak untuk di gunakan.

-----------------------------------------------
Blogger Template Style
Name:     Minima
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
*/

Pada section variabel ini yang perlu di perhatikan adalah ketika merubah variabel harus di ikuti string $ di depan variabel kemudan di terapkan pada bagian section CSS. contoh : variabel bgcolor diganti menjadi latarwarna maka penulisan di section cssnya harus memakai tanda $ sehingga menjadi $latarwarna.

Seperti itu lah yang di jelaskan di artikel  belajar desain layout bag.2 ,semoga bermanfaat!!

Read more: http://subagya.blogspot.com/2009/11/belajar-desain-layout-template-bag2.html#ixzz1w8WHuQWz 

Under Creative Commons License: Attribution

Belajar Membuat Template Sendiri-Struktur Template

 Belajar Membuat Template Sendiri-Struktur Template 

Untuk sobat blogger yang template blog nya masih buatan orang lain seperti blog saya yang masih memakai template buatan orang lain,namun saya memiliki keinginan untuk bisa membuat sendiri template untuk blog saya,begitu juga untuk sobat2 blogger kan?pasti pengen punya blog dengan template buatan sendiri,untuk mewujudkan keinginan itu,saya mencari artikel tentang cara membuat template sendiri,dan akhirnya saya menemukan artikel berjudul Belajar Membuat Template Sendiri (1) dari  blog THINKING OUT OF THE BOX ,yang isinya tentang struktur layout dari template sederhana,berikut struktur layout dari template:

di gambar telah di beri pewarnaan dari masing-masing struktur tersebut :

1. Body : merupakan suatu gambaran area yang mencakup keseluruhan template

2. Outer-wrapper : merupakan suatu area yang umumnya terdapat bagian header, content dan footer 

3. Header-wrapper : merupakan blok area yang umumnya terdapat di atas dan berisi judul atau deskripsi dari blog kita. bagian ini juga bisa di modifikasi sesuai kebutuhan sobat

4. Content-wrapper : merupakan bagian dari outer wrapper yang umumnya content ini berisi main wrapper dan sidebar-wrapper.

5. Footer-wrapper: merupakan suatu blok area yang berada di bawah dan umumnya berisi data catatan mengenai copyright pembuat template atau bisa juga di isi widget

6. Main-wrapper : merupakan suatu blok area yang umumnya berisi post, date post, post footer, comments block dan bisa juga untuk menambahkan bagian add elements jika kita inginkan.

7. Sidebar-wrapper : merupakan suatu blok area yang umumnya berisi widget-widget, sidebar ini bisa di tambahkan., pada contoh ini ia memakai 2 kolom : yaitu 1 kolom main, dan 1 kolom sidebar. Kebutuhan kolom di sesuaikan dengan desain dan keinginan sobat.

seperti itulah struktur layout yang di jelaskan di artikel tersebut,sebagai pengenalan sebelu belajar membuat template.

 

"Blog Onefath17 adalah versi dinamis dari blog OneFath20,jadi hampir semua postingan isinya sama karena keduanya memiliki pemilik dan penulis yang sama."

Read more: http://subagya.blogspot.com/2008/10/belajar-membuat-template-sendiri-1.html#ixzz1w8JHBrA8
Under Creative Commons License: Attribution