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

Membuat Template Desain Sendiri (Bag. 6)

Selamat bertemu kembali. Sudah tidak sabar ingin segera menggunakan Template Desain Sendiri di blog Anda? Sabar, tinggal beberapa langkah lagi Anda sudah bisa menggunakannya.

Silahkan buka desain template Anda dan copy paste kode berikut:
  1. Untuk bagian Header. Cari kode <div id="header">, lalu ganti kata Judul Blog dan Deskripsi Blog dengan kode berikut:

    <b:section class='header' id='gadgetheader' preferred='yes'>
    <b:widget id='Header1' locked='false' title='JUDUL BLOG ANDA DI SINI (Header)' type='Header'/>
    </b:section>

    Keterangan: Ganti tulisan berwarna kuning dengan judul blog Anda!

    Lihat gambar:

     
  2. Untuk bagian Menu. Cari kode <div id="menu">, lalu ganti kata Menu Kiri dan Search dengan kode berikut:

    <div id="left">
    <a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="Halaman Awal">Home</a>
    <a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="Multimedia">Multimedia</a>
    <a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="Contact">Contact</a>
    <a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="About Me">About Me</a>
    </div>

    Keterangan: Ganti tulisan berwarna kuning dengan alamat URL blog Anda!

    Lihat gambar:


    Yang harus dilakukan selanjutnya adalah mencari kode berikut,

    #menu {
    overflow: hidden;
    width: 928px; /*panjang menu*/
    font-size: 16px; /*ukuran font*/
    letter-spacing: 1px;
    margin:5px 0 5px 0;
    padding:0;
    height:30px;
    background:#ccc;
    text-align: left;
    border: 1px inset;
    }

    Lalu tambahkan kode berikut di bawahnya.

    #menu a, #menu a:visited {
    color: maroon;
    text-decoration: none;
    padding: 10px;
    }
    #menu a:hover {
    color: red;
    text-decoration: none;
    padding: 10px;
    cursor: default;
    }
    #left {
    width: auto;
    float: left;
    margin: 5px 0 0 3px;
    padding: 0;
    }

    Jadi, selengkapnya akan seperti gambar di bawah.

  3. Untuk bagian Postingan. Cari kode <div id="areapost">, lalu ganti kata Judul Postingan, Isi Postingan, Post Footer, Area Komentar dengan kode berikut:

    <b:section class="main" id="main" showaddelement="no">
    <b:widget id="Blog1" locked="true" title="Posting Blog" type="Blog">
    </b:widget>

    Lihat gambar:

  4. Untuk bagian Sidebar. Cari kode <div id="sidebar">, lalu ganti kata Sidebar Left dan Sidebar Right dengan kode berikut:

    <b:section class="sidebar" id="sidebar1" preferred="yes">
    </b:section>

    Lihat gambar:

  5. Selanjutnya, cari kode berikut. Tempatnya paling awal.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    Ganti kode tersebut dengan kode berikut:

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

  6. Kemudian kode <title>Untitled 1</title> ganti dengan kode berikut:

    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

  7. Cari kode berikut:

    <style type="text/css">
    <!--

    Ganti dengan kode di bawah. Silahkan lihat gambar di atas.

    <b:skin><![CDATA[
  8. Kemudian cari kode ini:

    -->
    </style>

    Lalu ganti dengan kode berikut:

    ]]></b:skin>
  9. Selesai.

Selanjutnya adalah Save As template yang Anda buat. Klik FILE kemudian Save As. Isi nama untuk template Anda kemudian ganti Save As Type dengan XML (lihat gambar di bawah).


Sekarang template desain sendiri siap untuk dipakai pada blog Anda.
Baca Lengkap....

Membuat Template Desain Sendiri (Bag. 5)

Selamat berjumpa kembali. Duh, tidak terasa dah Bagian 5 ya! Sebentar lagi akan selesai proses membuat templatenya. Siap untuk menyelesaikan template Anda. Oke!!!

Kita lanjut ke bagian paling bawah sebuah template, yaitu Footer. Langsung saja copy kode berikut dan letakkan di bawah kode Area Sidebar.

/*-----Untuk Area Paling bawah/footer-----*/
#footer {
width: 928px;
margin: 0;
margin-top: 5px;
padding: 0;
font: 12px arial;
text-align: left;
color: #fff;
line-height: 1.2em;
border: 1px solid black;
overflow: hidden;
}

#copyright {
padding: 10px 0 5px 10px;
}
#copyright a{
color: red;
}
#copyright a:hover {
color: yellow;
text-decoration: none;
font-style: oblique;
font-weight: bold;
}
#info {
padding: 0 0 15px 10px;
}

.clear {clear: both;}

Setelah itu, cari Footer di bagian paling bawah, kemudian tambahkan kode <div></div> di depannya.


Hapus kata Footer, lalu pindahkan kode </div> ke bawah kata Info. Supaya lebih jelas, lihat gambar di bawahnya.


