Basic Menciptakan Templates Blog

BASIC MEMBUAT TEMPLATES BLOG

Sebelum-nya aku ragu mau posting Maknakel-Maknakel wacana blog, alasannya ialah aku masih pemula sekali dalam dunia blog ini. Mungkin ini suatu landasan yg ada di dalam hati saya, supaya-lah Maknakel yg aku posting ini tidak ada yg baca, tetapi Maknakel ini sanggup sebagai dokumen di dikala apabila nanti aku lupa dan membutuhkannya, aku sanggup membaca-baca kembali. Prinsip aku meskipun templates yg aku buat sendiri kurang bagus, tetapi sanggup menjadi suatu pujian diri sendiri.

Buat teman-teman yg sudah pada master, mohon dukungannya dengan memberi saran dan kritik. Dan buat teman-teman yg juga masih pemula dalam dunia blog, mari kita sama-sama belajar. Baik-lah kita mulai saja eksklusif dalam uji coba menciptakan templates (TRIAL AND ERROR).

| MENGENAL LAYOUT DAN MACAM-MACAMNYA |

Tentu-nya para blogger sudah mengetahui apa Maksud dengan layout... Tetapi sebelum kita mengulas layout, kita Musti tau terlebih dahulu structure template. Structure templates terdiri dari Header, Blog Post, Sidebar, dan Footer.














setelah kita tau structure sebuah template, baru-lah kita Musti tau layout-nya. Sebenarnya langkah awal kita dalam menciptakan sebuah templates, kita Musti memikirkan layout (tata letak) blog yg bakal kita buat templates-nya. Jadi, bayangkan terlebih dahulu structure layout yg mau Anda buat. Berikut contoh-contoh-nya :



Gambar layout di atas mempunyai sebuah header, sebuah blog post, dua buah sidebar (left dan right), dan sebuah footer.





Gambar di atas mempunyai dua buah header (left dan right), sebuah blog post, dua buah sidebar (left dan right), dan sebuah footer.





Gambar di atas mempunyai dua buah header (left dan right), sebuah blog post, sebuah sidebar, dua buah sidebar bottom (left sidebar bottom dan right sidebar bottom), dan sebuah footer.Layout di atas ialah layout yg sedang aku pakai ini hehehe...





Catatan pertama :

1. Structure layout di atas hanya beberapa pola saja, Anda sanggup menciptakan structure sesuai selera Anda, misalkan Anda buat left header, center header, dan right header (misalkan). Coba Anda bayangkan dulu structure layout yg mau Anda buat.

2. Untuk `BLOG POST` hanya satu saja (stabdar dan umum-nya), tapi jika Anda akil dalam hack blog, mungkin sanggup aja blog post-nya ada dua atau tiga !. Tetapi selama ini, belum pernah ada satu pun templates seseorang yg blog post-nya lebih dari satu.






Selanjutnya setelah Anda telah memikirkan structure layout yg mau Anda buat, Anda Musti tau dulu trik kerja sebuah `script`. Biasa itu di mana-mana jika nulis dari atas ke bawah.. Nulis script juga begitu... Dan layout yg muncul pun begitu, dari atas kemudian ke bawah. Makara yg paling utama kita buat ialah `HEADER` dulu. Tentukan structure header, apakah header saja (sebuah) atau dua buah header (left dan right), atau tiga buah, pokonya terserah Anda. Penulisan script `HEADER` kita anggap saja sudah kita simpan, selanjutnya ialah ke bawah header... "Jika yg sering menggunakan dreamweaver, terus edit-edit HTML, pastinya sudah tau setelah dari header itu bakal ke mana". setelah dari header itu bakal menuju left (kiri) di bawah header. Untuk left-nya, Anda sanggup menaruh blog post dulu atau sidebar dulu, itu terserah Anda. Jika blog post dulu, berMakna sidebar-nya nanti ada di samping kanan. Jika sidebar dulu, berMakna blog post-nya yg ada di samping kanan. Seperti ketiga pola structure layout di atas, blog post-nya dulu gres kemudian sidebar. "Jadi dari atas kemudian ke kiri di bawah-nya, dan dari kiri kemudian ke kanan-nya atau sanggup juga ke bawahnya eksklusif (niasanya buat templates yg tidak menggunakan sidebar), terakhir dari kanan ke bawah". Berikut gambar Keliru satu pola diikuti dengan step by step-nya :





setelah pengertian-pengertian di atas kita tau dan kita ingat, baru-lah kita menuju pembuatan script-nya. Tetapi lagi-lagi sebelum Musti tau pembuatan script-nya, kita Musti tau fungsi-fungsi script-nya. Kita mulai dari header dulu okey ??. Sekarang mari kita trial templates dari blogger langsung, ambil script templates minima yg warna putih (untuk uji coba).


