Related Posts Plugin for WordPress, Blogger...

Template ? Apa Dan Bagaimana ?

Sunday, December 4, 2011

Dengan harapan ingin belajar terus di dalam dunia HTML, CSS, JavaScript dan XML saya cari tutorialnya sampai mana pun maklum saja fakir bukan jebolan IT ,Jadi saya belajar secara otodidak saja .

Dan kali ini pada postingan saya,Mencoba menuliskan kembali apa yang sudah banyak di bahas oleh para master di google tentang Template tapi sesuai dengan gaya saya menulisnya Plus copas sana copas sini itu semua untuk saya pribada umumnya buat yang mamapir di blog ini sukur sukur ada yang mau bantuin agar saya lebih berkembang lagi dalam belajar bahasa Pemrograman
Pernah abang saya berkata " klo mau belajar HTML Atau yang lainnya tentang per website an saya mesti tahu terlebih dahulu tentang Template"

Kata-kata abang saya menjadi sebuah cambuk untuk saya karena saya hanya tahu template jadi saja karena dengan mudah saya dapat download di google tanpa tahu kenapa bisa jadi sebuah bentuk yang indah dari kode kode yang rumitnya bikin pusing kepala X*
Karena hal di atas tadi saya pun kembali googling dan menemukan sebuah tutorial dari awal sampai akhir penciptaan sebuah template dari situs Our Blogger yang salah satu templatenya juga saya pakai :-)

Mengawali Tulisan tentang tempalte saya coba tuliskan sesuai gaya saya pribadi tapi perlu di ingat...!!! bahwa ini hasil COPAS bukan hasil karya sendiri tapi sudah saya edit kalimatnya,Biarlah saya menjadi seorang Plagiant dahulu awalnya, setelah banyak belajar saya tidak akan menjadi seorang plagiant lagi karena saya memang tidak punya basic IT atau apalah namanya yang bisa buat web atau blog .

Sebuah Tempalte memiliki bagian bagian tertentu yang bisa di hilangkan dan di tambah kan sesuai yang punya tempalte itu sendiri

Contoh gambar template secara global :

[template-structure.jpg]

Keterangan :

1. Body: block paling lebar yang merupakan badan dari template (pada dasarnya
semua yang terlihat di layar komputer).

2. Outer-wrapper: kotak ini melapisi bagian template (Body lebih mirip bagian
luar template). Pada umumnya, kita membangun sebuah wrapper untuk
menempatkan beberapa kotak lebih kecil di dalamnya. Kotak-kotak yang paling
umum di dalam outer-wrapper adalah : header, content, dan footer

