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

Kado Terindah Sebuah Doa

"Mengapa tidak ada yang istimewa kali ini? Seharusnya ada yang menemanimu di saat seperti ini. Tapi mengapa malam ini kau sendiri saja? Kau kan ulang tahun. Benar-benar malam minggu yang kelabu."
***
Kalimat itu tertuju padaku ketika sedang chatting dengan salah seorang teman facebook di sebuah warkop dekat tempat tinggalku. Kebetulan saja karena hari ini adalah hari ulang tahunku yang bertepatan dengan malam minggu. Dua april. Saat ini, aku seharusnya sedang tersenyum bahagia bersama sang kekasih apalagi di malam minggu. Sendiri tanpa ditemani sang kekasih. Memang kelabu. Menurutnya, aku tak seharusnya sendiri di sana malam itu.

Kata-katanya itu langsung saja membuatku tertawa kecil. Aku hanya membalasnya dengan senyum. Dia tak tahu jika di hari ulang tahun kali ini, aku sangat bahagia meskipun orang yang kusayangi tak bersamaku di sini. Menemaniku tepat di tanggal kelahiranku. Dia tak pernah tahu jika semalam telah kudengar sebuah doa yang bagiku adalah kado paling istimewa yang pernah diberikannya padaku sejak aku menempatkan namanya dalam hatiku. Doa yang menghempas segala kekusutan hatiku. Meskipun, beberapa saat sebelumnya dia membuatku jengkel dan nyaris berpura-pura lupa jika esok ada hari yang istimewa.

Bagaimana tidak. Semalam sebelumnya, hampir sejam aku mencoba menghubunginya, tapi ponselnya sedang tidak aktif. Amarahku mulai memenuhi kepalaku. Kucoba menahan segala amarah itu. "Mungkin baterei HP-nya sedang error. Atau mungkin juga jaringan yang sedang tidak bersahabat. Lagipula, saat ini cuaca lagi tidak normal". Aku memikirkan beberapa kemungkinan. Kutepis semua pikiran yang tak semestinya kupikirkan. Apalagi saat-saat seperti ini. Kusibukkan diri dengan teman-teman serumah. Minum teh sambil makan roti tawar dan susu cokelat.

Namun, itupun tak bertahan lama. Kembali kucoba menghubunginya dengan sebuah harapan besar. Aku ingin menunggu jam menunjuk pukul 24.00 bersamanya meski hanya dengan suara. Keyakinanku benar. Handphonenya aktif. Pesan singkat yang sejak tadi kukirim telah sampai. Aku mengiriminya pesan sampai empat kali.
"Tuut... tuut....", bunyi telepon berdering. Tak lama kemudian terdengarlah suara sang kekasih yang telah lama kutunggu.
"Halo!", katanya di seberang sana.
"Halo!", jawabku. Belum sempat aku menanyakan mengapa HP-nya baru diaktifkan, dia langsung berucap dengan nada yang agak tergesa-gesa.
"Tunggu sebentar, saya lagi ada kerjaan. Sebentar saya SMS".

Karena jengkel, tanpa berkata-kata lagi aku langsung mengakhiri panggilan ke nomornya. Kejengkelanku bukannya hilang tapi malah semakin memuncak. Aku benar-benar emosi. Sempat terlintas dalam pikiranku untuk menonaktifkan HP milikku supaya tidak ada yang menghubungiku malam itu, termasuk dia. Niat itu kuurungkan karena beberapa pertimbangan. Aku menunggu beberapa saat hingga jam sedikit lagi menunjuk angka 12. Belum juga ada SMS darinya. "Apakah dia sudah tidur?"

Sementara hujan bergitu deras mengguyur kota malam ini. Dingin mulai menusuk ke dalam tubuhku. Aku kedinginan. Apalagi tadi dari kos-an teman di sebelah lorong dan tidak memakai jaket. Benar-benar malam yang menjengkelkan.

Kurebahkan tubuhku dengan membungkusnya dengan sebuah selimut berwarna putih agar tidak kedinginan. Aku kembali melirik jam sambil menunggu SMS darinya. "Mengapa sampai jam segini belum juga ada SMS-nya?", kataku dalam hati. Kucoba agar mataku yang sudah merayu untuk dipejamkan tetap terbuka. Masih dengan perasaan jengkel yang bercampur dengan rasa dingin dalam tubuhku, tiba-tiba HP-ku berdering.

Karena aku yakin jika dia yang menghubungiku, dengan secepat kilat kuraih HP-ku. Terdengar lagi suaranya yang sudah sangat aku kenali. Belum sempat lagi aku berucap apa-apa, dia mengucapkan selamat hari ulang tahun padaku.

