Ngintip Template Wordpress Tetangga

Sebelum saya memulai tutorial ini saya coba mau tanya, anda pasti sering melihat template yang sering sekali anda idam - idamkan, Rasanya pasti anda pernah. Sama seperti saya, saya juga pernah mengalaminya. Didalam tutorial ini saya akan coba menunjukkan kepada anda, bagaimana cara melihat template orang lain. Saya mohon maaf sebelumnya kepada salah satu web template yang saya gunakan sebagai contoh.


Sepertinya tidak usah lebih lama lagi untuk memulai kisah menyedihkan ini

.( untuk itu saya mohon maaf untuk sebesar-besarnya).
Yang perlu anda siapkan:

1. Pertama yang perlu anda siapkan sebuah browser srigala api (firefox),
2. Lalu sebuah equip (add-ons) untuk srigala api yang namanya Web Developer ( bisa anda download di alamat ini )
3. Yang keempat koneksi internet

Bila kita sudah siap mari kita mulai,
Pertama buka web site o-om, setelah itu bila firefox anda sudah terpasang web devloper carilah menu CSS — View CSS atau anda bisa tekan CTL+SHIFT+C( atau lihat gambar dibawah ini). isana akan muncul css nya o-om, seperti ini

/* Main settings
--------------------------------------
*/
body{background:#ececec url(http://img152.imageshack.us/img152/6128/bgrmp2.gif) repeat-y center; margin:0; padding-top:0px; font:12px verdana,arial,Sans-erif; text-align:center; color:#333}
.updateinfo{display:none}
a:link{ color:#346ba4; text-decoration:none}
a:visited{ color:#800000; text-decoration:none}
a:hover{ color:#56b9ff; text-decoration:underline}
#main .post-body a:link{ color:#346ba4; text-decoration:none}
#main .post-body a:visited{ color:#800000; text-decoration:none}
#main .post-body a:hover{ color:#56b9ff; text-decoration:underline}
a img{ border-width:0}
.post-body img{ margin:5px; border:1px solid #444}
#main-wrapper a:link{ color:#222; text-decoration:none}
#main-wrapper a:visited{ color:#c13a10; text-decoration:none}
#main-wrapper a:hover{ color:#c13a10; text-decoration:underline}
/* Header
--------------------------------------*/
#header-wrapper{ background:#fff; width:900px; height:135px; margin:0; padding:0; text-align:left; border-top:10px solid #fff}
#header{ margin:0; padding:0}
#header h1{ margin:0; padding:0px 0 0 0px; font-size:90%; font-weight:bold; line-height:1.3em; letter-spacing:.1em; font-style:normal; color:#333; display:none}
#header a{ color:#333; text-decoration:none}
#header a:hover{ color:#333; text-decoration:underline}
.descriptionwrapper p{ margin:0; padding:3px 0 0 10px; line-height:1.3em; font-style:normal; font-weight:bold; font-size:90%; letter-spacing:.1em; color:#333; display:none}
.ad-banner{ width:200px; margin:0; padding:7px 0 0 7px; float:left}
.ad-banner2{ width:390px; height:117px; margin:0; padding:7px 0px 0 0; float:right; border-left:4px dotted #c0c0c0;}
#ad-banner2 li{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP1DOIdyWeUABhDvsLzFBCXVOezuTDj4VTccIR8KgeMal2BqsQzNchnwpgm7TxFtK5ca54gpDB_E1yJ2lvTgIwjCHR2Igw-MbMCeBT2Ro3pjHlxjEr-KLFAnlkKCxwGGFGhSHthBZ1-Uk/s400/link_arrow.png") no-repeat 0px .30em; margin:0; padding:0 0 .25em 17px; line-height:1.2em}
#ad-banner2 ul{ list-style:none; margin:0 0 0; padding:7px 20px 0px}
.ad-banner3{ width:780px; margin:0; padding:0px 0 0 70px; float:center}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper{background:#fff; width:900px; margin:0 auto; padding:0; text-align:left; border-right:0px solid #222; border-bottom:0px solid #222; border-top:0px solid #222; border-left:0px solid #222}
#main-wrapper{background:#fff; width:520px; float:left; margin:0px; padding:10px 0 0px 15px; 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{background:#fff; width:330px; float:right; margin:2px; padding-right:12px; 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 */}
.ad-box{ margin:0; padding:17px 0 0; text-align:left}
.sidebar-left{ width:150px; float:left; margin:0; padding:3px 2px 0 0}
.sidebar-right{ width:150px; margin:0; padding:3px; float:right}
.sidebar-bottom{ width:330px; float:right; padding:3px; margin:0; padding-right:0px}
.sidebar-bottom-hide{ width:330px; float:right; padding:3px; margin:0; padding-right:0px;visibility:hidden}
br{ clear:both}
/* Headings
----------------------------------------------- */
#sidebar-wrapper h2{ margin:.6em 0 .6em; padding:0; font-size:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; color:#222; border-bottom:1px dotted #c0c0c0}
/* Headings
----------------------------------------------- */
h2.date-header{ margin:.0em 0 0; padding:0; font-size:80%; color:#777; height:0px; visibility:hidden}
.post{ margin:.5em 0 1em; padding-bottom:1em; padding-right:1em; text-align:justify}
.post h3{ margin:.5em 0; padding:0 0 0; font-size:12px; font-weight:bold; font-style:normal; line-height:20px; color:#333}
.post h3 a, .post h3 a:visited, .post h3 strong{ display:block; font-size:18px; text-decoration:none; font-style:normal; color:#333; font-weight:normal}
.post h3 strong, .post h3 a:hover{ color:#777; text-decoration:underline}
.post{ margin:0 0 .10em; line-height:20px}
.post-body, .post-body p{ margin:0; padding:0; line-height:20px}
.post-footer{ margin:.75em 0 0px; color:#ff7800; letter-spacing:.0em; font-size:90%; line-height:1.3em; border-bottom:1px dotted #B7B7B7}
.post-footer p{ margin:0; padding:0px 0 5px; line-height:1.3em}
.post-body{ margin-top:0}
.comment-link{ margin-left:.6em}
.post img{ margin:0px; padding:0; border:1px dotted #fff}
.post bt{float:left; color:#222; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px}
.post blockquote{ margin:1em 20px; padding-left:30px; padding-right:5px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHxOMt6dv8biQTzPuOQnlaGt2nuxHbmrB20ApeMQbTAWm4Ip9_-v30LMkeEEj89zkeRVTKujVg0T6g5A4YTvNcRosi6XbGv0k4kh4TQLJ1CxQgWKfDEOP1qn6R32dTQ1Lokz7_uKlFkLs/s400/quotes_icon.gif") no-repeat 0 .0em; color:#666; border:1px dotted #ccc}
.post blockquote p{ margin:.75em 0; padding-right:5px; padding-left:5px; border:1px dotted #ccc; background:#F7F7F7}
p.post-footer-line-3{ margin:0 auto; padding:0}
/* Comments
----------------------------------------------- */
#comments h4{ background:#efefef url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2xSFE6pX4hQyP52WIvbyk5BP74otk2KlYlm8Owk4mnKsjSzFPVknr5YqvIF8qeTC0aFC1cwabns_xpWVdDLKRbSk1ckmoqWsT4t-o7ImBju2oL2N2EssWtgtQYa8cuGdNoJYdi5SdYtYZ/s400/icon_comments.png") no-repeat 3px .3em; width:485px; margin:.1em 0; font-size:12pt; font-weight:bold; line-height:1.5em; letter-spacing:.1em; color:#111; padding-left:25px}
#comments-block{ border:1px dotted #ccc; width:510px; margin:1.3em 0 1.5em; line-height:1.6em}
#comments-block .comment-author{ margin:.5em 0; padding-left:25px; background:#FFFFCC url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8VV1YYrJuj8IYZGqucVB3LYY34cFT8xTCsbUvVofvkpKnM9t2Ofm_URfakqj3nVVJIC2inVudk5_wl-g7Zo_LVc6tKy2plQqj2w-GlfP-OiEJuU8t5Z5EiPoDNih_F_r4WEN3UQm4aX3m/s400/icon_comment.gif") no-repeat 3px .3em; color:#111}
#comments-block .comment-body{ margin:.25em 0 0; color:#333}
#comments-block .comment-footer{padding-left:5px; margin:-.25em 0 2em; line-height:1.5em; font-size:7pt; letter-spacing:.1em}
#comments-block .comment-body p{ margin:0 0 .75em; padding-left:5px; background:#f3f3f3}
#comments-block a:link{ color:#c13a10}
.deleted-comment{ font-style:italic; color:gray}
.owner-Body{margin:0 0 .75em; padding:0 0 0 0px; padding-left:5px; background:#DFFFDF}
.owner-Body p{margin:0 0 .2em 0}
#blog-pager-newer-link{ float:left; line-height:1.8em; font-weight:bold}
#blog-pager-older-link{ float:right; line-height:1.8em; font-weight:bold}
#blog-pager{ width:510px; text-align:center; background:#efefef; line-height:1.8em; font-weight:bold; color:white}
.feed-links{ clear:both; line-height:0em; display:none}
/* Sidebar Content
----------------------------------------------- */
#sidebar-wrapper ul{ list-style-type:none}
#sidebar-wrapper p{ padding-left:12px; color:#333}
#sidebar-wrapper{ color:#333; line-height:1.3em}
#sidebar-wrapper ul{ list-style:none; margin:0 0 0; padding:0 0 8px}
#sidebar-wrapper li{margin:0; padding:0 0 .25em 0px; line-height:18px}
#sidebar-wrapper ul li {border-bottom: 1px dotted #B7B7B7}
#sidebar-wrapper .widget, .main .widget{ margin:0 0 0px; padding:0 0 5px}
.sidebar section{ margin:0; padding:0}
.main .Blog{ border-bottom-width:0}
#ArchiveList{ padding-left:0px}
widget-content{}
/* Profile
----------------------------------------------- */
.profile-img{ float:left; margin:3px 7px 1px 0; padding:0px; border:1px solid #ccc;}
.profile-data{ margin:0; letter-spacing:.1em; font-size:90%; font-weight:bold; line-height:1.4em; display:none}
.profile-datablock{ margin:.5em 0 .5em .5em; }
.profile-textblock{ text-align:justify; margin:0.5em; line-height:1.6em}
.profile-link{padding-left:0px; font-weight:bold}
/* Footer
----------------------------------------------- */
#footer-wrapper{ height:0px; clear:both; margin:0 auto; text-align:left; padding:1px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0;padding-top:10px}
.credits{ margin:0; width:900px; padding:0px 0px 0px; font-size:95%}
body#layout #header{ margin-left:0px; margin-right:0px}
/* bottom
---------------------------- */
#bottom{ background:#444 url(http://img152.imageshack.us/img152/8805/buttommenubgraq8.gif) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff;}
#bottom a:link{color:#fff; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:underline}
#bottom h2{padding:20px 0 2px 0; margin:0 0 10px 0; font-size:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#FF9933}
#bottom ul li{list-style-type:none; border-bottom:0px solid #626200; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP1DOIdyWeUABhDvsLzFBCXVOezuTDj4VTccIR8KgeMal2BqsQzNchnwpgm7TxFtK5ca54gpDB_E1yJ2lvTgIwjCHR2Igw-MbMCeBT2Ro3pjHlxjEr-KLFAnlkKCxwGGFGhSHthBZ1-Uk/s400/link_arrow.png") no-repeat 0px .30em; padding-left:17px; margin-top:2px}
#left-bottom{width:210px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:330px; float:left; padding:0 5px 0 28px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
/*-- (Menu/Nav) --*/
#nav{background:#fff url(http://img244.imageshack.us/img244/2094/topmenubgrhy3.gif) no-repeat; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:660px; padding-left:6px}
#nav-right{float:right; display:inline; width:200px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold;}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}
/*-- (Search) --*/
#search{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCqS2HcSg0LCIFsuCwouOHSrgbekk1t8u8if4QjJjbZAncYCbI9scX8HFrfbga3eTm0u3dby9FemQp3TSrbdAW6WR6Qe_UmejX26FioCgl4YQhNKbP_G9QLhzlxd1dvJwCsgCzCqZBv7Em/s400/search.gif) 6px 0px no-repeat; border:1px solid #333; float:right; height:23px; margin:0 15px 0 0; width:180px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 30px; width:140px}


Sekarang kita bisa lakukan copy paste pada code yang dimulai dari main sampai search saja. Jadi bukan asal copy paste. Setelah itu jadi deh template yang sesuai dengan target kita.

Good Luck

Baca Selanjutnya....

Membuat Animasi Perubahan Teks

Akhirnya saya kembali dengan posting cara membuat perubahan teks. Anda semuanya bisa menggunakan macromedia flash 8 atau macromedia MX .sebelumnya sudah punya Flash blum ??.. klo belum saran saia jangan donlod dehh.. laaamaaa.. mending cari yang punya ajjah hee..



Saia akan mencoba membuat animasi perubahan teks.. dengan contoh teks ”TUNING ME” dan ”http://atozblack.blogspot.com” .. untuk membuatnya ikuti langkah dibawah ini:

1. buka macromedia flash dulu sob.. hee.. lalu...........
2. pada layer 1, ketikan teks ”TUNING ME” dengan properti font sesuai keinginan sobat. (gambar 1)
3. klik frame 20 kemudian pilihlah perintah Insert KeyFrame untuk menyisipkan KeyFrame (gambar 2)
4. pastikan frame yang tersorot adalah frame 20, kemudian ubahlah ”TUNING ME” menjadi ”http://atozblack.blogspot.com” (gambar 3)
5. klik Frame 20 untuk menyorot nya, kemudian pilihlah perintah Modify > Break Apart (lakukan 2x) (gambar 4)
6. klik frame 1 untuk memilih teks ”TUNING ME” kemudian lakukan seperti no 5, yaitu pilih menu Modify > Break Apart (lakukan 2x juga) (gambar 5)
7. klik frame diantara 1 sampai 20, sebagai contoh klik frame 10. kemudian pada jendela property Inspector pilihlah opsi Shape pada kotak Tween. (gambar 6)
8. posisikan playhead di frame 1 (klik frame 1). Kemudian tekan Enter untuk memulai animasi.

Semoga berhasil yah teman - teman.

Baca Selanjutnya....

Membuat Animasi Type Writer

Sekarang saya akan menjelaskan mengenai pembuatan Animasi Type Writer akan menampilkan teks seolah-olah sedang diketikan di monitor. Seperti apa sieh bentuk wujudnya??

Okeh.. sobat2 semuanya sudah siap.. Disini jg saia akan beberkan caranya..
Yap.. langkah2nya sBb:

1. buatlah new movie.. file > New. Ukuran sesuaikan dengan default yang macromedia berikan.

2. pada layer 1, ketikan ”TMHOC” dengan property font sesuai keinginan sobat.

3. klik kanan frame 30 kemudian pilihlah perintah Insert KeyFrame.

4. pada panel Timeline, tambahkan layer baru dengan klik tombol New Layer, dan berikan nama Kursor untuk layer tersebut.

5. pilihlah tool Lines kemudian buatlah objek garis sebagai kursor didalam animasi,posisikan objek garis tersebut sebelum teks ”TMHOC”

6. pada layer kursor, klik kanan frame 30 kemudian pilihlah Insert KeyFrame. Setelah itu geser posisi objek kursor tadi sehingga berasa di belakang teks ”TMHOC”

7. pada layer kursor, klik kanan salah satu frame antar 1 dan 30 kemudian pada jendela Property Inspector pilihlah Opsi Shape pada kotak Tween.

8. pada panel TimeLine, tambahkan layer baru dan beri nama tutup. Aturlah urutan layer sehingga.. layer tutup ada ditengah (dibawah kursor dan diatas layer 1)

9. pilihlah tool Rectangle kemudian tentukan warna stroke adalah None (Tanpa warna) dan warna Fill adalah putih (sesuaikan dengan background). Buatlah objek persegiempat sehingga menutupi teks “TMHOC”.

10. pada layer tutup, klik frame 30 kemudian klik kanan dan pilihlah Insert KeyFrame.

11. pastikan objek segiempat pada frame 30 dalam keadaan tepilih. Dan gunakan tool Free Transform untuk melakukan Transformasi ukuran pada objek tersebut. Lakukan transformasi dengan megecilkan lebar objek dan posisikan berada sesudah teks “TMHOC”

12. pada layer tutup, klik salah satu frame diantara 1 dan 30 kemudian pada jendela property Inspector pilihlah opsi shape pada kotak tween.

13. langkah selanjutnya adalah membuat efek kedip pada objek kursor. Untuk itu, klik frame 30 pada layer kursor kemudian klik menú edit > copy

14. masih pada layer kursor, klik frame 31 kemudian pilihlah perintah Insert Blank Keyframe.

15. lanjutkan dengan mengklik kanan frame 32 kemudian klik pilihlah perintah Insert Blank Keyframe.

16. pastikan frame 32 pada layer kursor dalam keadaan tersorot, kemudian klik menu edit > paste in Place untuk meletakan hasil penggandaan objek kursor.

17. untuk memudahkan pembuatan animasi kedip pada kursor, pada layer kursor sorot frame 31 dan 32 kemudian pilihlah pilihan menu edit > copy frames.

18. klik frame 33 dan klik perintah edit > Paste frames untuk meletakan hasil penggandaan frame. Sobat bisa mengulangi langkah ini sebanyak sobat mau.

19. untuk menampilkan teks ”TMHOC” sampai akhir animasi, pada layer 1 klik kanan frame terakhir di dalam keseluruhan animasi, kemudian pilihlah perintah Insert Frame.

20. posisikan pLayhead pada frame 1 kemudian tekan tombol enter pada keyboard untuk memulai animasi.





Okeh sob.. selamat berkreasi..

Baca Selanjutnya....

Cara Memback-up Template Blogger

Halo kawan - kawan semua. seperti yang sudah saya janjikan sebelumnya, saya akan memberi tahu bagaimana memback-up data template kita. Untuk menjaga keamanan tentunya. Cara ini sangat berguna. dimana kita akan merubah bagian - bagian template kita.
Berikut adalah caraa - caranya

Pertama-tama tentu kamu harus Login dulu dong, trus Pilih Layout -->> Edit HTML. Nha disitu kan ada gini before editing ypoour template, you may want to save a copy of it. Download Full Template> , klik yang ada tulisan Download Full Template terus simpan file tersebut, biasanya file dalam format xml.

Nha kalo mo memasang template baru atau template yang sudah diedit ato mo mengembalikan template ke sebulmnya kamu tinggal klik tombol Upload yang ada dibawahnya. OK BOZZ.. Good Luck Ya.....untuk mencobanya.

Baca Selanjutnya....

Cara Bikin Template Sederhana

Akhirnya kita dapat membuat template sederhana hanya dalam beberapa langkah, tentu template sederhana ini dibuat hanya dengan menampilkan beberapa point tertentu.Karena, 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. Seperti sebelumnya saya sudah menjelaskan mengenai Implementasi HTML + CSS. Sepertinya sudah pada tidak sabar, sebaiknya saya mulai sekarang.

Sebenarnya cara paling mudah adalah dengan mendownload Template. hehe, tapi kurang nikmat kalau tidak di edit - edit sama kita. betul ga. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu, kalu tidak di backup aja. dengan mendownload template nya terlebih dahulu yang sudah disediakan oleh blogger fasilitasnya, caranya ada disini.


1. Tahap Desain

Cara pertama yang harus dilakukan adalah dengan melakukan tahap desain. Yah bikin desainnya harus kamu sendiri lah, masa diajarin. Jadi kamu harus membuat keempat komponen terlebih dahulu. 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 sesuai keinginan kamu
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.Nanti tiap bagiannya terdiri seperti yang dibawah ini :

background
header
main
footer

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Udah ngerti belum?(Itu udah pakai bahasa manusia, yang standar -standar aja)

Sekarang kita memasuki ke tahap penyusunan di blogger.Maksud saya implementasi didalam blogger. Dengan cara melakukan edit pada halaman HTML
1. Kembali ke blogger dan ke menu "Edit HTML".
2. 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 gambar 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.
14. Oh iyah kalau hancur jangan salahin gw, kan desainnya kamu yang buat


OK SELAMAT BERJUANG......yah teman - teman

Baca Selanjutnya....

Cara Menghilangkan Navbar (Navigation Bar)

Menghilangkan Navbar (Perhatikan TOS)

Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.

Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena itu, kadang para blogger menghapus NavBar tersebut. Pertanyaannya adalah: Apa tidak melanggar Term of Service (TOS) dari Blogger.com?
Sebenarnya ada, tapi kenapa tidak untuk dicoba. Karena aturan tersebut juga belum jelas. Dan banyak para blogger yang menghilangkan navigasinya

Ada beberapa Template yang sudah tidak menggunakan Navigation Bar, Namun ada juga yang ada didalamnya masih memiliki Navbar. Jika kamu memilikinya, Ini merupakan langkah - langkahnya :

1. Kamu harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut ke dalam tag head

#navbar-iframe {
display: none !important;
}

contohnya sebagai berikut :
-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Kemudian simpan.

Inget di Save yah. Oh iya, kalau di tegur dari pihak blogger.com kabar - kabarin yah ... hehe...

Baca Selanjutnya....