Kemudian ganti kata Copyright dan Info dengan kode berikut.

<div id="copyright">2011 © Desain by <a href="ALAMAT BLOG ANDA/" target="_blank">NAMA ANDA</a></div>
<div id="info">SILAHAKAN ISI DI SINI DENGAN KATA-KATA ANDA SENDIRI</div>

Tambahkan kode <br class='clear'/> di atas kode <div id="footer"> tadi, maka akan seperti gambar di bawah hasilnya.


Akhirnya, selesai juga desain templatenya. Oke!!! Gampang kan membuat template sendiri? Kalau ada yang kurang jelas, silahkan tinggalkan komentar. Tahap ini adalah tahap awal saja, jadi belum bisa digunakan pada blog Anda. Tunggu postingan selanjutnya, Membuat Template Desain Sendiri (Bag. 6).
Baca Lengkap....

Membuat Template Desain Sendiri (Bag. 4)

Selamat berjumpa kembali. Masih semangat membuat template blog desain sendiri? Oke!!! Kita lanjut ke tahap berikutnya. Saatnya kita membentuk bagian Area Postingan dan Sidebarnya. Langsung saja menuju TKP.

Silahkan buka kembali aplikasi phpDesign Anda, kemudian buka desain templatenya. Copy kode berikut dan letakkan di bawah kode Menu.

/*-----Untuk Postingan-----*/

#areapost {
Overflow:hidden;
margin-top:5px;
padding:10px;
width:445px;
border:1px solid #000;
float:left;
}

/*-----Untuk Sidebar-----*/

#sidebar {
margin-top:5px;
margin-left: 5px;
padding:10px;
width:430px;
border:1px solid #000;
float:right;
overflow: hidden;
}

Geser kursor ke bawah dan cari Area Post. Seperti biasa, tambahkan kode <div> dan </div> di depan kata tersebut. Perhatikan gambarnya.


Kemudian tambahkan kode id=”areapost” sebelum penutup kode <div>. Lihat gambarnya kalau bingung.


Setelah itu, pindahkan kode </div> dan letakkan di bawah Area Komentar, lalu hapus Area Post. Lihat gambar di bawah.


Untuk Area Post sudah selesai. Sekarang lakukan langkah tadi pada Area Sidebar. Hasilnya seperti gambar di bawah.


Selesai deh. Seperti biasa, klik RUN untuk preview-nya. Oke!!!! Hasilnya sudah mirip template blog bukan?, meskipun baru setengah jadi. Lihat gambar di bawah ya!


Gampang kan? Sudah dulu ya untuk postingan ini (Membuat Template Desain Sendiri Bag. 4). Tunggu postingan selanjutnya. Membuat Template Desain Sendiri Bag. 5.
Baca Lengkap....

Membuat Template Desain Sendiri (Bag. 3)

Selamat bertemu kembali. Sudah siap beraksi? Sekarang kita lanjutkan belajarnya. Dah bagian 3 kan? Kali ini, kita akan membuat bagian Header dan Menunya. Silahkan buka kembali desain template Anda dengan phpDesign.

Silahkan copy kode berikut dan letakkan di bawah kode #kotakblog (lihat gambar di bawahnya):

*/-----Untuk Header-----*/

#header {
padding-top: 15px;
width:930px;
height:150px; /*tinggi area header*/
border:1px solid #000;
background:transparent;
}

*/-----Untuk Menu-----*/

#menu {
overflow: hidden;
width: 100%; /*panjang menu*/
font-size: 16px; /*ukuran font*/
letter-spacing: 1px;
border-bottom: 1px inset;
border-bottom-width: thick;
padding-bottom: 5px;
}


Kalau sudah, tambahkan kode untuk Header dan Menunya. Caranya sama dengan postingan sebelumnya. Silahkan pindahkan kursor ke bawah, tempatnya di bawah kode <body>. Pertama, untuk Header silahkan Anda tambahkan kode seperti ini: <div>. Tekan SPASI setelah tanda (>) lalu akan muncul pilihan. Silahkan pilih kode id=”” lalu pilih Header. Nih, ada gambarnya di bawah supaya tidak bingung.


Setelah itu, pindahkan kode penutup </div> dan letakkan di bawah Deskripsi Blog. Maka hasilnya akan seperti gambar di bawah ini.


Kedua, silahkan lakukan hal yang sama untuk kode Menu. Sudah paham kan? Oke!!! Hasilnya akan seperti gambar di bawah ini.


Seperti biasa, silahkan klik RUN untuk lihat hasilnya. Kira-kira seperti gambar di bawah.


Untuk area Header dan Menu sudah terbentuk kan? Postingan Membuat Template Desain Sendiri (Bag. 3) sudah selesai. Tunggu postingan selanjutnya Membuat Template Desain Sendiri (Bag. 4). Oke!!!
Baca Lengkap....

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....