TUTORIAL DASAR TEMPLATE BLOGGER

By : Desak Putu Okta Veanti Site : http://kamuspengetahuan.blogspot.com Translate from : http://www.ourbloggertemplate.com

ATURAN MAIN E-book ini disusun dan menjadi hak milik Desak Putu Okta Veanti. Anda tidak diperkenankan untuk mengubah, mengambil, atau menjual sebagian atau

keseluruhan dari isi yang terkandung dalam buku ini.

Anda diperkenankan untuk membagikan e-book ini secara gratis kepada siapa

saja secara cuma-cuma, dengan catatan tidak melakukan modifikasi sebagian

atau keseluruhan dari isi e-book ini.

Pemilik

Desak Putu Okta Veanti http://kamuspengetahuan.blogspot.com

O'chan nemu tutorial cara membuat template di suatu blog. sayangnya blog itu berbahasa inggris, jadi ochan coba translate ke bahasa indonesia agar gampang dipelajari. STRUKTUR BLOGGER TEMPLATE Sebelum mendesign template, kita harus punya ide bagaimana struktur dasar dari template tersebut. Pada umumnya, struktur dari beberapa template tidak persis sama. Tapi, dengan mengenal struktur dasar, kita dapat dengan mudah mendapatkan ide bagaimana mengembangkan template kita yang sekarang, mendesain template, dan bagaimana mengubahnya sehingga memiliki struktur yang berbeda. beberapa bagian struktur template jelas terlihat dari kebanyakan blog yang kita lihat. Contohnya : header, footer, dan bagian posting. Tapi ada beberapa bagian lain yang (bisa disebut block atau containers berikutnya) yang tidak terlihat di layar monitor, tapi bagian penting HTML untuk membangun template agar praktis dan benar kerjanya. Untuk memulai kita lihat dulu struktur dasar template di bawah ini, kebanyakan template memiliki struktur seperti ini :

Kita pelajari dulu dari blok yang paling besar sampai blok terkecil:

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.

Satu 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

Pertama-tama kita pahami dulu struktur dasar ini, akan lebih mudah untuk mulai belajar tentang structure kode blogger template. Belajar struktur kode tidak hanya belajar HTML or CSS, tapi lebih banyak tentang bagaimana mengorganisasi template code, yang sangat seperti bagaimana mengorganisasi kotak-kotak ini. Sangat mengejutkan jika ternyata meskipun dengan pengetahuan kecil dalam pemrograman, kita bisa menyesuaikan menyesuaikan template dengan baik dengan memahami struktur dasar dan beberapa bahasa CSS.

STRUKTUR BLOGGER TEMPLATE CODE Inilah penampakan struktur blogger template, ini adalah cara paling sederhana untuk melihatnya (sebenernya ribet sih. Hehehe). Banyak template yang struktur kodenya seperti ini. Gambar di bawah ini menunjukkan cara membagi bagian kode menjadi tiga bagian dan memperlihatkan baris atas saja dari setiap bagian sehingga kita bisa melihat dari baris pertama dan selanjutnya.

Bagian 1: Header dari kode. 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. Kita cuma perlu menambahkan beberapa kode saat menyisipkan meta tag (informasi tambahan untuk SEO). Bagian 2: Ini adalah CSS Styling Section. 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. Kita akan membahas bagian ini nanti di tutorial berikutnya. Bagian 3 : Ini adalah 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). Kita tidak perlu kawatir terlalu banyak tentang bagian ini juga, hanya seperti tahap permulaan. Tapi kita harus tahu sedikit tentang bagian ini jika ingin menambahkan extra widget yang tidak bisa dilakukan dengan menggunakan tombol add page element, seperti tombol social bookmarking-Digg, AddThis, RSS button, atau jika ingin meletakkan adsense kode di tempat special seperti pada bagian post, atau meletakkan google Analitics code untuk menarik visitor ke blog kita, dan lebih banyak lagi. Saat ini sudah banyak instruksi mudah untuk membantu kita menyisipkan semua di atas. Jadi tidak usah terlalu kawatir dengan bagian ini.

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, tidak semua 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.

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

MENGATUR PROPERTI DARI CONTAINER Dalam tutorial ini, kita akan belajar dasar dari kode apa saja yang mengatur property dari kotak (selanjutnya sebut saja container). Untuk membuat semuanya lebih sederhana, kita akan melihat 2 container saja, yaitu main dan post. Jika kita mengerti dua ini otomatis kita juga bisa mengerti yang lain karena kodenya mirip bahkan hampir sama. Ini contoh kode keduanya : #main { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; min-width: 400px; max-width: 400px; background: $mainbgColor; color: #111111; font: $textFont; } .post { margin: 0px 20px 10px 0px; padding: 10px 20px 10px 2px; line-height: 1.5em; text-align: left; background: $postbgColor; }

#main and .post adalah judul dari setiap container. Setiap kode container harus ditulis dalam {}. Untuk penjelasan di bawah ini, kita akan focus pada kode

