28 February 2008
Dalam trik kali ini kita akan coba membahas tentang "Bagaimana Caranya Menampilkan Status Offline/Online Yahoo Messenger". Trus fungsinya apa nih? gini, kalo ada misalnya ada penandanya seperti itu kan nanti pengunjung blogmu akan bisa langsung berinteraksi langsung denganmu, nha kalo gitu kan nanti pengunjung blogmu jadi tambah sayang ma kamu :p
Ok Langsung aja, Contohnya akan seperti ini, jika status kamu offline maka gambarnya akan seperti ini :
trus jika kamu online maka iconya akan berubah seperti ini:
Cara buatnya sangat gampang kamu tinggal copy script berikut ini trus kamu pasang di sidebar kamu, udah tahu kan cara pasanganya, itu lho seperti kalo km masang "page element", Masuk ke "Page Element" trus "Add a Gadget --> HTML/Javascript".
Ganti text yang warna merah (paijo) dengan id YM kamu.
perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan akan berbeda-beda.
Piye? gampang to?
Ok Langsung aja, Contohnya akan seperti ini, jika status kamu offline maka gambarnya akan seperti ini :
trus jika kamu online maka iconya akan berubah seperti ini:
Cara buatnya sangat gampang kamu tinggal copy script berikut ini trus kamu pasang di sidebar kamu, udah tahu kan cara pasanganya, itu lho seperti kalo km masang "page element", Masuk ke "Page Element" trus "Add a Gadget --> HTML/Javascript".
<a href="ymsgr:sendIM?paijo"> <img src="http://opi.yahoo.com/online?u=paijo&m=g&t=2&l=us"/>
</a>
Ganti text yang warna merah (paijo) dengan id YM kamu.
perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan akan berbeda-beda.
Piye? gampang to?
25 February 2008
Apa itu menu Dtree (D-Tree) ? itu lho menu yang memiliki struktur seperti pohon, yang punya cabang-cabang itu lho, Seperti kalo kita membuka Windows Explorer. Menu yang seperti gambar dibawah ini atau seperti contoh ini.
Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?
Beginilah cara membuatnya :
1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>
3. Trus Klik Tombol "Save
4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.
berikut ini keteranganya:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:
Ganti text "http://kendhin.890m.com/dtree/trash.gif" dengan alamat gambar kamu. contohnya akan seperti ini :
Nha gampang tho .....
Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?
Beginilah cara membuatnya :
1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>
<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" />
<script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>
3. Trus Klik Tombol "Save
4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>
berikut ini keteranganya:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:
d.add(10,0,’Profile’,’link.html’,’’,’’,’http://kendhin.890m.com/dtree/trash.gif’);
Ganti text "http://kendhin.890m.com/dtree/trash.gif" dengan alamat gambar kamu. contohnya akan seperti ini :
Nha gampang tho .....
21 February 2008
Untuk menuliskan script/kode kedalam artikel blog memang ada tekniknya sendiri, karena jika kita menuliskannya dengan cara yang biasa maka yang akan muncul kemudian di blog tidaklah seperti dengan apa yang kita tuliskan. Misalnya gini, jika kita menuliskan kode <head> dengan cara yang biasa maka hasilnya tidak akan muncul dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML. Jadi untuk menuliskan kode <head>, maka yang seharusnya dituliskan supaya bisa muncul kode tersebut adalah ini <head>. Nah terus bagaimana kalau ada banyak kode yang harus kita posting?
Mau tahu bagaimana caranya menuliskan kode2/script2 tersebut ke dalam blog?
Ada beberapa cara untuk menuliskan kode-kode tersebut kedalam blog, diantaranya yaitu:
Cara Pertama :
- Gunakan software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll.
- Trus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Code. Nha kode-kode dalam area HTML Code tersebut lah yang harus diposting.
Cara Kedua :
- Tuliskan semua kode/script ke dalam notepad
- Kemudian ganti/replace kode-kode berikut
- Udah tahu kan caranya mereplace di notepad? itu lho dengan memilih menu edit --> replace kemudian pada kotak yang muncul masukkan kode yg akan direplace pada kolom "Find what" trus masukkan kode pengantinya pada kolom "Replace with"trus tekan tombol Replace All.
- Nha kalo udah semua baru kamu copy semua kode yang udah direplace all tadi, trus kamu masukkan kedalam postingan kamu.
Cara Ketiga :
- Buka situs ini http://centricle.com/tools/html-entities, trus isikan kode-kode kamu kedalam kotak yang disediakan, nha kalo sudah tekan tombol "Encode", nha maka kamu akan mendapatkan script baru untuk diposting di blog kamu.
Piye? Gampang to? gitu aja kok repot.....
Mau tahu bagaimana caranya menuliskan kode2/script2 tersebut ke dalam blog?
Ada beberapa cara untuk menuliskan kode-kode tersebut kedalam blog, diantaranya yaitu:
Cara Pertama :
- Gunakan software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll.
- Trus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Code. Nha kode-kode dalam area HTML Code tersebut lah yang harus diposting.
Cara Kedua :
- Tuliskan semua kode/script ke dalam notepad
- Kemudian ganti/replace kode-kode berikut
Kode | Kode Pengganti |
< | < |
> | > |
" | " |
- Nha kalo udah semua baru kamu copy semua kode yang udah direplace all tadi, trus kamu masukkan kedalam postingan kamu.
Cara Ketiga :
- Buka situs ini http://centricle.com/tools/html-entities, trus isikan kode-kode kamu kedalam kotak yang disediakan, nha kalo sudah tekan tombol "Encode", nha maka kamu akan mendapatkan script baru untuk diposting di blog kamu.
Piye? Gampang to? gitu aja kok repot.....
18 February 2008
Bagi pengguna blogger tentunya sudah tahu kan kalo kotak komentar yang ada di blogger tidak langsung berada dibawah postingan, tapi harus nge-klik link dulu baru akan muncul pop-up kotak buat ngisi komentar. Nha dulu kita kan pernah mengakali hal ini dengan memakai jasa pihak kedua yaitu dengan menggunakan kotak komentar dari haloscan, tapi ternyata banyak pemakai yang komplain karena hasilnya tidak seperti yang diharapkan mungkin karane tidak sesuai dengan template yang digunakan. Nha ketika aku jalan-jalan di blog orang lain trus aku baca-baca (sebenarnya sih nggak bisa bacanya, lha wong tulisanya pake tulisan campur ama tulisan cina :p ). Aku lihat dibagian bawah ada kotak komentar yang sepertinya asing, trus aku selidiki, akhirnya ketemu deh cara buatnya. Nha bagi yang kemarin gagal makai kotak haloscan mungkin yang ini bisa jadi alternatif. Mau tahu cara buatnya?
Cara buatnya sangat mudah,
1. Login ke blogger, trus pilih "Layout --> Edit HTML", Nha kamu klik link "Download Full Template", untuk membackup template kamu.
2. Trus kamu datangi situs ini intensedebate.com trus daftar disana, cara daftarnya gampang kok. kalo udah daftar trus login ya. Trus masuk ke menu "dashboard"
3. Di sebelah kanan atas ada sebuah tombol biru yang ada tulisannya "add blog", klik tombol tersebut.
4. Trus akan muncul kota untuk mengisikan alamat blog kamu, isi kotak tersebut dengan alamat blogmu trus klik tombol dibawahnya.
5. Kemudian akan muncul pemandangan seperti ini :
6. Pilih yang "Widget (Recomended)" aja biar mudah.
7. Trus dibawahnya kan ada beberapa pilihan untuk "Replace Comment System", Pilih "On post without comments" jika kamu pingin kotaknya muncul dalam postingan yang belum ada komentarnya (komentar-komentar kamu yang sebelumnya masih tetap ada tapi pada postingan yang sudah ada komentarnya kotak komentar ini tidak muncul). jika km pingin semua postingan menggunakan kotak komentar ini maka pilih yang "On all blog post" (semua komentar kamu yang sebelumnya akan hilang).
8. Kalo sudah klik tombol "Complete Installation"
9. Maka kamu akan melihat halaman seperti ini :
10. Klik tombol "ADD WIDGET". Trus langsung jadi deh kotak komentar kamu.
Coba dilihat blog kamu, trus coba pilih salah satu postingan kamu dan lihat dibawahnya, Insya'Allah kamu akan melihat kotak komentar seperti ini :
Oh ya, satu lagi nih kelebihannya, kamu bisa dengan mudah menghapus kotak komentar ini karena ini bebrbentuk widget, caranya seperti biasa kalo kamu menghapus element.
Nah, SELAMAT MENCOBA ..**>...*>>$%##@
Cara buatnya sangat mudah,
1. Login ke blogger, trus pilih "Layout --> Edit HTML", Nha kamu klik link "Download Full Template", untuk membackup template kamu.
2. Trus kamu datangi situs ini intensedebate.com trus daftar disana, cara daftarnya gampang kok. kalo udah daftar trus login ya. Trus masuk ke menu "dashboard"
3. Di sebelah kanan atas ada sebuah tombol biru yang ada tulisannya "add blog", klik tombol tersebut.
4. Trus akan muncul kota untuk mengisikan alamat blog kamu, isi kotak tersebut dengan alamat blogmu trus klik tombol dibawahnya.
5. Kemudian akan muncul pemandangan seperti ini :
6. Pilih yang "Widget (Recomended)" aja biar mudah.
7. Trus dibawahnya kan ada beberapa pilihan untuk "Replace Comment System", Pilih "On post without comments" jika kamu pingin kotaknya muncul dalam postingan yang belum ada komentarnya (komentar-komentar kamu yang sebelumnya masih tetap ada tapi pada postingan yang sudah ada komentarnya kotak komentar ini tidak muncul). jika km pingin semua postingan menggunakan kotak komentar ini maka pilih yang "On all blog post" (semua komentar kamu yang sebelumnya akan hilang).
8. Kalo sudah klik tombol "Complete Installation"
9. Maka kamu akan melihat halaman seperti ini :
10. Klik tombol "ADD WIDGET". Trus langsung jadi deh kotak komentar kamu.
Coba dilihat blog kamu, trus coba pilih salah satu postingan kamu dan lihat dibawahnya, Insya'Allah kamu akan melihat kotak komentar seperti ini :
Oh ya, satu lagi nih kelebihannya, kamu bisa dengan mudah menghapus kotak komentar ini karena ini bebrbentuk widget, caranya seperti biasa kalo kamu menghapus element.
Nah, SELAMAT MENCOBA ..**>...*>>$%##@
14 February 2008
Sebuah Web atau Blog tidak bisa lepas dari yang namanya HTML (Hyper Text Mark up Language) karena HTML inilah yang mendasari sebuah web/blog. Walaupun sekarang kita bisa membuat web/blog hanya dengan klak-klik mouse tapi setidaknya kita harus sedikit mengerti tentang dasar-dasar HTML, ya tho?. Dalam tutorial kali ini kita tidak akan membahas tentang semua dasar-dasar HTML tapi kita akan mempelajari tag-tag atau kode-kode penting yang sering digunakan dalam membangun sebuah web/blog misalnya cara membuat link, menampilkan gambar, mengganti warna font, membuat barus baru dll. Ok marikita mulai pelajaranya :
* CARA MEMASUKKAN GAMBAR
kode :
<img src="http://kendhin.890m.com/banner-trik.gif" border="0" height="17" width="90">
keterangan :
yang warna biru adalah lokasi gambar kamu.
height="17" width="90" adalah ukuran lebar dan tinggi gambar
hasil :
* CARA MEMBUAT LINK
Kode :
<a href="http://trik-tips.blogspot.com" >trik blog </a>
Keterangan :
Text warna biru adalah link yang dituju.
Tulisan "trik blog" adalah tulisan yang ditampilkan.
Jika pingin yang dikasih link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan seperti ini :
<a href="http://trik-tips.blogspot.com" target="_blank"><img src="http://kendhin.890m.com/banner-trik.gif" border="0" height="17" width="90"> </a>
Jika pingin link yang dituju dibuka dalam window baru maka tambahkan kode target="_blank" setelah kode "http://trik-tips.blogspot.com"
Hasil :
trik blog (dibuka pada window yg sama)
(dibuka pada window baru)
* CARA MENGETENGAHKAN TEXT/GAMBAR
Kode :
<center>text</center>
Keterangan :
Ganti tulisan "text" dengan tulisan yana kamu inginkan, tau bisa juga diganti dengan gambar
* CARA MEMBUAT BARIS BARU
Kode :
<br>
Keterangan :
Tambahkan kode tersebut sebelum objek (text/gambar) yang dinginkan
* MEMBUAT HURUF TEBAL, MIRING DAN BERGARIS BAWAH
Kode :
<b>text</b>
<i>text</i>
<u>text</u>
Hasil :
Tebal
Miring
Garis Bawah
* MEMBERI WARNA TEXT
<font color="#FF0000"> text </font>
<font color="red"> text </font>
Keterangan :
Ganti text yang dicetak tebal dengan warna atau kode warna kesukaanmu.
Hasil :
Merah
biru
* KODE-KODE WARNA
Kode2 warna selengkapnya bisa dilihat DISINI
* PENULISAN KARAKTER-KARAKTER KHUSUS
Ada beberapa karakter yang tidak bisa ditulis secara langsung, jika ditulis maka akan hilang atau berubah, jadi untuk menuliskanya harus menggunakan kode-kode tertentu, berikut ini contoh karakter-karakter tersebut :
* CARA MEMASUKKAN GAMBAR
kode :
<img src="http://kendhin.890m.com/banner-trik.gif" border="0" height="17" width="90">
keterangan :
yang warna biru adalah lokasi gambar kamu.
height="17" width="90" adalah ukuran lebar dan tinggi gambar
hasil :
* CARA MEMBUAT LINK
Kode :
<a href="http://trik-tips.blogspot.com" >trik blog </a>
Keterangan :
Text warna biru adalah link yang dituju.
Tulisan "trik blog" adalah tulisan yang ditampilkan.
Jika pingin yang dikasih link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan seperti ini :
<a href="http://trik-tips.blogspot.com" target="_blank"><img src="http://kendhin.890m.com/banner-trik.gif" border="0" height="17" width="90"> </a>
Jika pingin link yang dituju dibuka dalam window baru maka tambahkan kode target="_blank" setelah kode "http://trik-tips.blogspot.com"
Hasil :
trik blog (dibuka pada window yg sama)
(dibuka pada window baru)* CARA MENGETENGAHKAN TEXT/GAMBAR
Kode :
<center>text</center>
Keterangan :
Ganti tulisan "text" dengan tulisan yana kamu inginkan, tau bisa juga diganti dengan gambar
* CARA MEMBUAT BARIS BARU
Kode :
<br>
Keterangan :
Tambahkan kode tersebut sebelum objek (text/gambar) yang dinginkan
* MEMBUAT HURUF TEBAL, MIRING DAN BERGARIS BAWAH
Kode :
<b>text</b>
<i>text</i>
<u>text</u>
Hasil :
Tebal
Miring
Garis Bawah
* MEMBERI WARNA TEXT
<font color="#FF0000"> text </font>
<font color="red"> text </font>
Keterangan :
Ganti text yang dicetak tebal dengan warna atau kode warna kesukaanmu.
Hasil :
Merah
biru
* KODE-KODE WARNA
| Warna | Kode |
| #000000 | |
| #999999 | |
| #FFFFFF | |
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #FFFF00 | |
| #00FFFF | |
| #FF00FF | |
| #9900FF | |
| #FF6600 |
Kode2 warna selengkapnya bisa dilihat DISINI
* PENULISAN KARAKTER-KARAKTER KHUSUS
Ada beberapa karakter yang tidak bisa ditulis secara langsung, jika ditulis maka akan hilang atau berubah, jadi untuk menuliskanya harus menggunakan kode-kode tertentu, berikut ini contoh karakter-karakter tersebut :
Karakter | Kode |
> | > |
< | < |
& | & |
" | " |
(spasi) | |
09 February 2008
Yak akhirnya jadi juga, seperti yang aku janjikan kemarin yaitu "Cara Membuat Template Blogger". Mulai dari mana ya? nnnngg.. :t ohya, tak jelasin dulu deh tentang artikel ini. Gini, dalam trik berikut, kita akan mencoba membuat template yang paling sederhana dan paling mudah. Sebenarnya dalam mebuat template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat template yang paling sederhana, tapi jangan salah walaupun caranya sederhana tapi hasilnya bisa sangat luar biasa, tergantung dari desainernya. Ok deh mulai aja deh ya, kayaknya udah pada nggak sabar nih.
Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.
Tahap Desain
Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:
Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :
background
header
main
footer
8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.
Nha modeng po ra?
Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }
4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :
#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}
6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }
10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:
#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }
kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.
#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }
kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.
#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }
kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }
kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.
12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.
:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......
Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.
Tahap Desain
Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:
Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :
background header main 
footer 8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.
Nha modeng po ra?
Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }
4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :
#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}
6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }
10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:
#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }
kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.
#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }
kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.
#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }
kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }
kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.
12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.
:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......
07 February 2008
Sory yang ini bukan tentang Trik & Tips Blog yang seperti biasanya, tapi ini cuman unek-unek ungkapan kekecewaan terhadap salah satu penyedia layanan webhosting. Gini nih nih ceritanya, aku kan mbangun beberapa website (bukan blog) di webhosting ini (freehostia.com), tapi sekitar seminggu yang lalu semua website tersebut nggak bisa diakses lewat warnet, tapi anehnya bisa dibuka lewat browser Operamini di HP. Awalnya sih aku kira mungkin servernya sedang nggak fit, tapi setelah beberapa hari kok hasilnya masih tetep error. Trus aku coba tanya dan kirim email ke adminya, dan ternyata jawabanya bikin aku kaget banget, gini nih intinya dia bilang gini "IP dalam range negara Indonesia di blockir", :@ aku bener2 kaget dan shock melihat jawabanya :# . Padahal nih aku buat website-website tersebut tidak mudah, burbulan-bulan aku membuatnya, dan beratus-ratus mega ngupload fileku disana, dan tentunya beratus-ratus jam aku habisin waktuku di warnet, data-datanya juga ilang semua, dan semuanya dihancurkan dalam sekejap. Padahal situs-situs itu udah banyak pelangganya dan dah bisa jadi tuyul buat nyari dollar, hiks.hiks.. :c sungguh kejam kau freehostia.com.
Udah ah nangisnya, sekali-kali boleh dong curhat dikit biar kayak blog-blog pada umumnya, nggak cuma ngebahas tentang trik dan tips mlulu. Pokoknya sekarang harus semangat, biarpun harus mulai dari awal lagi.
Udah ah nangisnya, sekali-kali boleh dong curhat dikit biar kayak blog-blog pada umumnya, nggak cuma ngebahas tentang trik dan tips mlulu. Pokoknya sekarang harus semangat, biarpun harus mulai dari awal lagi.