Gratis berlangganan artikel Zykry via mail, join sekarang!

Sunday, March 28, 2010

Cara membuat template sendiri

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 terdiri dari : background header main footer
  8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya.
Ok kita mulai:


  • Kembali ke blogger dan ke menu "Edit HTML".
  • Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
  • Kemudian Cari kode seperti ini:
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('url kamu') repeat-x top left; }



  • Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
  • Cari kode seperti ini :
#center {background: #ffffff url('url kamu') repeat-y top center;}
  • Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
  • Cari kode seperti ini:
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('url kamu') no-repeat top center; }


  • Ganti text yang dicetak tebal dengan gambar header.
  • Cari kode seperti ini:
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('url kamu') repeat-y top center; }


  • Ganti text yang dicetak tebal dengan gambara foter.
  • 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('url kamu') 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('url kamu') no-repeat top center; }
  • kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.
  • Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
  • Kalo sudah di Save.:
  • Done... 
Thx to kendhin..


Related Post:

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di zykry-trick.blogspot.com
Thx to :
Jangan lupa add facebook Zykry Dark
print this page Print this page
Cara membuat template sendiriSocialTwist Tell-a-Friend

Comments :

15 comments to “Cara membuat template sendiri”

Anonymous said...
on 

saya simpan dulu artikelnya..

annisavaniasafitri said...
on 

Aaah..loem ngerti..Hehe..Tp tetep b'mnfaat kok!!

Dealer pulsa murah said...
on 

Terima kasih banyak infonya...

Jendela Informasi said...
on 

good

Nikmaya John said...
on 

Keren sob tipsnya,,, thanks..

Ian File said...
on 

koq kode-kodenya pada ng ada ya setelah saya cari. jadi bingung nih

Tukang Catok said...
on 

gan cara motong2nya gimana yah..? sorry nyubi nih... thanks sharenya tolong dibantu yah gan...

Blogger Sorong said...
on 

kalo saya ga bisa coding masgur. pake yang ada saja + edit dikit-dikit hehehe :D

tempat aborsi said...
on 

thank's atas infonya

Chelsy Kho said...
on 

Numpang Promo ya

PAPADOMINO agen poker online terpercaya
judi poker
poker online terpecaya
bandar poker
domino online
agen poker online
poker online

Chelsy Kho said...
on 

Numpang Promo ya

PAPADOMINO agen poker online terpercaya
judi poker
bandar poker
domino online
agen poker online
poker online
capsa susun
poker online terpecaya

Unknown said...
on 

Hai..
kita dari agen poker online papadomino mau memberitahukan bahwa sekarang sedang ada promo bonus yaitu :
* Bonus Mingguan : 0.5% (setiap senin)
* Bonus Referral : 20% (seumur hidup)

Hanya dengan minimal depo & wd Rp 20.000,-
Proses depo / wd cepat
100% PLAYER VS PLAYER Tanpa ROBOT
link pendaftaran : http://papadomino.com/?ref=jesica6413
Untuk info lebih lanjut silahkan hubungi : 2B4A514B

* Buat yang suka bermain togel silahkan kunjungi http://www.papa4d2.com/ref.php?ref=jesica
;)
judi poker
bandar poker
domino online
agen poker online
poker online
capsa susun
poker online terpecaya

Lovelya Wijaya said...
on 

Terimakasih Atas Infonya Gan.. Sangat Membantu Dan Di Tunggu Artikel Berikutnya Yah ^_^
AGEN PIALA DUNIA
BANDAR BOLA
JUDI ONLINE
BACCARAT ONLINE
PARLAY 2 TIM

dominoqq said...
on 

Selamat datang di intanqq

Ayo bergabung bersama kami, tersedia 7 permainan dalam 1 ID:
- Sakong (New Game)
- Bandar Poker (New Game)
- BandarQ (Hot Game)
- Poker
- Domino
- Capsa Online
- AduQ

Apa kelebihan bermain di intanqq? Berikut kelebihannya:
- BONUS TURNOVER 0.3% SETIAP HARI
- BONUS XTRA TURNOVER SETIAP MINGGUNYA
- BONUS REFERAL 10% +10% SEUMUR HIDUP!!
- MIN DEPO IDR 15.000 dan Proses super cepat 1 menit.
- Bisa dimainkan di Smartphone Versi Android dan Iphone.
- Win rate 98%
- No robot
- Fair play 100% player vs player

Tunggu apalagi? Ayo segera bergabung sebelum ketinggalan promonya :)

bandarq
dominoqq
domino99 online terpercaya
Domino Qiu Qiu
dominoqq

Blogger said...
on 

BlueHost is definitely the best hosting company for any hosting plans you might require.


Apa pendapat anda?

No spam and no porn yaw!!

Widget By Devils Workshop

Guest Book

Iklan

Pasang iklan anda di Zykry-trick hanya Rp.15.000 /bulan Hubungi : 087 823 177 355 - 085 759 277 896 Facebook : Zykry@programmer.net
 
twitter

Tukeran Link

Tips Dan Trick Blogging

U follow I follow

Statistik


free counters
broadband speed test
Current Events & News Blogs - Blog Rankings Blog Directory
Internet Blogs Web Design & CSS (Graphics) - TOP.ORG
Blogging Blogs - Blog Catalog Blog Directory Online Marketing - OnToplist.com
Web design blogs
The Republic of Indonesian Blogger | Garuda di Dadaku
Top 10 Award