Tampilkan postingan dengan label Tutorial Template. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Template. Tampilkan semua postingan

Membuat Template Desain Sendiri (Bag. 2)

Selamat bertemu kembali. Kita lanjutkan membuat template sendiri. Masih bersemangat dan fit kan hari ini? Oke!!! Kita lanjutkan ke tahap selanjutnya. Silahkan buka kembali desain template yang sudat Anda buat.

Setelah itu, silahkan arahkan kursor Anda diantara kode </head> dan <body>. Pada menu phpDesign, klik CSS lalu klik Style Block. Kalau bingung lihat saja gambarnya.


Akan muncul kode Style CSS seperti gambar berikut:


Silahkan copy kode berikut di antara Style CSS tersebut:

body {
padding:0;
background: #cccccc;
font-family:'Georgia', Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
margin:auto;
}

#kotakblog {
margin:5px;
padding:3px;
width:930px;
background: #804040;
background-attachment: fixed;
margin:0 auto;
}

Jadi, akan seperti ini:


Langkah selanjutnya adalah membuat kode untuk Kotak Blog. Arahkan kursor ke bawah dan cari Kotak Blog yang telah Anda buat. Tulis kode ini: <div>. Tekan spasi sebelum kode (>), akan muncul seperti gambar berikut:


Klik ganda id=””, akan muncul nama kotakblog. Langsung klik ganda saja dan hapus tulisan Kotak Blog setelah kodenya.


Tambahkan kode penutup </div> di atas kode </body>. Tempatnya paling bawah. Kurang jelas? lihat gambarnya.


Untuk tahap ini selesai. Kalau ingin lihat hasilnya, klik RUN pada menu bar. Hasilnya akan seperti gambar di bawah.


Sudah terbentuk kan templatenya? Sekian dulu yah, tunggu postingan lanjutan Membuat Template Desain Sendiri (Bag. 3).
Baca Lengkap....

Membuat Template Desain Sendiri (Bag. 1)

Selamat berjumpa kembali. Postingan ini adalah lanjutan dari postingan sebelumnya. Seperti yang saya jelaskan pada postingan kemarin, membuat template bisa memakai aplikasi seperti phpDesign, Kit HTML, Notepad, dan masih banyak yang lain. Sekarang kita akan memulai membuat template sendiri dengan menggunakan software phpDesign versi 7. Silahkan download di sini lalu instal dulu kalau belum punya, hehehe...!!!

Ok! Kita langsung saja mulai. Silahkan buka aplikasi phpDesign Anda, kemudian klik ganda tulisan HTML. Lihat gambar di bawah.



Kemudian akan tebuka file baru berisi kode HTML template secara garis besar (Lihat gambar kedua di atas). Di sana kita akan memulai membuat desainnya. Yang pertama harus dilakukan adalah membuat susunan/gambaran untuk template yang akan dibuat diantara kode <body> dan </body> (lihat gambar di bawah). Susunannya seperti di bawah ini.

Kotak Blog

Content

Header
Judul Blog
Deskripsi Blog

Menu
Menukiri
Search

Area Post
Judul Postingan
Isi Postingan
Post Footer
Area Komentar

Area Sidebar
Sidebar Left
Sidebar Right

Footer
Copyright
Info


Sampai di sini dulu Membuat Template Desain Sendiri (Bag. 1). Tunggu postingan selanjutnya Membuat Template Desain Sendiri (Bag. 2).

Selamat belajar dan jangan lupa komentarnya ya!!!
Baca Lengkap....

Membuat Template Blog Desain Sendiri

Salam berjumpa kembali. Lama juga tidak buat postingan gara-gara kurang sehat...... heehehehehe, jadi curhat nih!

Oke. Postingan kali ini akan membahasa tentang template. Pasti ada kebanggaan tersendiri jika template yang kita gunakan adalah template hasil desain kita sendiri. Saya membuat postingan ini setelah lama mempelajari kode-kode HTML. Kalau masih kurang paham tentang kode HTML, silahkan klik baca postingan saya di sini.

Berbekal sedikit pengetahuan tentang kode HTML tersebut, saya mencoba membuat desain template sendiri. Setelah mencobanya dan belajar secara otodidak selama kurang lebih tiga bulan, akhirnya saya berhasil membuat desain template sendiri. Demonya bisa Anda lihat di sini dan di sini.

Tenyata membuat desain template sendiri sangatlah mudah dan tidak sesulit ketika kita hanya duduk membayangkannya. Asal kita sudah tahu dan memahami kode-kode dasar dari HTML itu. Ada beberapa program yang bisa Anda gunakan seperti phpDesign, Kit HTML, Notepad, dan masih banyak lagi!

Saya akan mencoba berbagi sedikit ilmu yang saya dapat dari hasil begadang selama kurung waktu yang saya sebutkan tadi. Hehehehehehehe..........! Mau belajar? Silahkan tunggu postingan tentang proses Membuat Template Desain Sendiri (Bag. 1).

Selamat belajar dan jangan lupa komentarnya ya!!!
Baca Lengkap....
Langganan: Postingan (Atom)