Organ adalah kumpulan beberapa jaringan yang secara bersama-sama melakukan tugas tertentu. Organ tumbuhan ada lima yaitu akar, batang, daun, bunga, buah. Yang pertama kita bahas adalah akar alias radix. Akar adalah bagian utama dari tumbuhan berkarmus atau sudah memiliki pembuluh. Akar berkembang dari meristem apikal di ujung akar yang dilindungi kaliptra (tudung akar). Tudung akar berasal dari meristem apikal dan terdiri dari sel-sel parenkim. Tudung akar berfungsi sebagai pelindung.
Meristem apikal selalu membelah diri menghasilkan sel-sel baru. sel-sel baru terbentuk pada bagian tudung akar atau bagian dalam meristem apikal. Pembelahan meristem apikal membentuk daerah pemanjangan atau Zona perpanjangan sel. Di belakangnya terdapat Zona differensiasi sel dan zona pendewasaan sel. Pada zona differensiasi sel, sel-sel akar berkembangmenjaadi beberapa sel permanen, misalnya beberapa sel terdifferensiasi menjadi xilem, floem, parenkim, dan sklerenkim.
FUNGSI AKAR :
a. untuk melekatkan tumbuhan pada media (tanah) karena akar memiliki kemampuan untuk menerobos lapisan tanah.
b. Menyerap garam, mineral, dan air, melalui bulu2 akar, air masuk ke dalam tubuh tumbuhan
c. Pada beberapa tanaman, akar digunakan sebagai tempat penyimpanan cadangan makanan, contohnya pada ubi, kentang, wortel, dan lain2
d. Pada tanaman tertentu, seperti bakau berperan untuk pernafasan.
SIFAT AKAR:
1. merupakan bagian tumbuhan yang biasanya terdapat di dalam tanah, dengan arah tumbuh ke pusat bumi (geotrop) atau menuju ke air (hidrotrop), meninggalkan udara dan cahaya.
2. tidak berbuku-buku, jadi juga tidak beruas dan tidak mendukung daun-daun atau sisik-sisik maupun bagian-bagian lainya.
3. warna tidak hijau, biasanya keputih-putihan atau kekuning-kuningan.
4. tumbuh terus pada ujungnya, tetapi umumnya pertumbuhannya masih kalah pesat jika dibandingkan dengan bagian permukaan tanah.
5. bentuk ujungnya seringkali meruncing, hingga lebih mudah untuk menembus tanah.
STRUKTUR AKAR
Akar memiliki struktur luar yang meliputi : tudung akar, batang akar, cabang akar (pada dikotil), dan bulu akar. Secara anatomi akar terdiri dari empat bagian, epidermis, korteks, endodermis, dan stele. Di luar itu ada lapisan piliferous yaitu epidermis yang berada pada daerah bulu akar.
Kita pelajari struktur anatomi akar satu per satu
* EPIDERMIS terdiri dari 1 lapis sel yang tersusun rapat, dindng sel tipis sehingga mudah ditembus air. Memiliki rambut-ranbut akar yang merupakan hasil aktifitas sel dari belakang ttik tumbuh. rambut2 akar ini berfungsi memperluas bdang penyerapan.
* KORTEKS terdiri dari banyak sel dan tersusun berlapis-lapis, dinding selnya tipis dan mempunyai banyak ruang antarsel untuk pertukaran gas. jaringan-jaringan yang terdapat pada korteks antara lain : parenkim, kolenkim, dan sklerenkim.
* ENDODERMIS terletak di sebelah dalam korteks. endodermis berupa 1 lapis sel yang tersususn rapat tanpa ruang antar sel. dinding selnya mengalami penebalan gabus. deretan sel-sel endodermis dengan penebalan gabusnya dinamakan pita kaspari. penebalan gabus ini tidak dapat ditembus air sehingga air harus masuk ke silinder pusat mellui sel endodermis yang dindingnya tidak menebal, disebut sel penerus air. Endodermis merupakan pemisah yang jelas antara korteks dan stele.
* STELE (SILINDER PUSAT) terletak di sebelah dalam endodermis. Di antara stele terdapat berkas pengangkutan (floem dan xilem)
MACAM-MACAM SISTEM PERAKARAN
Ada tiga macam sistem perakaran, yakni:
* SISTEM PERAKARAN TUNGGANG (RADIX PRIMARIA)
Sistem Perakaran ini terdapat pada tumbuhan dikotil. Akar ini terdiri atas sebuah akar besar dengan beberapa cabang dan ranting akar, merupakan perkembangan dari akar primer dari biji berkecambah.
* SISTEM PERAKARAN SERABUT (RADIX ADVENTICIA)
Sistem perakaran ini dimiliki oleh tumbuhan monokotil. Akar ini terdiri dari sejumlah akar kecil, ramping, dan berukuran sama. perakaran serabut trbentuk pada waktu akar primer mmebentuk cabang sebanyak-banyaknya.
* SISTEM PERAKARAN ADVENTIF
Sistem perakaran ini adalah sistem perakaran yang bukan berasal dari akar primer. Contohnya akar dari batang cangkokan, akar dari umbi batang, dan akar dari stek, bahkan ada akar yang dari daun.
Posting selanjutnya akan membahas struktur akar monokotil dan dikotil.
Saturday, August 15, 2009
Friday, August 14, 2009
BELAJAR TENTANG PERADANGAN AMANDEL
Mandel, amandel, atau secara medis disebut tonsil atau tonsila palatina adalah bagian dari sistem kelenjar getah bening yang berada pada sisi kiri dan kanan bagian belakang rongga mulut. disebut amandel karena bentuknya mirip buah amandel. Seperti kelenjar getah bening lainnya, amandel adalah bagian dari sistem kekebalan yang menjaga tubuh manusia dari infeksi, khususnya infeksi saluran nafas atas dan faring.
Peradangan pada amandel disebut sebagai tonsilitis. Infeksi parah pada amandel dapat mengakibatkan amandel membengkak hingga harus dioperasi untuk diambil, namun diambilnya amandel dapat mengakibatkan melemahnya sistem kekebalan tubuh.
Radang amandel (bahasa Inggris: tonsillitis) adalah infeksi pada amandel yang terkadang mengakibatkan sakit tenggorokan dan demam.
Secara klinis peradangan ini ada yang akut (baru), ditandai dengan nyeri menelan (odinofagi), dan tidak jarang disertai demam. Sedangkan yang sudah menahun biasanya tidak nyeri menelan, tapi jika ukurannya cukup besar (hipertrofi) akan menyebabkan kesulitan menelan (disfagia)
Kapan amandel harus dibedah? Para ahli masih belum satu pendapat mengenai ini, namun umumnya literatur klinik membagi indikasi pembedahan radang amandel (tonsilektomi) atas 2 yaitu:
1. Absolut (mutlak: harus dibedah)
2. Relatif (tidak mutlak: sebaiknya dibedah)
Radang Amandel Akut
Penyebab Penyebab tersering radang amandel akut adalah streptokokus beta hemolitikus grup A. Bakteri lain yang juga dapat menyebabkan radang amandel akut adalah Haemophilus influenza dan bakteri dari golongan pneumokokus dan stafilokokus. Virus juga kadang-kadang ditemukan sebagai penyebab radang amandel akut.
Patologi Amandel meradang dan membengkak, terdapat bercak abu-abu atau kekuningan pada permukaannya, dan jika berkumpul maka terbentuklah membran. Bercak-bercak tersebut sesungguhnya adalah penumpukan leukosit, sel epitel yang mati, juga kuman-kuman baik yang hidup maupun yang sudah mati.
Gejala Keluhan pasien biasanya berupa
- Tenggorokan sakit
- Sulit atau sakit saat menelan
- Sakit kepala
- Demam dan kedinginan
- Pembesaran, pembengkakan kelenjar (kelenjar getah bening) disekitar rahang dan leher.
- Kehilangan suara
Pengobatan Sebaiknya pasien tirah baring. Cairan harus diberikan dalam jumlah yang cukup, serta makan makanan yang bergizi namun tidak terlalu padat dan merangsang tenggorokan. Analgetik diberikan untuk menurunkan demam dan mengurangi sakit kepala. Di pasaran banyak beredar analgetik (parasetamol) yang sudah dikombinasikan dengan kofein, yang berfungsi untuk menyegarkan badan.
Jika penyebab radang amandel adalah bakteri maka antibiotik harus diberikan. Obat pilihan adalah penisilin. Kadang-kadang juga digunakan eritromisin. Idealnya, jenis antibiotik yang diberikan sesuai dengan hasil biakan. Antibiotik diberikan antara 5 sampai 10 hari.
Jika melalui biakan diketahui bahwa sumber infeksi adalah Streptokokus beta hemolitikus grup A, terapi antibiotik harus digenapkan 10 hari untuk mencegah kemungkinan komplikasi nefritis dan penyakit jantung rematik. Kadang-kadang dibutuhkan suntikan benzatin penisilin 1,2 juta unit intramuskuler jika diperkirakan pengobatan orang tidak adekuat.
sumber : wikipedia dan lain-lain
Thursday, August 13, 2009
CARA LANGGANAN POSTING LEWAT EMAIL
Setelah melihat daftar subscriber di feedburner O'chan baru tahu kalau banyak yang pengen langganan di sini tapi ngga tau caranya. Kenapa O'chan bisa ngambil kesimpulan kaya gitu? Itu karena banyak subscriber (pelanggan) yang belum memverifikasi emailnya. Bahkan jumlah subscriber yang belum memverifikasi lebih banyak ketimbang yang sudah verifikasi. Supaya ngga terjadi hal itu lagi, supaya semua bisa berlangganan di kamus pengetahuan, O'chan sekarang membuat tutorial bagaimana cara berlangganan posting di sini.
Pertama masukkan email ke form seperti di bawah ini (lihat di bagian kanan blog)
klik subscribe, maka akan muncul jendela pop up seperti di bawah ini
masukkan kode yang muncul lalu klik complete subscribtion request.
Belum berhenti sampai di situ. Setelah ini kita harus masuk ke email untuk memverifikasi. Kenapa harus begitu?? karena bisa saja seseorang memasukkan email orang lain atau email yang sudah tidak berlaku sehingga kemungkinan besar email yang dikirim oleh kamus pengetahuan percuma. Bahkan jika email yang dimasukkan sama-sekali tidak ingin menerima berita dari sini, email bisa dianggap spam (nah lo!!!). Makanya harus diverifikasi.
Untuk memverifikasi, kita harus log in ke email yang kita gunakan untuk langganan. Email verifikasi akan dikirim ke email yang ditulis tadi. Email akan dikirim dari 'feedburner email subscribtion' dan Berjudul 'Activate your Email Subscription to: KAMUS PENGETAHUAN'. Setelah ketemu, buka email dan klik link yang diberikan.
Selesai...
Pertama masukkan email ke form seperti di bawah ini (lihat di bagian kanan blog)
klik subscribe, maka akan muncul jendela pop up seperti di bawah ini
masukkan kode yang muncul lalu klik complete subscribtion request.
Belum berhenti sampai di situ. Setelah ini kita harus masuk ke email untuk memverifikasi. Kenapa harus begitu?? karena bisa saja seseorang memasukkan email orang lain atau email yang sudah tidak berlaku sehingga kemungkinan besar email yang dikirim oleh kamus pengetahuan percuma. Bahkan jika email yang dimasukkan sama-sekali tidak ingin menerima berita dari sini, email bisa dianggap spam (nah lo!!!). Makanya harus diverifikasi.
Untuk memverifikasi, kita harus log in ke email yang kita gunakan untuk langganan. Email verifikasi akan dikirim ke email yang ditulis tadi. Email akan dikirim dari 'feedburner email subscribtion' dan Berjudul 'Activate your Email Subscription to: KAMUS PENGETAHUAN'. Setelah ketemu, buka email dan klik link yang diberikan.
Selesai...
Wednesday, August 12, 2009
TWEAKING CSS CODE
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.
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.
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.
Saturday, August 8, 2009
WEBSITE E-DUKASI.NET LAGI BERMASALAH
Sebenernya O'chan agak curiga waktu lihat statistik blog beberapa waktu terakhir ini. Entah kenapa beberapa orang nyasar ke sini dengan kata kunci e-dukasi.net. Awalnya sih beberapa orang aja,,, tapi lama-lama kog nambah terus??? Berbekal kecurigaan ini, O'chan coba cek di google.co.id dengan jalan memasukkan kata kunci e-dukasi.net. Hasilnya??? website e-dukasi.net tetap di urutan pertama. Percobaan pertama ini ga O'chan lanjutin dengan masuk ke website e-dukasi.net langsung. "Mungkin nyasar aja" O'chan pikir kayak gitu.
Beberapa hari kemudian ternyata masih ada aja yang nyasar ke sini dengan kata kunci e-dukasi.net. what happen??? langsung aja masuk ke sitenya kan?? ga perlu liat review dari blog segala. Oleh karena itu O'chan cek lagi kata e-dukasi.net di google. Alamat e-dukasi.net masih di posisi paling atas. Nah Lho!!!
Karena lebih penasaran dari sebelumnya, O'chan coba masuk ke websitenya langsung. ternyata ga bisa diakses alias Page load Error. O'chan coba beberapa kali, masih error juga. Saat itulah baru O'chan ngerti kenapa banyak yang nyasar ke sini. mungkin tertarik dengan review O'chan sebelumnya tentang e-dukasi.net, mungkin pembaca berharap menemukan website itu lagi.
E-dukasi.net adalah e-learning yang menurut O'chan sangat bermanfaat. ada apa ya, sampe2 websitenya menghilang tiba-tiba? jarang ada website yang memuat materi smp dan sma selengkap itu. O'chan harap sih e-dukasi.net ga bener-bener bakal hilang, kalo sekedar pindah hosting atau semacamnya sih ga apa-apa. Kira-kira ada yang tahu kenapa bisa kaya gitu???
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.
Subscribe to:
Posts (Atom)