Catatan kedua : dalam menciptakan sebuah tempkates, alasannya ialah kita berguru seCaranya otodidak, jadi kita tidak perlu buat dari awal dampai simpulan sebuah script-nya. Tetapi dalam pembuatan script, kita hanya tinggal menambah atau mengurangi-nya saja. Filosofi "Apakah Musti kita meneliti ulang gimana trik buat lampu bohlam ?" yg ditemukan `THOMAS ALFA EDISON`. Sebaik-nya kita jangan meneliti ulang, tetapi kita Musti mengembang-kan menjadi sebuah lampu yg sangat terang, aman, mirip lampu `NEON` kini ini. Sama prinsipnya dengan menciptakan script templates, Mengapa Musti full kita buat, lebih baik kita kembangkan !! Alasan-nya alasannya ialah lebih efisien, tetapi tetap ilmu yg kita sanggup semaksimal kita menciptakan script full dari awal hingga akhir... Ya itu terserah Anda masing-masing mau menciptakan full sendiri dari awal (dari kerangka) atau hanya tinggal membuatkan sesuai selera ??. Jika aku kali ini men share tutor trik buat template blog dengan trik mengembangkannya.. Tetapi ilmu yg bakal kita sanggup nanti sama dengan ilmu orang yg berguru full. Kelebihannya dalam pengembangan ialah lebih efisien atau menghemat waktu.


Baik kini kita edit-edit header dulu ya ?!. Inilah script CSS Header dari templates minima yg putih.. "header ini atau semua structure berada di dalam outer wrapper", jadi sebenar-nya kita Musti tau outer wrapper dulu. yg membungkus header, blog post, sidebar dan footer ialah outer wrapper.. Kita sanggup mengatur berapa lebar keseluruhan blog ? Kita juga sanggup menaruh gambar kita di outer wrapper untuk background dasar blog. Okey, tuju dulu CSS outer wrapper, inilah script CSS outer wrapper di minima putih (template default dari blogger.com) :

/* OUTER-WRAPPER
----------------------------------------------- */
#OUTER-WRAPPER {
WIDTH: 660PX;
MARGIN:0 AUTO;
PADDING:10PX;
TEXT-ALIGN:$STARTSIDE;
FONT: $BODYFONT;
}

#MAIN-WRAPPER {
WIDTH: 410PX;
FLOAT: $STARTSIDE;
WORD-WRAP: BREAK-WORD; /* FIX FOR LONG TEXT BREAKING SIDEBAR FLOAT IN IE */
OVERFLOW: HIDDEN; /* FIX FOR LONG NON-TEXT CONTENT BREAKING IE SIDEBAR FLOAT */
}

#SIDEBAR-WRAPPER {
WIDTH: 220PX;
FLOAT: $ENDSIDE;
WORD-WRAP: BREAK-WORD; /* FIX FOR LONG TEXT BREAKING SIDEBAR FLOAT IN IE */
OVERFLOW: HIDDEN; /* FIX FOR LONG NON-TEXT CONTENT BREAKING IE SIDEBAR FLOAT */
}

Coba lihat, ada outer wrapper, ada main wrapper dan ada sidebar wrapper.. Kali ini tutorial-nya untuk memperlebarkan dan mengecilkan wrapper dulu saja ya... Okey kini coba lihat dulu preview-nya, jangan diedit-edit dulu.

Coba lihat garis bab kiri blog post sama rata dengan garis bab kiri header. Itu alasannya ialah width (lebar) blog post dan sidebar sudah diadaptasi dengan lebar dari header wrapper dan kesemuanya diadaptasi dengan outer wrapper. Sekarang coba Anda ke CSS header wrapper, ini CSS-nya :

/* HEADER
-----------------------------------------------
*/

#HEADER-WRAPPER {
WIDTH:660PX
MARGIN:0 AUTO 10PX
BORDER:1PX SOLID $BORDERCOLOR
}

#HEADER-INNER {
BACKGROUND-POSITION: CENTER
MARGIN-LEFT: AUTO
MARGIN-RIGHT: AUTO
}

#HEADER {
MARGIN: 5PX
BORDER: 1PX SOLID $BORDERCOLOR
TEXT-ALIGN: CENTER
COLOR:$PAGETITLECOLOR
}

#HEADER H1 {
MARGIN:5PX 5PX 0
PADDING:15PX 20PX .25EM
LINE-HEIGHT:1.2EM
TEXT-TRANSFORM:UPPERCASE
LETTER-SPACING:.2EM
FONT: $PAGETITLEFONT
}

#HEADER A {
COLOR:$PAGETITLECOLOR
TEXT-DECORATION:NONE
}

#HEADER A:HOVER {
COLOR:$PAGETITLECOLOR
}

#HEADER .DESCRIPTION {
MARGIN:0 5PX 5PX
PADDING:0 20PX 15PX
MAX-WIDTH:700PX
TEXT-TRANSFORM:UPPERCASE
LETTER-SPACING:.2EM
LINE-HEIGHT: 1.4EM
FONT: $DESCRIPTIONFONT
COLOR: $DESCRIPTIONCOLOR
}

#HEADER IMG {
MARGIN-$STARTSIDE: AUTO
MARGIN-$ENDSIDE: AUTO
}

Lihat lebar header-wrapper sama lebar outer-wrapper (kedua-nya sama-sama 660px). Makara perhitungan-nya ialah.



Rumus ala aku hehehe :

