Subpost dari Belajar Membuat Blogger Template 12 step 5
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.
Showing posts with label tutorial membuat template. Show all posts
Showing posts with label tutorial membuat template. Show all posts
Wednesday, August 12, 2009
MULAI MEMBUAT TEMPLATE KITA SENDIRI
BELAJAR MEMBUAT BLOGGER TEMPLATE 12
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.
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.
Friday, August 7, 2009
CARA MEMBUAT BACKGROUND GAMBAR PADA BLOGGER TEMPLATE
BELAJAR MEMBUAT BLOGGER TEMPLATE 11
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)
translate dari : ourbloggertemplate.com
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)
translate dari : ourbloggertemplate.com
MEMBUAT 3 KOLOM TEMPLATE ATAU LEBIH
BELAJAR MEMBUAT BLOGGER TEMPLATE 10
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:
<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='sidebar1' 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 -->
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.
<div id='content-wrapper'>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<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 -->
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 :
<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='sidebar1' preferred='yes'>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Sekarang kamu sudah mengetahui dasar-dasar bagaimana menambahkan atau mengubah posisi sidebar. Sangat mudah.
translate dari : ourbloggertemplate.com
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:
<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='sidebar1' 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 -->
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 :
<div id='content-wrapper'>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<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 -->
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 :
<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='sidebar1' preferred='yes'>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Sekarang kamu sudah mengetahui dasar-dasar bagaimana menambahkan atau mengubah posisi sidebar. Sangat mudah.
translate dari : ourbloggertemplate.com
Thursday, August 6, 2009
PENJELASAN LEBIH LANJUT MENGENAI BODY CODE
BELAJAR MEMBUAT BLOGGER TEMPLATE 9
Dalam tutorial ini menjelaskan sedikit lagi tentang beberapa perintah khusus yang kamu akan lihat dalam bagian Body. Di bawah ini contoh kodenya.
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
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
Wednesday, August 5, 2009
BAGIAN BODY DARI BLOGGER TEMPLATE KODE
BELAJAR MEMBUAT BLOGGER TEMPLATE 8
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.
<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='Testpage Two (Header)' 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 id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</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 | Bordr' type='Text'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
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.
<div id='banner-wrapper'>
<b:section class='banner' id='banner' preferred='yes'>
</b:section>
</div>
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.
translate dari ourbloggertemplate.com
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.
<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='Testpage Two (Header)' 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 id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</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 | Bordr' type='Text'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
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.
<div id='banner-wrapper'>
<b:section class='banner' id='banner' preferred='yes'>
</b:section>
</div>
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.
translate dari ourbloggertemplate.com
MEMBUAT JUDUL WIDGET DENGAN BACKGROUND BERWARNA
Postingan ini sengaja O'chan buat untuk menjawab pertanyaan Heri yaitu "kalo buat judul widget punya background yang berwarna gmn?". O'chan coba-coba cek kodenya n akhirnya ketemu cara memberi background pada judul widget. semoga membantu.
Carilah kode untuk sidebar heading. Kodenya biasanya menggunakan .sidebar h2. Kodenya bisa beda-beda untuk tiap template. Di bawah ini O'chan kasi 2 contoh :
Ini kode dari salah satu template ourbloggertemplate.com
Carilah kode untuk sidebar heading. Kodenya biasanya menggunakan .sidebar h2. Kodenya bisa beda-beda untuk tiap template. Di bawah ini O'chan kasi 2 contoh :
/* sidebar heading */
.sidebar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $sidebarHeaderColor;
font: $sidebarHeaderFont;
background:#718E89;
}Ini kode dari salah satu template ourbloggertemplate.com
.sidebar h2, .rsidebar h2, .lsidebar h2 {
background:#718E89;
color:#ffffff;
font-size: 16px;
font-family: Century Gothic, Trebuchet;
font-weight: bold;
margin: 0 0 10px;
padding: 3px 0 3px 10px;
}
Ini kode dari salah satu template simplyfabulousbloggertemplate.com
Untuk warna biru adalah kode warna background judul widget.
background:#718E89;Bagian yang berwarna pink adalah kode warna hexadecimal. Bisa dilihat di sini. letakkan kode background seperti kode warna biru tersebut di antara {...} bersama kode css lainnya. setelah itu coba view blog untuk melihat hasilnya.
Wednesday, July 29, 2009
MENGATUR UKURAN TEMPLATE
BELAJAR MEMBUAT BLOGGER TEMPLATE 7
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.
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.
Tuesday, July 28, 2009
DAFTAR KODE WARNA HEXADECIMAL (TABEL)
Untuk mendesain template, web, dan desain lainnya, kita sering berhadapan dengan yang namanya Kode warna Hexadecimal (kode warna yang terdiri dari 6 karakter. Tabel di bawah ini sengaja diposting untuk memudahkan melihat kode warna yang nantinya diinsert ke dalam desain template. o'CHAN udah coba sediakan segala macam kode warna selengkap-lengkapnya. semoga membantu.
| #FF00FF | #00FFFF | #FFFF00 | #0000FF | #00FF00 | FF0000 |
| #FFFFFF | #CCCCCC | #999999 | #666666 | #333333 | #000000 |
| #9900FF | #9900CC | #990099 | #990066 | #990033 | #990000 |
| #9933ff | #9933CC | #993399 | #993366 | #993333 | #993300 |
| #9966FF | #9966CC | #996699 | #996666 | #996633 | #996600 |
| #9999FF | #9999CC | #999999 | #999966 | #999933 | #999900 |
| #99CCFF | #99CCCC | #99CC99 | #99CC66 | #99CC33 | #99CC00 |
| #99FFFF | #99FFCC | #99FF99 | #99FF66 | #99FF33 | #99FF00 |
| #00FFFF | #00FFCC | #00FF99 | #00FF66 | #00FF33 | #00FF00 |
| #00CCFF | #00CCCC | #00CC99 | #00CC66 | #00CC33 | #00CC00 |
| #0099FF | #0099CC | #009999 | #009966 | #009933 | #009900 |
| #0066FF | #0066CC | #006699 | #006666 | #006633 | #006600 |
| #0033FF | #0033CC | #003399 | #003366 | #003333 | #003300 |
| #0000FF | #0000CC | #000099 | #000066 | #000033 | #000000 |
| #CC00FF | #CC00CC | #CC0099 | #CC0066 | #CC0033 | #CC0000 |
| #CC33FF | #CC33CC | #CC3399 | #CC3366 | #CC3333 | #CC3300 |
| #CC66FF | #CC66CC | #CC6699 | #CC6666 | #CC6633 | #CC6600 |
| #CC99FF | #CC99CC | #CC9999 | #CC9966 | #CC9933 | #CC9900 |
| #CCCCFF | #CCCCCC | #CCCC99 | #CCCC66 | #CCCC33 | #CCCC00 |
| #CCFFFF | #CCFFCC | #CCFF99 | #CCFF66 | #CCFF33 | #CCFF00 |
| #FFFFFF | #FFFFCC | #FFFF99 | #FFFF66 | #FFFF33 | #FFFF00 |
| #FFCCFF | #FFCCCC | #FFCC99 | #FFCC66 | #FFCC33 | #FFCC00 |
| #FF99FF | #FF99FF | #FF9999 | #FF9966 | #FF9933 | #FF9900 |
| #FF66FF | #FF66CC | #FF6699 | #FF6666 | #FF6633 | #FF6600 |
| #FF33FF | #FF33CC | #FF3399 | #FF3366 | #FF3333 | #FF3300 |
| #FF00FF | #FF00CC | #FF0099 | #FF0066 | #FF0033 | #FF0000 |
| #6600FF | #6600CC | #660099 | #660066 | #660033 | #660000 |
| #6633FF | #6633CC | #663399 | #663366 | #663333 | #663300 |
| #6666FF | #6666CC | #666699 | #666666 | #666633 | #666600 |
| #6699FF | #6699CC | #669999 | #669966 | #669933 | #669900 |
| #66CCFF | #66CCCC | #66CC99 | #66CC66 | #66CC33 | #66CC00 |
| #66FFFF | #66FFCC | #66FF99 | #66FF66 | #66FF33 | #66FF00 |
| #33FFFF | #33FFCC | #33FF99 | #33FF66 | #33FF33 | #33FF00 |
| #33CCFF | #33CCCC | #33CC99 | #33CC66 | #33CC33 | #33CC00 |
| #3399FF | #3399CC | #339999 | #339966 | #339933 | #339900 |
| #3366FF | #3366CC | #336699 | #336666 | #336633 | #336600 |
| #3333FF | #3333CC | #333399 | #333366 | #333333 | #333300 |
| #3300FF | #3300CC | #330099 | #330066 | #330033 | #330000 |
Saturday, July 25, 2009
MENGGUNAKAN TEMPLATE YANG SUDAH JADI
BELAJAR MEMBUAT BLOGGER TEMPLATE 6
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.
translate dari ourbloggertemplate.com
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.
translate dari ourbloggertemplate.com
Friday, July 24, 2009
CONTAINER DAN ELEMEN UMUM DALAM BLOGGER TEMPLATE
BELAJAR MEMBUAT BLOGGER TEMPLATE 5
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 memuahkan 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.
translate dari :ourbloggertemplate.com
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 memuahkan 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.
translate dari :ourbloggertemplate.com
Subscribe to:
Posts (Atom)