3. Header: Kotak ini adalah bagian teratas dari blog (namanya sudah
memperlihatkan dengan jelas. Tapi di dalam header kita punya sub-block lain-
Header title block, Header description block, dan lainnya contohnya adsense
banner, menu bar, dll. Jadi, untuk menggabungkan semua sub-block ini dalam
satu kotak besar, kotak paling besar di bagian header biasanya Header-wrapper
yang menggabungkan semua di dalamnya.

4. Content: Di bawah header adalah content wrapper- pada dasarnya ini bagian
terpenting dari semua block. Di dalam wrapper ini ada kotak-kotak sidebar (1,2
atau lebih) dan kotak utama ( main block) yang memuat Post, comment, dan
beberapa iklan.

5. Footer: adalah kotak paling bawah dari template. Seperti bagian header, kita
juga memerlukan Footer wrapper untuk memuat sub-block yang lain di bagian
footer.

6. Main: Main-wrapper adalah kotak paling lebar dalam content wrapper. Di
dalam main-wrapper terdapat Post block, comment block, date header, dan
widget lain yang dibuat dari add page element option.

7. Sidebar: adalah block yang memuat semua side widget- About me, label,
archieve, text, Html and Javascript, adsense, dll. Dalam blogger template
standard, kita sering menemukan satu sidebar saja, oleh karena itu disebut 2-
column template (Main dan sidebar). Tapi sebenarnya mudah menambahkan
banyak kolom sidebar. Yang paling banyak setelah satu sidebar adalah 2 sidebar
atau 3-column template. Kita akan belajar itu nanti. Setelah mempelajari
rangkaian tutorial ini, pertama kita pahami dulu struktur template, nanti akan
terasa mudah menambahkan maupun memindahkan sidebar ke bagian kiri atau
kanan main block.

8. Blog Post: block ini memuat isi terpenting- Judul posting, post, Post author,
label, dll.

Cara lain untuk melihat struktur ini adalah dengan melihat bagian
hierarkis. Dimulai dengan kotak terbesar kemudian kotak-kotak di dalamnya,
strukturnya terlihat seperti bagian di bawah ini :

Body

Outer-wrapper

Header-wrapper

Blog Title

Blog Description

Other widgets

Content-wrapper

Sidebar-wrapper (1,2,3...)

Main-wrapper

Date Header

Posts

Post Title

Post Content (or called Post Body)

Post Footer (Author, Labels, etc)

Comments

Feed Link

Other widgets (mostly ad units)

Footer-wrapper

Footer text (disclaimer, copyrights, etc)

Other widgets

Rupanya begitu saja bentuk daripada template bila di lihat hanya kotak kotak saja dengan masing masing nama dan tempat,tapi saya tidak tahu dengan nama nama yang ada di atas tadi sangat amat asing bukan bahasa englishnya yang saya tidak mengerti tapi bahasa itu untuk apa dan bagaimana menempatkanya kedalam template jadi ?
Bila belajar HTML dan CSS saja saya yakin tidak tahu jadinya apa ? ...template saya nantinya, tanpa tahu harus meletakan kode -kode di dalam template saya nantinya untuk itu saya kembali lagi mempelajari sekaligus copas artikel yang ada untuk saya pelajari.


STRUKTUR BLOGGER TEMPLATE CODE

Gambar di bawah ini menampilkan Struktur Kode Dari Tempalte secara Global

[template-code.jpg]


Keterangan :

Bagian 1: Tampilan kode untuk Header. Pada dasarnya bagian ini mengandung informasi
penting tentang template kode dan judul dari blog. Tapi, yang terpenting, kita
tidak perlu kawatir tentang apapun di bagian ini. Sudah ada header standard
untuk semua template.

Bagian 2: Tampilan CSS singkatan dari Cascading Style
Sheets, bahasa pemrograman web yang digunakan untuk mengatur style
(desain) dari HTML dokumen. Inilah bagian yang harus paling dipahami untuk
memodifikasi template kita sekarang atau membuat template baru. Meskipun ini
merupakan kode pemrograman web, kita masih bisa melakukan banyak hal
pada template kita jika mengerti struktur dari bagian ini tanpa perlu banyak
tahu tentang HTML dan CSS.

Bagian 3 : Tampilan Kode Body (badan) atau data dari kode- bagian paling penting
yang mengambil semua content dari blogger database dan meletakkannya di
bagian yang benar ke dalam blog ketika seseorang melihat blog kita.Ini juga
bagian yang memberitahu blog bagian mana yang muncul duluan- header,
sidebar, Main, Post, Footer, dll. Tapi bagian ini tidak mengatur tampilan blog
dan bagaimana kelihatannya di internet(karena bagian CSS-lah yang punya
peran di sini).

Kesimpulannya :
Jadi sebuah template itu di dalamnya memiliki beberapa bagian yang mana bagian - bagian itu harus di pisahkan dengan kode kode tertentu misalnya Untuk bagian Header kita masukan kode Header tepat di atas bukan di bawah kalau di bawah namnya footer.
Dan untuk melengkapi sebuah template, saya harus memiliki kode - kode untuk bagian-bagian template seperti Body, Outer warpper, Header, Conten, Footer, Main, Sidebar,Dan Blog Post.
Kesemuanya bisa tampil menarik bila di bubuhi oleh kode CSS karena ternyata CSS lah yang menjadi biang indahnya sebuah template akan saya pelajari lagi nanti tentang CSS .

Artikel Yang Berhubungan



0 comments:

Post a Comment

Gunakan kode smile seperti di bawah ini

:-) :-S :-P :-[ :-D }:-] X* ;-D :-| :-} :*) :-( ;-) XD

Silahkan berikan komentar anda yang membangun,No sara,No Porn No spam ...Dan gunakan Id nya jangan gunakan Id Anonymous kalau di gunakan akan saya Del ..!!! karena saya akan berkunjung balik

Site Info

free counters
Ping your blog, website, or RSS feed for Free
Site Meter

Followers

Komentar Pembaca

  © Blogger Newbie2011

Back to TOP