Lebar blog post + lebar sidebar + padding = lebar header wrapper (Jika sisi kiri dan kanan mau sejajar mirip gambar di atas, gambar template minima). BerMakna, lebar blog post (main-wrapper) 410px + 220px (dari sidebar wrapper) = 630px. Dan sisa dari 660px-630px=30px ialah padding. Lebih jelas-nya, ini gambar-nya :



Sekarang coba ubah lebar header-wrapper-nya, dari 660px menjadi 925px.




Maka kita bakal lihat, header-nya memanjang ke kanan dan tidak center. Karena lebar header sudah keluar batas lebar outer-wrapper... Caranya untuk header itu kembali center lagi ialah, kita Musti bungkus kembali lebar header wrapper ke dalam lebar outer-wrapper, minimal di samakan lebar kedua-nya (geader wrapper dan outer wrapper) menjadi 925px. Maka hasil-nya bakal mirip ini :




Lihat header-nya kembali center dan lebih panjang, sebesar setting-an kita tadi yaitu 660px. Dan outer-nya pun menjadi lebih lebar. Tetapi jarak atau padding antara blog post dan sidebar semakin jauh. Karena kita sedang bahas header, jadi kali ini tidak beranjak ke pengaturan blog post dan sidebar dulu ya ?!.





Untuk template minima ini agak ribet untuk memasukkan sebuah gambar di header-nya (bagi aku yg awam hehehe) alasannya ialah ternyata yg buat ribet ialah header-nya yg dikunci. Makara kita gak sanggup menghapus border header atau-pun goresan pena yg ada di dalam border, dalam kasus di atas yaitu goresan pena "YOUR LIKE" (judul blog), maka gambar yg bakal kita mau sisipkan pin terhalangkan.. Bagaimana trik-nya ? ya Mudah saja, kunci tadi kita buka, di mana ? ya di script-nya, di script XML-nya.. Coba cari script ini :

<DIV ID='HEADER-WRAPPER'>
<B:SECTION CLASS='HEADER' ID='HEADER' MAXWIDGETS='1' SHOWADDELEMENT='NO'>
<B:WIDGET ID='HEADER1' LOCKED='TRUE' TITLE='YOUR LIKE (HEADER)' TYPE='HEADER'/>
</B:SECTION>
</DIV>

Ubah yg locked=true menjadi locked=false. Maka Anda sanggup menghapus header tadi dengan trik :

1. Klik Layout dari dashbord di blogger.com.

2. Maka halaman `Page Element` bakal terbuka. dan klik edit pada header.

3. Dan Anda sanggup menghapus-nya kini atau mengedit-edit.











Lihat !! structure layout-nya tidak ada header-nya.. Tapi kini Anda lebih Mudah dalam memasukkan gambar header atau pun iklan-iklan di header. Meskipun header di atas tidak ada, tetapi tetap Anda sanggup menambah-kan widget atau gambar dan atau yg lainnya di header... Ada dua trik untuk memasukkan gambar di header..

Caranya pertama yaitu dengan trik add gadget dan masukkan link di mana Anda mengupload foto anda... supaya foto atau gambar sesuai dengan lebar header maka ada dua trik lagi juga hehehe... yg pertama, anda memang sudah mencocokkan lebar gambar dengan lebar header dengan trik anda mengatur lebar gambarnya dengan software sepeti photoshop, maka setelah selesai diedit di photoshop kemudian diupload semisal ke www.photobucket.com, maka setelah Anda sanggup link Anda meng-upload gambar tadi dan memasukkannya ke add gadget dengan add HTML/Java script, lebar gambar dengan lebar header pun sesuai. Nah trik yg ke dua-nya, kasih script pelengkap setelah script ( <img ) menjadi( <img weight="925" xxxxxxxx ) "xxxxxxx" ialah link lokasi Anda menyimpan gambarnya.



Caranya yg kedua ialah dengan memasukkan link gambar Anda di script CSS-nya, sebagai pola di bawah ini :

/* HEADER
-----------------------------------------------
*/

#HEADER-WRAPPER {
WIDTH:925PX
MARGIN:0 AUTO 10PX
BORDER:1PX SOLID $BORDERCOLOR
BACKGROUND: URL (HTTP://XXXXXXXXXXXXXXXX.GIF ATAU .JPEG)
}

#HEADER-INNER {
BACKGROUND-POSITION: CENTER
MARGIN-LEFT: AUTO
MARGIN-RIGHT: AUTO
}

Gambar di atas bukti jika header sanggup ditambahkan page element..





Pegel juga bikin tutorial-nya, cukup hingga di sini dulu ya, lagipula jika dilanjut nanti browsernya lambat alasannya ialah halamannya penuh ++++++ `Bingung` (saya-nya yg resah hehehe ).... "tidak berpengaruh suatu kepercayaan bila tidak ada pondasi-nya", "basic berguru menciptakan templates ini pondasi Anda untuk sanggup lebih kreatif dalam menciptakan blog". Saya sarankan jika blog Anda mau expresive, Anda juga Musti akil dengan "DESIGN GRAFIS", kuasai mirip "photoshop, corel draw, auto cad, dll".

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: