Sabtu, 13 Februari 2010

Cara Membuat Template Blogger

Template yang disediakan Blogger lewat menu Tata Letak > Pilih Template Baru hanya terdiri dari (kalau nggak salah) 38 jenis template. Dengan begini, template anda juga bisa sama dengan template blog lain. Anda bisa sih, memakai template gratisan yang tersebar di dunia ayam maya. Tetapi juga bisa saja template blog anda sama dengan template blog yang lainnya. Nah, solusinya, anda bisa membuat template blog sendiri. Sulitkah? Oh, tentu saja tidak, bahkan sangat menyenangkan apabila anda menikmati pekerjaan membuat template ini. Anda hanya perlu pengetahuan tentang HTML, CSS, dan bahasa XML Blogger.

Pertama-tama, anda bisa membuat gambarnya terlebih dahulu. Buatlah gambar untuk background body, header, kolom posting, dan kolom sidebar. Untuk background body, bikinnya bisa kecil-kecil aja (sekitar 200 x 200). Karena nanti backgroundnya akan diulang-ulang (repeat). Untuk header, anda bisa buat lebar (lebarnya misalnya 660 x 100, karena akan menggunakan kode: repeat-y), atau buat besar (;ebarnya sekitar 660 x 300, karena akan menggunakan kode no-repeat). Untuk kolom main dan sidebar, bikinlah gambar yang lebar (misalnya untuk main 410 x 50. 400 kesamping, 10 kebawah. Dan untuk sidebar misalnya 200x50). Karena gambar untuk kolom main akan diulang-ulang ke bawah (repeat-y). Untuk kolom footer anda bisa menggunakan gambar ataupun warna. Apabila menggunakan gambar, maka buatlah gambar yang lebar juga (karena akan menggunakan kode repeat-y).

Lalu hitunglah lebar antara main dan sidebar. Lebar outer wrapper yang ideal adalah:
main wrapper + sidebar wrapper + 20
Misal:

Misal main wrapper adalah 450 px. dan sidebar wrapper=-nya adalah 250 px. Maka lebar main wrapper yang ideal adalah: 450 + 250 + 20 = 720 px.

Kalau sudah, anda bisa mengupload gambar-gambar tersebut ke image hosting. Lalu, buatlah blog baru dengan template Minima Putih. Lalu lakukan langkah-langkah berikut.

1. Tujulah Tata Letak > Edit HTML.

2. Cari kode:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
3. Ganti kode berikut sehingga menjadi:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

}
Ganti URLGAMBARBACKGROUND dengan URL gambar anda. Kode repeat disampingnya berfungsi untuk mengulang background secara horizontal dan vertikal.

4. Cari kode berikut:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
5. Ganti sehingga menjadi seperti ini:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background:url(URLGAMBARHEADER) repeat-y;
}
Ganti tulisan URLGAMBARHEADER dengan URL gambar header anda. Lalu ganti juga tulisan repeat-y dengan no-repeat apabila anda ingin menggunakan gambar yang besar. Jika anda ingin membuat gambar yang besar, tambahkanlah kode center supaya backgroundnya terletak ditengah-tengah. Jadi seperti ini.
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background:url(URLGAMBARHEADER) no-repeat center;
}
6. Cari kode:
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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: right;
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 */
}
Ubah kodenya menjadi seperti ini.
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
background:url(URLGAMBARMAINWRAPPER) repeat-y;
}
#sidebar-wrapper {
width: 220px;
float: right;
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 */
background:url(URLGAMBARSIDEBARWRAPPER) repeat-y;
}
Ganti:
  • 660px dengan lebar outer wrapper ideal
  • 410px dengan lebar gambar main wrapper
  • 220px dengan lebar gambar sidebar wrapper
  • URLGAMBARMAINWRAPPER dengan URL gambar main wrapper.
  • URLGAMBARSIDEBARWRAPPER dengan URL gambar sidebar wrapper.

7. Cari kode:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Ubah:

a. Untuk yang menggunakan warna, ubah dengan:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background:WARNAYANGDIINGINKAN;
}
Ganti 660px dengan lebar ideal outer wrapper. Ganti juga WARNAYANGDIINGINKAN dengan kode hex dari warna yang diinginkan.

b. Untuk yang menggunakan gambar, ubah menjadi:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background:url(URLGAMBARFOOTER) repeat-y;
}
Ganti URLGAMBARFOOTER dengan URL gambar footer yang diinginkan.

9. Lalu simpan.

Sebenarnya sih, tidak harus begitu juga... Anda bisa menggunakan kreatifitas anda. Misalnya membuat kolom menjadi 3 kolom, atau menambah hiasan lainnya. Pokoknya, sesuai kreatifitas anda...

Selamat mencoba, semoga berhasil, dan semoga artikel ini bermanfaat.


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



16 komentar:

dogan cengkir mengatakan...

waw makasih sob,, perlu bnayk belajar ni,,, sukses ya sob,,,

Oemar mengatakan...

Wah..banyak juga nieh.. hehe.. gak pernah mikir

kakve_santi mengatakan...

mantap niih tutorialnya...!

yang angka 20 itu mau bikin padding to..?

hydrogen coil mengatakan...

wah sayang harga e-booknya agak mahal ya.. kebiasaan pake yang gratisan nih soalnya… jadi maluuu..

Hawaii Drug Rehab mengatakan...

Fussy Post! You had a massive occurrence.

Mine Panama mengatakan...

nice infonya sob, salam kenal dari q & jgn lupa mampir juga ya

risang: hybrid car owner mengatakan...

satu lagi nih yang mantab, yang ditemuin di blog ini.......ijin copas bos....

Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template mengatakan...

Siip...

cosmeticdentistryguide.co.uk mengatakan...

Very excellent snap of the child you have taken.I hope it will help you a guide for other.The photo is really a mixture of some living and non living things which look so gorgeous.Thanks.I wait your feed back.

.: dunia TI :. mengatakan...

coba ah. tx tutorialnya

Blogger Templates Colorizetemplates.com mengatakan...

lebih asyik membuat sendiri nich drpd download yg sudah jadi.

zeekerz mengatakan...

wah iofonya kren.. Hehe dan membantu skli..
Izin share my blog bos NETWORKER
Trimksh.

FARZANA WUSS ! mengatakan...

skarang udh di mudahkan dg brbagai software

Damry mengatakan...

Sekarang lebih enak pakai template baru yang disediakan oleh Blogger. Gampang makainya dan blog tampak lebih smooth dan cool.

Cara Menggunakan Template Baru Blogger

Flame Champion mengatakan...

mantab. . .

penerjemah ijazah mengatakan...

makasih gan semoga bermanfaat ane baru buat blog 5 menit yang lalu tapi bingu apa yang mau dilakukan

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.