dalam container post, terutama untuk penjelasan tentang margin dan padding ( kode yang berwarna merah) Margin mengatur jarak antara garis luar container ke garis dari container induk yang di luarnya (lebih besar). Ada 4 angka yang didefinisikan pada margin property. Pertama, margin atas (top margin), kedua margin kanan(right margin), tiga margin bawah (bottom margin), dan yang terakhir margin kiri (left margin). Ini diatur dengan berdasar pada arah putar jarum jam yang dimulai dari atas. Dalam kasus di atas, container induk dari container post adalah container main. Lihat bagaimana garis putus-putus pada bagian biru (post) ditempatkan di dalam bagian hijau (main), mengikuti post margin command (pengaturan margin di atas). Jika semua margin diatur menjadi nol, post container ukurannya akan sama seperti main container. Pahami bahwa margin adalah perintah yang memindahkan garis tepi menjauhi garis tepi induk. Hal lain, margin bisa memiliki nilai negative, dimana berarti itu menggeser keluar garis tepi induk dan tumpang tindih (tidak jauh dari itu) Padding mengatur jarak antara garis tepi container ke container anakan (lebih kecil) di dalamnya. Contoh kasusnya adalah bagian post container dan post body. Keempat angka itu mengatur padding searah jarum jam juga seperti property margin. Kita bisa lihat bagaimana padding menempatkan post body di dalam post container. Geraknya menjauhi garis putus2. Tidak seperti margin, padding adalah perintah yang memindahkan tepi container anakan menjauhi garis tepinya. Nilai padding tidak mungkin negative. Min-width and Max-width Mengatur lebar container. Sebenarnya cukup menuliskannya width=400px (hanya contoh), tapi ada yang punya kebiasaan untuk mengatur lebar seketat mungkin, karena jika ukuran tersebut tidak dikoding dengan ketat, lebar container mungkin membesar dan mengecil dengan bebas dalam situasi tertentu dan browser yang berbeda. Jadi dengan mengatur lebar dengan ketat, tampilan template akan terlihat sangat pas seperti yang diinginkan pada setiap browser (Jadi dengan mengatur secara ketat, tampilan blog di setiap browser pasti akan sama. Jika sempat melihat template2 baru di ourblogger.com, Template-template itu diatur secara berlebihan, didefinisikan di dalam main wrapper lalu didefenisikan juga di main container padahal sangat sama. Dengan melakukan itu kita akan menyelesaikan beberapa aligment bug yang terlihat (meskipun sampai sekarang belum bisa dimengerti mengapa hal itu bisa menyelesaikan masalahnya. Background mengatur warna latar belakang kotak. Pengaturan ini menggunakan warna dengan kode hexadecimal. Lihat di sini untuk mengetahui semua kode warna. Kita juga bisa menambahkan latar belakang gambar yang mengulangi dirinya sendiri untuk melapisi semua bagian container. Caranya melakukan ini adalah mengarahkan url gambar. Untuk detailnya, lihat tutorial

dari W3Schools. Kita juga bisa mengatur nilai dari $samplevariable, dimana variable ini bisa didefenisikan pada subsection 1 dalam Struktur Style CSS.. Color mengatur warna text menggunakan code warna hexadecimal, atau variable yang sudah didefenisikan sebelumnya di Subsection 1. Font mengatur text font. Kita masih bisa menggunakan variable yang diatur pada subsection 1. Lihat W3Schools untuk lebih detail. Text-align Mengatur text alignment. Ada 3 option, yaitu left, center, dan right. Line-height Mengatur jarak atau tinggi garis Tutorial ini memberikan informasi dasar untuk beberapa kode blogger template. Tutorial ini sudah mengungkapkan pengertian dasar dari margin dan padding. Detailnya bisa dilihat di w3Schools CSS Tutorial Sebagai sumber yang cukup dipercaya

CONTAINER DAN ELEMEN UMUM DALAM BLOGGER TEMPLATE Inilah daftar dari container dan elemen umum dalam blogger template dan fungsi-fungsi mereka (elemen adalah dasar dari setiap objek yang membuat blog berfungsi dan container adalah elemen besar yang mengandung elemen lebih kecil atau content lain). elemen elemen umum di bawah ini yang akan diperlihatkan tidak elemen yang semestinya ada atau harus ada di dalam blogger template, tapi hanya beberapa elemen umum yang mengontrol bagian terbesar dari template style. Dengan mengetahui ini, akan memudahkan kita untuk mengetahui dimana melihat kode itu dan bagaimana menyesuaikan dengan elemen baru lainnya yang mungkin kita temukan di blogger template yang lain. Aku tidak akan mendaftar semua elemen, tapi hanya elemen yang cukup sehingga kita bisa mendapat ide dan bisa mengerti semua elemen lain dalam template kita sendiri. Tutorial ini akan merefer kepada gambar dari CSS Styling Section di bawah ini agar lebih mudah untuk diikuti.

Simbol pagar (#) dan titik (.) memperlihatkan atribut dari elemen ( klasifikasi singkat dari tipe elemen). Tapi kita tidak perlu terlalu mengkhawatirkan itu. Jika ingin tahu lebih banyak, silahkan lihat tutorial dari W3Schools . Global: body {.....} Properti umum dari template secara keseluruhan.

#outer-wrapper {.....} Permulaan dan container terbesar dari semua content template. Di dalam sini ada header-wrapper, content-wrapper, dan footer-wrapper. #content-wrapper {.....} Wrapper yang mengandung sidebars dan main containers. a {.....} Ini mengatur semua property dari link text (hyperlink) a:visited {.....} Ini mengatur semua property link yang sudah dikunjungi(visited link text). a:hover {.....} ini mengatur property semua link text ketika panah mouse menunjuknya. Karena semua code elemen harus ditulis dalam {}, kita akan menulis judul elemen setelah ini. Header: #header-wrapper - container yang membelit Blog Title dan Blog Description. #header container di dalam header-wrapper. #header h1 tag di dalam container ini mengatur tampilan dan layout dari Blog Title. #header h1 a mengatur property Blog Title sebagai link text. #header .description property Blog Description. #header a img mengatur property dari gambar di dalam header

Main: #main-wrapper container yang membelit Date Header, Blog Posts, Comments, Feed Link, dan beberapa widget yang ditempatkan di atas atau di bawah Blog Posts. #main container di dalam main-wrapper. #main .widget mengatur property dari semua widget di main container. h2.date-header mengatur property dari Date Header (di atas Post Title). .post mengatur Blog Posts container. .post h3 mengatur property dari Post Title. .post-body p mengatur property dari body atau content .post ul mengatur property dari unordered list (daftar yang tidak bernomor). .post ol mengatur property dari ordered list (daftar bernomor). .post li mengatur property dari daftar sendiri di unordered list atau ordered list. a img mengatur property umum dari gambar (refer link dan gambar itu sendiri dengan linknya). Sidebar: .sidebar-wrapper container yang membelit semua elemen dan content sidebar. .sidebar container di dalam sidebar-wrapper. #sidebar1 mengatur property sidebar1. #sidebar2 mengatur property dalam sidebar2. Jika ingin membuat property sidebar1 dan sidebar2 sama, kita hanya perlu .sidebar dan tidak harus menuliskan #sidebar1 dan #sidebar2 dalam CSS code. .sidebar .widget mengatur property dari semua widget (add Page Element) dalam sidebar. #sidebar1 .widget hanya mengatur widget dalam sidebar1. .sidebar .BlogArchive mengatur property Blog Archive. Tekniknya sih ini sidebar juga, tapi aku tidak yakin mengapa pengaturan property untuk sidebar widget tidak mengubah property Blog Archive. Itulah mngapa kita harus menuliskan perintah untuk mengatur property BlogArchive. .sidebar h2 mengatur property judul sidebar widget. .sidebar #BlogArchive1 h2 mengatur judul Blog Archive. Miscellaneous: tekniknya, profile (about Me) diletakkan did alam sidebar, tapi sering ditempatkan dalam Miscellaneous section karena ada elemen-elemen yang lebih kecil bersamaan dengan Profile container dan meletakkannya dalam

Miscellaneous. #Profile1 mengatur property umum About Me. #Profile1 h2 mengatur title/header dari the About Me. .profile-img a img mengatur gambar dari About Me. .profile-textblock mengatur descripsi author About Me. .profile-data mengatur author data About Me. .profile-datablock mengatur semua blok dalam About Me. blockquote - mengatur quoted text dalam postingan. code mengatur text di dalam tag code dalam postingan.

Post-Footer: .post-footer mengatur property keseluruhan post-footer. .post-footer-line mengatur property setiap baris baru dalam post-footer. .post-footer a mengatur property link text dalam post-footer. .post-footer .post-comment-link a mengatur "comment" link dalam post-footer. #blog-pager mengatur property "newer posts", "home", dan "older posts" link. #blog-pager-newer-link mengatur property dari "newer posts" link. #blog-pager-older-link mengatur property dari "older posts" link. .feed-links mengatur "Subscribe to: Posts (Atom)" link. Comment: #comments mengatur property keseluruhan comment container. #comments a - mengatur property link text dalam comment container.

#comments h4 mengatur header comment container. .deleted-comment mengatur property deleted comment. .comment-author mengatur property comment author. .comment-body p - mengatur property comment body. #comments ul - mengatur unordered list di dalam comment container. #comments li mengatur individual list di dalam comment container. Footer: #footer-wrapper bagian yang membelit keseluruhan elemen dan content di dalam footer section. #footer container dalam footer-wrapper. #footer h2 mengatur property footer title/header. #footer .widget - mengatur footer widget properties. .footer a mengatur semua footer link text. Sekarang kita tahu semua elemen dan container ini, kita akan bisa melihat dimana meletakkan template kode saat mengubah beberapa hal tentang (fonts, text colors, background colors, padding, dll). Yang harus dilakukan setelah ini hanya sedikit memodifikasi kode di dalam {.....} untuk elemen tersebut.

MENGGUNAKAN TEMPLATE YANG SUDAH JADI Tutorial kali ini akan menjelaskan bagaimana caranya memanfaatkan Generic Blogger Template untuk latihan dalam tweaking (mengubah setting dengan menambahkan, mengurangi maupun memodifikasi) kode dan memodifikasi template. Tujuan utama kita adalah untuk tahu bagaimana mendesain template kita sendiri, tapi dengan mengetahui bagaimana memodifikasi template terlebih dahulu (dan mendapatkan feeling bagimana template bereaksi pada modifikasi kode) adalah step yang sangat penting yang kita perlukan sebelum memulai mendesain template kita sendiri. Mengubah template tidak semudah seperti mengubah atau menambahkan beberapa kode, menekan tombol View Blog dan berpikir kalau segalanya berjalan seperti yang kita inginkan. Dalam banyak kesempatan kamu akan melihat banyak hal akan berbeda dari apa yang kita perkirakan. Khususnya jika kamu bukanlah web programmer. Aku sendiri perlu bolak-balik membuka halaman Edit HTML lalu menekan halaman "View Blog" berulang-ulang kali sebelum aku mendapatkan apa yang aku inginkan. Jadi, yang paling baik untuk dilakukan adalah benar-benar bereksperimen dengan prilaku dari template kode, lihat bagaimana mereka membuat template berubah, dan akhirnya mengerti (lebih kurang) mengapa mereka mengubah jalan yang mereka ubah: dengan mudah letakkan-jadilah bagian dari kode. Untuk membuatnya lebih mudah, kita bisa mendownload Generic Blogger Template dari ourbloggertemplate dan bermain dengan benda ini. Sebenarnya itu adalah template yang jelek, tapi perbedaan warna container akan menolong kita mengetahui bagaimana template itu dapat berubah. Pertama-tama yang harus dilakukan adalah membuat blog percobaan menggunakan blogger account. Lalu upload Generic Blogger Template ke dalam blog percobaan barusan. Letakkan beberapa posting yang banyak berisi text, gambar, dan tambahkan beberapa widget juga, jadi dengan begitu kita bisa melihat effect yang lebih nyata. Tahap berikutnya hanya tinggal bermain dengan kode-kode di dalamnya. Paling baik jika dilakukan satu per satu. Katakanlah pilih satu container, mungkin header wrapper, dan ubah beberapa kode perintah untuk container itu. Lalu lihat template baru dan lihat apakah perubahan yang terjadi sesuai dengan yang kamu perkirakan. Sebagai permulaan, coba untuk bermain dengan padding dan margin (bermain dengan color, font, atau beberapa appearance-setting tidak lebih menantang dibandingkan bermain dengan perintah layout-setting. Jangan bermain dulu dengan perintah pengaturan ukuran (size-setting) seperti lebar container karena ini akan melibatkan container lain dan juga bisa membuat

sangat kacau. Kita akan melakukannya nanti. Setelah yakin pada satu container, cobalah satu container lainnya atau beberapa sekaligus. Dalam waktu singkat, kamu akan yakin dengan Generic Blogger Template dan nantinya kamu bisa memulai tweaking kode blogger templatemu sendiri. Pada poin ini, dapat dikatakan kalau semuanya hanyalah untuk mengetahui cara tweaking kode. Tapi kamua akan cukup tahu untuk melakukan makeover pada template anda dan mulai belajar hal baru dan mengatasi masalah baru pada template anda sendiri. Kuncinya di sisni adalah koding skill akan tumbuh selaras dengan waktu. Semoga kode berpihak pada anda.

MENGATUR UKURAN TEMPLATE Mengatur ukuran template mungkin adalah hal pertama yang perlu dilakukan ketika mulai mendesain template baru. Ada dua cara untuk mengatur ukuran (pada dasarnya lebar) template. 1. Mengatur ukuran template dengan fixed width (ukuran tetap) lebar tertentu, bilang saja 800 pixels. 2. Mengatur ukuran template dengan fluid size, lebar template berubah sesuai dengan browser atau screen size Untuk mengatur lebar template, kita sebenarnya harus mengatur lebar dari sedikit container besar. Container yang paling umum diatur lebarnya adalah : 1. Body 2. Outer-wrapper 3. Header-wrapper 4. Content-wrapper 5. Footer-wrapper 6. Main-wrapper 7. Sidebar-wrapper* 8. Footer-wrapper *Note: Kita juga bisa hanya mengatur lebar dari sidebar1 dan sidebar2 tanpa mengatur lebar sidebar-wrapper. Mengatur sidebar-wrapper akan baik jika kedua sidebar memiliki lebar yang sama. Dalam template-template terbaru ourblogger.com, desainernya juga mengatur lebar container yang hanya di dalam beberapa wrapper container (cukup mubasir) untuk menghindari beberapa alignment bugs kecil yang mungkin muncul. Lebar container ini diatur sama seperti lebar dari container induknya. Container itu antara lain : 1. Header 2. Main

Ini adalah contoh kode dari Generic Blogger Template yang memperlihatkan semua lebar container yang diatur untuk meyakinkan lebar template benar-benar diatur (hanya lebar yang tepat yang ditampilkan). Dalam contoh ini, lebar template adalah 800 pixel. body { min-width: 800px; } #outer-wrapper { margin: 0 auto; /* to make the template lays in the screen center */ min-width: 800px; max-width: 800px; } #content-wrapper { min-width: 800px; max-width: 800px; } #header-wrapper { min-width: 800px; max-width: 800px; } #main-wrapper { min-width: 400px; max-width: 400px; }

.sidebar { padding: 10px 10px 10px 10px; min-width: 180px; max-width: 180px; } #sidebar1 {.....} #sidebar2 {.....} #footer-wrapper { min-width: 800px; max-width: 800px; }

body diatur dengan perintah min-width = 800px, yang berarti bahwa lebar terkecil haruslah 800px. Jika diatur dengan perintah width = 800px saja, lebar template bisa saja berubah tergantung situasi. Mengatur min-width memberikan jaminan ukuran terkecil itu akan digunakan. Container selanjutnya adalah container di dalam outer-wrapper. Kebanyakan hanya mengaturnya dengan perintah width = 800px saja. Tapi seperti yang dijelaskan sebelumnya, kita sebaiknya mengatur ukuran ini dengan ketat untuk menghindari, akan lebih baik jika mengatur container dengan min-width dan max-width dari nilai sehingga ukuran container benar-benar mengikuti ukuran tersebut- tidak akan berubah atau membesar atau melebar ke besaran yang lain. Hal lain mengenai outer-wrapper, ini adalah tempat dimana kita mengatur perintah untuk bagian lain dari template agar menempatkan diri di tengah-tengah layer atau rata kiri dari outer-wrapper ini. Dalam kasus ini, margin: 0 auto akan menempatkan template di tengah-tengah. Hanya menuliskan margin: 0 akan menempatkannya rata kiri sebagai posisi utama.

Tiga container besar berikutnya, header-wrapper, content-wrapper, dan footer-wrapper selalu diatur dalam ukuran yang sama, dalam kasus ini, 800px. Dalam kasus lain, ketiganya dapat diatur lebih kecil dari lebar outer-wrapper tapi tidak lebih besar, karena outer-wrapper 'membatasi' 3 container ini di dalamnya (kalau dalamnya lebih besar, tidak akan terlihat di layar). Hal lain, jika kita menambahkan border kanan, ini akan menambah lebar, dan akan memotong apapun yang lebih besar darinya di bagian kanan. Jadi, jika kita mau menambahkan border, sebut saja 2px di kiri dan 2px di kanan untuk header-wrapper, kita harus mengatur lebar header-wrapper menjadi 796px sehingga totalnya menjadi 796+2+2 = 800px. Hal yang sama berlaku pada container lainnya. Tiga container terakhir, yaitu 2 sidebar dan main-wrapper. Karena ketiganya berdampingan, kita harus yakin lebar totalnya sesuai dengan header-wrapper dan kawan-kawan dalam kasus ini lebar=800px atau kurang, tapi tidak boleh lebih. Kembali mengacu pada kasus ini, kita bisa mengatur but main-wrapper menjadi 400px dan dua sidebar yang ukurannya 200px. Tapi karena aq menambahkan padding sebesar di kiri dan kanan setiap, yang mendorong border sidebar keluar, kita harus mengurangi lebar sidebar menjadi 180px sehingga total lebar sesudah diberi padding menjadi 200px. Kita harus mencatat bahwa container sidebar terbesar adalah sidebar-wrapper (tidak hanya sidebar). Kita bisa mengatur lebar dari sidebar-wrapper selain sidebar, Tapi aku lebih suka mengatur lebar sidebar karena aku mungkin akan mengatur 2 sidebar yang memiliki lebar berbeda. Tapi ini hanya tergantung pada selera individu, desainer template yang lain mungkin punya cara-lain untuk mengatur lebar sidebar. Selama itu bekerja, tidak masalah. Mengatur fluid template size: Untuk mengatur lebar yang berubah sesuai browser dan ukuran layar, silahkan melihat W3Schools Tutorials untuk lebih detail.

BAGIAN BODY DARI BLOGGER TEMPLATE KODE Dalam tutorial ini kita akan membahas struktur dasar dari kode pada bagian Body sehingga kita mendapatkan ide bagaimana itu bekerja dengan kode kita yang lain. Kode ini terletak dalam Section 3 dari Blogger Template Code Structure. Ini adalah bagian utama dari kode Blogger template yang menerima data untuk ditampilkan ke dalam blog. Itu pada dasarnya bagian inti yang membuat seluruh fungsi blog berfungsi dengan baik.Kode yang mengatur bagaimana itu muncul di dalam blog adalah CSS Styling code. Merefer kembali pada tutorial Blogger Template Code Structure, Body code terletak dalam Section 3 seperti diperlihatkan dalam gambar di bawah ini

Di bawah ini ditampilkan Body code yang dicopy dari Blogger Edit HTML tanpa mencentang 'Expand Widget Button'. Sebaiknya kita tidak memasukkan dulu kode komplitnya, ada 2 alasan. Pertama, belum perlu melakukan hal ini. Sebenarnya kita tidak perlu tahu apa yang terjadi di dalam kode lengkapnya untuk mendesain blogger template yang berfungsi dengan baik. Semua itu akan dilakukan secara otomatis oleh blogger, yang merupakan kelebihan new Blogger template dibandingkan dengan yang klasik. Yang kedua, dengan melihat kode yang lebih sederhana, kita akan meletakkan lebih mudah ide bagaimana semua container dalam template berposisi.

skip to main | skip to sidebar

Untuk lebih simple, abaikan kode yang berwarna abu-abu. Semua itu adalah komentar atau kode statis yang membuat semua bekerja dengan baik yang tidak perlu dirubah. Bagian inti dari kode bisa dipisahkan menjadi empat bagian. 1. Header (merah) 2. Main (hijau) 3. Sidebar (biru) 4. Footer (cokelat) Kita akan lihat di atas adalah semua kode yang dibungkus dalam tag body, diikuti oleh tag outer-wrapper, kemudian tag wrap2. wrapper-wrapper ini digunakan untuk mengelompokkan container bersama sehingga semuanya bisa diedit bersama. Menggunakan wrapper juga membuat tempat untuk container jauh lebih mudah khususnya jika kita akan membuat sidebar tambahan atau container extra. (seperti linkbar container). Dalam penjelasan di bawah ini, aku hanya mengacu pada outer-wrapper sebagai wrapper yang lebih besar tanpa mengacu pada semua wrap2 wrapper. Semuanya sama (aku sampai sekarang belum benar2 mengerti kenapa wrap2 ada di tempat pertama). Di dalam kontainer besar ini, kita akan melihat 3 wrapper - header-wrapper, content-wrapper, dan footer-wrapper. Mereka diposisikan secara vertikal dengan header-wrapper ditempatkan paling atas, footer-wrapper paling bawah. Sangat mudah karena header-wrapper disebutkan paling pertama , diikuti content-wrapper, dan terakhir footer-wrapper. Dalam point ini, kita tidak harus tahu apa yang ada di dalam content-wrapper. Itu membuat jauh lebih bersih dan lebih mudah untuk menghindari kekacauan content-wrapper dan bekerjasama dengan main-wrapper dan sidebar-wrapper bersamaan sekaligus. Itu bisa menjadi kekacauan besar. karena outer-wrapper adalah wrapper terbesar, kita harus yakin bahwa lebar semua wrapper lainnya di dalamnya kurang atau sama dengan lebar outer-wrapper. Tapi, jika kita menambahkan border, itu akan menambah extra pixels untuk semua wrapper yang juga kita tambahkan border. Jadi hati-hati menambahkan border. menambahkan wrapper baru (container) di dalamnya di antara wrapper ini mudah. Hanya paste dalam wrapper code (lihat di bawah ini sebagai contoh) dan rename dengan nama baru, sebut saja banner-wrapper. Kode preferred='yes'

akan membuat tombol 'Add Page Element' yang membolehkan kita membuat widget baru. Menambahkan wrapper hanya membuat container baru, atau kotak di dalam blog. Itu tidak mengatur bagaimana itu terlihat atau dimana akan diletakkan. Untuk customize bagaimana itu terlihat dan diletakkan di dalam blog, kita BUTUH mengedit kode CSS. Di dalam content-wrapper, kita punya main-wrapper dan sidebar-wrapper. Untuk meletakkan dua wrapper ini side-by-side seperti kebanyakan blog, kita harus mengatur lebar 2 wrapper ini yang jumlahnya kurang atau sama seperti content-wrapper. Ditambah lagi, kita harus menambahkan beberapa perintah di dalam CSS Styling code sehingga mereka dapat ditempatkan berdampingan. Di lain pihak, mereka hanya akan bertumpuk secara vertical di atas yang lainnya. Biasanya, kita perlu menggunakan perintah 'float:left' untuk ini. Lihat beberapa contoh template untuk mengecek lebih banyak tentang ini. Jika kamu ingin menambah sidebar lagi, katakana saja 3-column template, kita dengan mudah menambahkan sidebar-wrapper code (warna biru). Nanti lihat pada Tutorial 10 untuk mengetahui bagaimana menambah atau mengurangi atau menempatkan sidebar.. Setelah kita memahami ide dasar di belakang kode body, mudah untuk melihat mengapa struktur umum Blogger template kode terlihat seperti ini (lihat di bawah ini untuk contoh 3-kolom template). Jika kita ingin menambahkan ulang atau kontainer atau wrapper, apa yang harus kita lakukan adalah untuk mengubah body dari kode. Semudah itu! Tetapi kemudian, kita harus tweak dengan kode CSS untuk mengatur bagaimana itu terlihat dalam blog.

PENJELASAN LEBIH LANJUT MENGENAI BODY CODE Dalam tutorial ini menjelaskan sedikit lagi tentang beberapa perintah khusus yang kamu akan lihat dalam bagian Body. Di bawah ini contoh kodenya. skip to main | skip to sidebar 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 w3school.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.

MEMBUAT 3 KOLOM TEMPLATE ATAU LEBIH Salah satu kemampuan dasar yang paling diinginkan para pembuat blogger template adalah membuat 3-column template. Ga asik kan kalo cuma satu sidebar terus sementara di luar sana para pembuat blogger template yang lain bahkan sudah punya empat atau lebih kolom. Tutorial kali ini adalah hal langsung dan simple untuk melakukannya sendiri tanpa haru terlalu banyak melakukan code tweaking.

Tutorial ini dipersiapkan dengan asumsi bahwa kamu sudah mengerti bagian di dalam BELAJAR MEMBUAT BLOGGER TEMPLATE 8 dan BELAJAR MEMBUAT BLOGGER TEMPLATE 9, yang menjelaskan kode dasar bagian Body. Apa yang akan kita lakukan adalah untuk mengubah atau menambahkan sidebar dengan tweaking XML code secara langsung dari halaman Blogger Edit HTML TANPA Mencentang Expand Widget Templates. Ini berarti bagian Body yang ada di bawah tidak akan diperlihatkan semua algoritma detailnya untuk widget dan post data. Itu akan membuat segalanya sesimpel mungkin

Menambahkan Sidebar Untuk membuat 3-column Template: Ketika kita scroll ke bawah pada bagian Body, penampakan kode body mungkin akan mendekati contoh di bawah ini( note : mungkin berbeda pada template lainnya). Contoh template 2-column:

Kode di atas memperlihatkan kode 2-column-template dengan wrapper yang disebut content-wrapper yang berisikan main-wrapper (yang berisikan Blog Posts) dan sidebar-wrapper.

Untuk membuat sidebar yang lain, apa yang perlu kita lakukan hanyalah masuk ke halaman Edit HTML dan tanpa mencentang Expand Widget Templates , paste kode sidebar-wrapper (diperlihatkan dengan warna merah) sebelum atau sesudah kode main-wrapper. Sebagai contoh, untuk membuat kolom Sidebar-Main-Sidebar, letakkan kode tersebut sebelum kode main-wrapper. Melihat pada contoh di bawah ini yang id dari sidebar-wrapper pertama adalah sidebar1 dan id dari sidebar-wrapper kedua adalah sidebar2.

Note: Kamu juga harus memastikan lebar dari kedua Sidebars dan blok Main akan pas di dalam content-wrapper dan CSS code ditulis dengan baik untuk menempatkan Sidebars secara berdampingan dengan main-wrapper. Beberapa kesalahan yang sering dilakukan adalah salah satu atau kedua Sidebars akan bertumpuk di bawah blok Main. Contoh template 3-column dengan posisi S-M-S :

Mengubah lokasi sidebar : Jika ingin mengubah lokasi sidebar untuk membuat 3-column template dengan konfigurasi Main-Sidebar-Sidebar contohnya, apa yang kamu perlu dilakukan untuk meletakkan sidebar-wrapper dimana kamu ingin dia terlihat. Untuk melakukan ini, simplenya masuk ke Edit HTML tanpa mencentang tanda Expand Widget Templates, cut kode sidebar-wrapper yang pertama dan paste di anatara main-wrapper dan sidebar2 lihat contoh kode di bawah ini : Contoh template 3-column dengan posisi M-S-S : Sekarang kamu sudah mengetahui dasar-dasar bagaimana menambahkan atau mengubah posisi sidebar. Sangat mudah.

CARA MEMBUAT BACKGROUND GAMBAR PADA BLOGGER TEMPLATE Jika kita melihat template beberapa template - Kita akan melihat bahwa banyak template menggunakan latar belakang bukan dari warna polos, melainkan dibuat dari pola yang berulang dari suatu gambar. Gambar ini disebut gambar latar belakang (background image). Bisa saja satu gambar besar mengisi atas layar atau gambar kecil (sebut saja 50 x 50 piksel) yang berulang secara horizontal dan / atau vertikal. Hal yang rapi tentang penggunaan, atau embedding gambar latar belakang adalah bahwa kita dapat membuat gambar apapun yang kita inginkan dan menggunakannya di blog kita untuk membuatnya unik dan berbeda dari blog lainnya. Gambar latar belakang dapat ditempatkan dalam container - baik di dalam kontainer Body (yang mengisi seluruh atas layar), di dalam Post, Sidebar, Comment,, atau bahkan di sebuah header container (sebut saja, Comment Header). Misalnya, jika Kita melihat template ini, Kita akan melihat bahwa Comment Header di bawah posting adalah tombol hijau bulat - foto yang tertanam di dalam Comment Header. Kita juga dapat menggunakan sebuah gambar untuk membuat bingkai berbayang (sekarang cukup umum di blog). Untuk melakukannya, Kita membuat gambar latar belakang singkat dengan panjang span yang memenuhi seluruh lebar template. Di ujung kanan dan kiri dari gambar latar belakang, Kita dapat membuat pola muram (atau pola yang akan dijadikan frame), dan menambahkan ini di dalam outer-wrapper, lalu diulangi secara vertikal. Tapi, bagaimana cara untuk menambahkan dan mengulang gambar secara vertikal, horizontal, atau di kedua arah? MENAMBAHKAN BACKGROUND GAMBAR : katakan saja kalau kita akan menggunakan gambar berukuran 100 x 100 pixels sebagai background gambar di dalam container image Sidebar1. apa yang perlu dilakukan adalah menemukan kode sidebar1 {...} di dalam CSS Styling dan menambahkan kode yang berwarna merah di bawah ini (kode lainnya hanya contoh saja). #sidebar1 { margin: 0px 10px 15px 10px; padding: 0 0 0 0; width: 150px; background: URL(http://the-url-of-your-image) repeat left top;

text-align: left; } kode "background:..." akan menampilkan gambar dari URL yang kita letakkan dan repeat (mengulanginya) di kedua sisi, vertical dan horizontal. Lokasi gambar pertama adalah di paling atas dan paling kiri. Kode umum untuk memasukkan background gambar adalah : background: URL(http://...) repeat-command x-position y-position; SEMUA PERINTAH PENGULANGAN (REPEAT COMMAND) : no-repeat (gambar tudak akan diulangi) repeat (diulangi secara vertical dan horizontal) repeat-x (hanya diulangi secara horizontal) repeat-y (hanya diulangi secara vertikal) SEMUA PERINTAH POSISI HORIZONTAL (X) : left (meletakkan gambar pertama di sisi paling kiri) center (meletakkan gambar di tengah-tengah) right (meletakkan gambar pertama di sisi paling kanan) SEMUA PERINTAH POSISI VERTIKAL (Y) : top (meletakkan gambar pertama di posisi paling atas) center (meletakkan gambar pertama di tengah-tengah) bottom (meletakkan gambar pertama di posisi paling bawah)

MULAI MEMBUAT TEMPLATE KITA SENDIRI Sekarang kita sudah membaca seluruh tutorial, kamu sudah siap untuk memulai mendesain templatemu sendiri. Di dalam tutorial ini saya akan memperlihatkan langkah-langkah penting yang harus dilakukan untuk membuat template secara cepat dan mudah. Hal pertama yang perlu dimengerti tentang pendesainan template adalah teknik mendesain adalah unik dan berbeda-beda pada masing2 orang. Pada akhirnya semua terserah padamu bagaimana kamu ingin melakukannya- jika dan hanya jika kamu familiar dan pernah membuat beberapa template sendiri. Tapi jika kamu adalah pemula, yang paling baik dilakukan adalah mengikuti langkah-langkah di bawah ini, sehingga tidak menemui banyak kesulitan. Step 1 Memilih template yang sudah dibuat sebagai permulaan: Untuk pemula, cara tercepat dan termudah mulai mendesain template adalah mulai dengan menggunakan template yang sudah jadi. Tapi jangan lakukan itu dengan keinginan menconteknya (plagiarism) Step 2 Mengatur jumlah dan lokasi sidebar: Jika kamu adalah pemula, pastikan kamu memulai dengan template yang mendekati pola template yang kamu inginkan. Contohnya, jika kamu ingin membuat 3-column template, Jangan memulai dengan 2-column template yang sudah jadi. Atau jika ingin mengubah dan menambahkan sidebar sendiri, baca Tutorial 10: membuat 3-Column Template atau lebih .. Step 3 Mengatur lebar template: Hal pertama yang perlu dilakukan setelah memulai membuat template adalah mengatur lebar dari template tersebut. Untuk melakukan ini, kita perlu mengatur lebar dalam CSS Style code. Itu semua dijelaskan dalam Tutorial 7: Mengatur ukuran Template. Container umum yang perlu diatur lebarnya adalah : body outer-wrapper content-wrapper header-wrapper main-wrapper sidebar-wrapper (or sidebar1, sidebar2, and so on) footer-wrapper

Kamu juga bisa mengatur lebar menjadi fluid width(berubah sesuai dengan browser atau screen size) atau mengatur lebar secara fixed width. Catatn untuk mengatur lebar di dalam container-wrapper bisa jadi sedikit menipu karena kamu memiliki Main dan Sidebar containers di dalamnya. Jika lebar tidak diatur dengan baik, Sidebars bisa menumpuk dengan Main container. Step 4 Membangun Objects Percobaan: jika kamu mendesain template baru, bagaimakah kamu mengetahui bahwa kode-kodemu benar jika kamu melihat hasilnya?? Jadi, apa yang perlu dilakukan adalah membangun object percobaan- contohnya 3 postingan atau lebih, postingan yang memiliki quote, a numbered list, un-numbered list, membuat widget yang banyak untuk melihat bagaimana sidebar kelihatannya, pastikan kamu punya label yang terlihat dalam Labels widget,buat beberapa comment percobaan untuk mengetahui bagaimana terlihat, dan sebagainya. Step 5 - Tweaking CSS code untuk meng-customize tampilan blog: Di sini tempat kamu memulai tweaking CSS code untuk meng-customize layout dasar dari blog dan perlahan-lahan menyempurnakannya sampai menjadi template yang diinginkan. Ini adalah proses yang bisa kamu lakukan berulang-ulang karena kita tidak akan selalu mendapat template yang sempurna hanya dengan sekali tweaking kode saja. lihat Tweaking CSS Code untuk lebih jelas Step 6 Mengetes di Browser Lain: Bagian ini bisa menjadi sangat mengganggu, tapi seperti orang bilang, kamu harus melakukan apa yang harus kamu lakukan. Untuk ini akan ditulis di subpost yang nanti aq posting. Untuk sementara lihat Testing and Viewing in Other Browsers dulu, belum sempet translate soalnya. Step 7 Menggunakan Gambar Untuk Background: Jika bosan menggunakan warna polos, gunakan saja gambar yang lebih manis untuk menjadi background dari seluruh blog atau di beberapa bagian (contohnya pada Post, Sidebar, Footer, Header, dll). Untuk melakukan ini lihat kembali Tutorial 11: Bagaimana menggunakan gambar sebagai background. Step 8 - (Tahap Akhir) Menyempurnakan Template: Tahap ini hanya untuk memastikan apakah semua berjalan baik . Kita hanya perlu melakukan double check. Lihat pada Blog secara teliti dan lakukan beberapa minor tweaking yang membuat templatemu lebih baik.

TWEAKING CSS CODE Ini adalah bagian penting untuk mendesain dan mengatur bagaimana tampilan blog. Saat melakukan ini, lebar dari container di dalam CSS code sebaiknya sudah diatur. Apa yang perlu diketahui tentang tweaking CSS code bahwa itu adalah proses recursive. Ini adalah proses untuk menyempurnakan template, mengubah kode kemudian melihat tampilan, bolak-balik seperti itu sampai kita puas dengan hasil akhirnya. Ada banyak hal yang harus ditweaking dan banyak container harus dicustomize. Jadi bagaimana caranya melakukan semua ini dan dari mana kita memulai? Pendekatan yang paling mudah adalah memulai dari atas. Assumsikan bahwa kita memulai dari template yang sudah jadi, pada point ini kita tidak perlu kawatir terlalu banyak tentang mengcustomize body, outer-wrapper, dan content-wrapper, kecuali lebar. Kita bisa tweaking container ini nanti (atau biarkan seperti kode aslinya, kecuali mau mengubahnya nanti). Jika ingin menggunakan gambar sebagai gambar background dari keseluruhan template, kita juga bisa melakukannya nanti. Baca Tutorial 3: Struktur dari bagian CSS style dulu jika kamu tidak familiar dengan dasar-dasar bagian kode CSS Styling. Ingat juga bahwa desain tidak mungkin sempurna saat pertama kali. Prosesnya memerlukan waktu dan banyak latihan.Untuk mengetahui dasar-dasar tweaking CSS code, baca Tutorial 4: Mengatur Property dari Container. Dan jika mau tahu container mana saja yang akan dicostumize, baca Tutorial 5: Container dan elemen Umum dalam Blogger Template. Header: Saya menyarankan Anda memulai dari bagian Header. Yang paling umum perlu dilakukan adalah mengatur warna background, mengatur tampilan Blog Title dan Blog Description, font, warna, font-size, dll. Jika ingin menggunakan gambar background besar sebagai gambar header image, atur itu menggunakan tombol Edit Header dalam halaman Page Elements. Daftar di bawah ini diambil dari Tutorial 5 #header-wrapper - container yang membelit Blog Title dan Blog Description. #header container di dalam header-wrapper. #header h1 tag di dalam container ini mengatur tampilan dan layout dari Blog Title. #header h1 a mengatur property Blog Title sebagai link text. #header .description property Blog Description. #header a img mengatur property dari gambar di dalam header

Main dan Post: Container selajutnya yang ditweaking adalah Main dan Post (termasuk Post-Footer). Ini akan memakan waktu banyak karena banyak subcontainer di dalamnya. Faktanya, Post adalah subcontainer dari Main. Selalu lebih mudah jika kita melakukan tweaking subcontainers mengikuti urutan-urutan tertentu. Saranku, gunakan urutan di bawah ini. Daftar di bawah ini dari Tutorial 5. Main : #main-wrapper container yang membelit Date Header, Blog Posts, Comments, Feed Link, dan beberapa widget yang ditempatkan di atas atau di bawah Blog Posts. #main container di dalam main-wrapper. #main .widget mengatur property dari semua widget di main container. h2.date-header mengatur property dari Date Header (di atas Post Title). .post mengatur Blog Posts container. .post h3 mengatur property dari Post Title. .post-body p mengatur property dari body atau content .post ul mengatur property dari unordered list (daftar yang tidak bernomor). .post ol mengatur property dari ordered list (daftar bernomor). .post li mengatur property dari daftar sendiri di unordered list atau ordered list. a img mengatur property umum dari gambar (refer link dan gambar itu sendiri dengan linknya). blockquote - mengatur quoted text dalam postingan. code mengatur text di dalam tag code dalam postingan. Post Footer : .post-footer mengatur property keseluruhan post-footer. .post-footer-line mengatur property setiap baris baru dalam post-footer. .post-footer a mengatur property link text dalam post-footer. .post-footer .post-comment-link a mengatur "comment" link dalam post- footer. #blog-pager mengatur property "newer posts", "home", dan "older posts" link. #blog-pager-newer-link mengatur property dari "newer posts" link. #blog-pager-older-link mengatur property dari "older posts" link. .feed-links mengatur "Subscribe to: Posts (Atom)" link. Sidebars: Jika sudah selesai dengan bagian-bagian di atas, selanjutnya kita akan mengatur sidebar. Jika kamu memiliki lebih dari 1 sidebar, kamu mungkin ingin

mengcustomize setiap sidebar dengan costumize yang berbeda. Kamu juga akan mengcustomize Profile dan Blog Archive jika ingin mereka berbeda dari widget lainnya. Daftar berikutnya adalah: .sidebar-wrapper container yang membelit semua elemen dan content sidebar. .sidebar container di dalam sidebar-wrapper. #sidebar1 mengatur property sidebar1. #sidebar2 mengatur property dalam sidebar2. Jika ingin membuat property sidebar1 dan sidebar2 sama, kita hanya perlu .sidebar dan tidak harus menuliskan #sidebar1 dan #sidebar2 dalam CSS code. .sidebar .widget mengatur property dari semua widget (add Page Element) dalam sidebar. #sidebar1 .widget hanya mengatur widget dalam sidebar1. .sidebar .BlogArchive mengatur property Blog Archive. Tekniknya sih ini sidebar juga, tapi aku tidak yakin mengapa pengaturan property untuk sidebar widget tidak mengubah property Blog Archive. Itulah mngapa kita harus menuliskan perintah untuk mengatur property BlogArchive. .sidebar h2 mengatur property judul sidebar widget. .sidebar #BlogArchive1 h2 mengatur judul Blog Archive. #Profile1 mengatur property umum About Me. #Profile1 h2 mengatur title/header dari the About Me. .profile-img a img mengatur gambar dari About Me. .profile-textblock mengatur descripsi author About Me. .profile-data mengatur author data About Me. .profile-datablock mengatur semua blok dalam About Me. Comments: Setelah selesai dengan sidebar, sekarang giliran bagian Comments. Posting beberapa comment untuk melihat bagaiman tampilannya setelah tweaking. Daftar berikutnya adalah: #comments mengatur property keseluruhan comment container. #comments a - mengatur property link text dalam comment container. #comments h4 mengatur header comment container. .deleted-comment mengatur property deleted comment. .comment-author mengatur property comment author. .comment-body p - mengatur property comment body. #comments ul - mengatur unordered list di dalam comment container. #comments li mengatur individual list di dalam comment container.

Footer: daftar terakhir adalah bagian footer, yaitu: #footer-wrapper bagian yang membelit keseluruhan elemen dan content di dalam footer section. #footer container dalam footer-wrapper. #footer h2 mengatur property footer title/header. #footer .widget - mengatur footer widget properties. .footer a mengatur semua footer link text. Penyempurnaan: Sekarang kita sudah menyelesaikan semua container, apa yang perlu dilakukan adalah lihat hasil tampilan lalu kembali lagi ke bagian kode untuk memperbaiki beberapa hal kecil. Mungkin untuk mengubah beberapa font atau warna background, font size, margin dan paddings, menambah border atau mengubah warna border, dan sebagainya. Tapi hati-hatilah saat menambah border, melakukan itu mungkin perlu mengubah lebar container yang kamu tambahkan border. Jika terjadi masalah (misalnya Sidebar melorot di bawah Blog Post), kamu perlu menambah lebar container induk dari container tersebut. Jalan paling baik untuk mengubah background dan warna font adalah membuat mereka sebagai variable sehingga kita bisa menggunakan tab Fonts and Colors dalam halaman Layout. Jika tidak yakin melakukan ini, gunakan Generic Blogger Template sebagai template awal. Template itu punya banyak variable font dan warna untuk memulai.

STRUKTUR BLOGGER TEMPLATE CODE STRUKTUR DARI BAGIAN CSS STYLE MENGATUR PROPERTI DARI CONTAINER CONTAINER DAN ELEMEN UMUM DALAM BLOGGER TEMPLATE MENGGUNAKAN TEMPLATE YANG SUDAH JADI MENGATUR UKURAN TEMPLATE BAGIAN BODY DARI BLOGGER TEMPLATE KODE PENJELASAN LEBIH LANJUT MENGENAI BODY CODE MEMBUAT 3 KOLOM TEMPLATE ATAU LEBIH CARA MEMBUAT BACKGROUND GAMBAR PADA BLOGGER TEMPLATE MULAI MEMBUAT TEMPLATE KITA SENDIRI TWEAKING CSS CODE