"Happy birthday meinlieben. Semoga tahun ini bisa mendapat pekerjaan. Bisa sukses dan bisa membahagiakan orang tua. Satu lagi, semoga kasih sayang kakak padaku bertambah dan bisa membimbingku ke arah yang lebih baik di jalan Allah. Amin."

Dalam sekejap perasaan jengkel di tubuhku sirna mendengar perkataannya. Semuanya berubah menjadi sebuah senyum. Keteduhan memenuhi jiwaku yang dipenuhi emosi. Redam. Segala kegundahan yang kurasakan raib sudah. Aku sangat gembira dan bahagia karena harapan yang hampir hilang terwujud sudah. Dialah orang pertama yang memberikan ucapan itu padaku. Orang yang selalu membuatku tenang dengan senyumnya. Yang bisa mengubah lautan amarahku menjadi salju. Sosok yang sangat aku sayangi.
"Terima kasih, ade’!", jawabku dengan senyum bahagia.
"Maaf, tadi HP-ku sengaja kunonaktifkan karena menunggu sampai jam 12 datang. Maaf ya, kak!"
"Iya. Tidak apa-apa".

Aku tidak bisa menggambarkan perasaan riang yang kurasakan malam itu. Aku sangat berterima kasih padanya untuk sebuah malam yang istimewa dari semua malam yang terlewati. Untuk sebuah doa di hari ulang tahunku. Untuk sebuah kalimat yang paling membuatku gembira. Semoga tambah disayangka’. Meskipun tak ada kado darinya, tapi bagiku, itulah kado terindah yang dia berikan untukku. Sebuah kalimat yang akan selalu kuingat setiap saat. Di tiap hela nafasku yang berhembus. Aku tak meminta apa-apa. Aku hanya ingin melihat senyumnya. Senyum yang bisa mendamaikanku. Itulah senyummu.
***
Aku sangat mengerti keadaanmu yang terkadang membatasi kita untuk selalu bersama. Aku juga tidak akan memaksakan keinginanku untuk selalu bersamamu, walau rindu untukmu terkadang tak mampu kutahan. Aku akan selalu menyayangimu dengan segala ketulusanku. Aku akan selalu menjaga cinta ini untukmu. Aku menyayangimu selalu dan selamanya!

Makassar, 5 April 2010
Aku selalu merindukanmu ade’Q sayang!
Baca Lengkap....

Cara Mengganti Huruf/Font pada Judul Postingan

Hay.... ketemu lagi.......... Pernah jalan-jalan ke GOOGLE WEB FONTS? Kalau belum, buruan kunjungi. Di sana banyak model/jenis huruf yang keren-keren untuk blog Anda. Silahkan Anda pilih sendiri model yang Anda sukai. Karena di google web font ini sudah dilengkapi dengan kode CSS, jadi Anda tinggal copy paste saja ke blognya. Gampangkan? Oke!!!

Trus, gimana cara pasangnya? Hehehehehe..... Kita langsung saja ke situs utamanya atau klik langsung di sini. Pada halaman ini, silahkan klik jenis font yang disukai kemudian klik USE THIS FONT. Untuk lebih jelasnya, silahkan lihat gambar di bawah.


Misalnya, Anda ingin menggunakan model font TERMINAL DOSIS LIGHT, langsung klik saja. Kemudian akan muncul halaman seperti gambar berikut.


Selanjutnya, klik USE THIS FONT (lihat gambar di atas). Akan muncul kode CSSnya (lihat gambarnya di bawah). Copy kode tersebut ke notepad dan jangan lupa tambahkan tanda garis miring (/) pada akhir kode sebelum tanda (>). Jadi, akan seperti ini hasilnya:





Setelah itu, kita beralih ke cara memasangnya pada blog. Caranya seperti ini:
  1. LOGIN ke blog Anda.
  2. Klik RANCANGAN, kemudian EDIT HTML.
  3. Letakkan kode CSS tadi di bawah kode <head>. Tempatnya di bagian atas, jadi tidak perlu cari jauh-jauh ke bawah. Kemudian cari kode berikut. Caranya klik CTRL + F.

  4. Tambahkan kode berikut di bawahnya.



    Hasilnya kira-kira akan seperti ini.



    Catatan: Jika post h3 blog Anda terdapat kode font-family, tinggal tambahkan saja nama fontnya ("Terminal Dosis Light")
  5. Silahkan SAVE TEMPLATE dan lihat hasilnya!!!
  6. Selesai. Gampang kan!!!

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