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

Cara Membuat Daftar Isi Atau Arsip Blog Otomatis dengan Scrool

Selamat bertemu kembali. Postingan ini akan membahas tentang cara membuat DAFTAR ISI atau ARSIP BLOG secara otomatis. Tidak perlu edit HTML, cukup copy paste saja. Beres deh..!

Ok!!! Kita langsung saja ke pokok permasalahan. Pertama, seperti biasa silahkan login ke akun blog Anda atau klik di sini. Klik RANCANGAN kemudian pada halaman ELEMEN LAMAN klik Add Gadget/Tambah Gadget.
Cara Membuat Daftar Isi Atau Arsip Blog Otomatis dengan Scrool

Kalau sudah muncul, klik saja tanda plus pada HTML/JavaScript.
Cara Membuat Daftar Isi Atau Arsip Blog Otomatis dengan Scrool

Nah, kan muncul tuh kotaknya. Silahkan isi judul sesuai keinginan Anda lalu copy paste kode berikut ke dalam kolom yang kosong. Lihat gambar di bawahnya.



Setelah itu, klik SIMPAN dan beres deh!!!!

Keterangan:
  • Untuk kode width: 99%; height: 263px; silahkan sesuaikan dengan ukuran blog Anda.
  • Sedangkan kode HTTP://NAMA BLOG ANDA.BLOGSPOT.COM ganti dengan alamat url blog Anda.
  • Kalau ingin mengganti warna bordernya, silahkan ubah kode berikut: border-top: 2px groove #fff; border-left: 2px groove #fff; border-bottom: 2px groove #fff; border-right: 0px dashed #fff;. Jika tidak mau pake border, tinggal hapus saja kode tersebut. Oke!!!

Terima kasih telah berkunjung. Selamat belajar dan jangan lupa komentarnya ya!!!!!
Baca Lengkap....

Menambah Sidebar Tiga Kolom di Bawah Header

Jika Anda ingin menambahkan sidebar di bawah header, silahkan ikuti petunjuk berikut. Pertama-tama yang harus diketahui, yaitu sidebar yang saya maksud adalah sidebar tiga kolom. Artinya, akan ada tiga sidebar yang akan muncul/terpasang nantinya (lihat tiga kolom di bawah menu blog ini).

Langsung saja untuk proses pemasangannya.
  • Log in ke akun BLOG Anda. Klik RANCANGAN lalu klik EDIT HTML.
  • DOWNLOAD template Anda terlebih dahulu kemudian centang EXPAND TEMPLATE WIDGET.
  • Letakkan kode berikut di atas ]]></b:skin>.

    #sidebar-atas {
    width:900px;
    clear:both;
    float:left;
    color:#fff;
    background: transparent;
    margin:0 auto;
    padding:0 0 10px;
    }

    #sidebar-atas a:visited {
    color:gray;
    text-decoration:none;
    }

    #sidebar-atas h2 {
    color: #fff;
    font-family: Comic Sans MS;
    font-size: 20px;
    font-weight: normal;
    text-shadow: 1px 1px 6px #fff;
    margin: 0 0 10px;
    padding: 10px;
    background: url(https://lh3.googleusercontent.com/_QeIxO28ukBc/TZLjbMaApXI/AAAAAAAAALo/ZV6xupKEs7w/backian.jpg);
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    }

    #left-sidebar-atas {
    width:360px;
    float:left;
    padding-left:15px;
    }

    #center-sidebar-atas {
    width:230px;
    float:left;
    padding:0 20px;
    }

    #right-sidebar-atas {
    width:260px;
    float:right;
    padding-right:15px;
    }
  • Kemudian cari kode berikut.

    <div id='header'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Anak Pesisir (Header)' type='Header'/>
    </b:section>
    </div>
  • Setelah ketemu, letakkan kode berikut di bawahnya.

    <div id='sidebar-atas'>
    <b:section class='sidebar-atas' id='left-sidebar-atas' preferred='yes'/>
    <b:section class='sidebar-atas' id='center-sidebar-atas' preferred='yes'/>
    <b:section class='sidebar-atas' id='right-sidebar-atas' preferred='yes'/>
    </div>
  • Jika Anda memiliki menu horizontal dan ingin menyimpannya di bawah menu blog Anda, simpan saja kodenya di bawah kode menu pada blog Anda.
  • Ganti tulisan berwarna merah dan sesuaikan dengan ukuran blog Anda. SIMPAN TEMPLATE dan selesai. Silahkan lihat hasilnya di ELEMEN LAMAN.

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

Cara Membuat Text/Tulisan Berjalan

TERIMA KASIH TELAH BERKUNUNG KE BLOG INI. JANGAN LUPA KOMENTARNYA YA!

Selamat malam. Seperti postingan saya sebelumnya, membuat tulisan berjalan dengan efek pelangi, tulisan ini masih membahas dengan model yang lebih banyak lagi. Silahkan praktekkan postingan berikut karena menurut saya menarik. Membuat tulisan berjalan dengan beberapa variasi. Bisa dipasang di mana saja sesuai dengan keinginan Anda.

Lihat kode-kode berikut:
  • Untuk tulisan berjalan standarnya ialah berjalan ke kanan. Lihat tulisan berikut.
    TULISAN BERJALAN

    Kodenya seperti di bawah ini.
  • Yang kedua adalah tulisan berjalan ke kanan seperti di bawah ini.
    TULISAN BERJALAN KE KANAN

    Kodenya adalah seperti berikut.
  • Yang ketiga tulisan berjalan ke atas.
    TULISAN BERJALAN KE ATAS

  • Yang keempat, tulisan berjalan ke bawah.
    TULISAN BERJALAN KE BAWAH

    Kodenya seperti di bawah ini.
  • Yang kelima, tulisan berjalan bolak-balik seperti contoh di bawah ini.
    TULISAN BERJALAN BOLAK-BALIK

    Kodenya seperti di bawah ini.
  • Yang keenam, tulisan berjalan zig-zag ke atas lalu ke bawah.
    TULISAN BERJALAN BOLAK-BALIK KE ATAS LALU KE BAWAH

    Kodenya adalah:
  • Yang ketujuh, tulisan zig-zag ke bawah lalu ke atas.
    TULISAN BERJALAN BOLAK-BALIK KE BAWAH LALU KE ATAS

    Kodenya seperti berikut.
  • Selanjutnya adalah tulisan berjalan memantul tembus ke kanan.
    TULISAN BERJALAN MEMANTUL TEMBUS KE KANAN

    Kodenya sebagai berikut:
  • Kemudian tulisan memantul tembus ke kiri.
    TULISAN BERJALAN MEMANTUL TEMBUS KE KIRI

    Kodenya adalah:
  • Selanjutnya lihat di bawah ini. Tulisan berjalan memantul.
    TULISAN BERJALAN MEMANTUL

    Kodenya adalah:

Demikian model-model tulisan berjalan. Sebenarnya masih banyak lagi. Tulisan di atas hanya contoh saja. Tulisan berjalan berwarna pelangi bisa juga dipraktekkan seperti yang sudah daya posting sebelumnya. Kalau belum baca, silahkan baca artikel sebelumnya berjudul cara membuat tulisan berjalan (pelangi) di sini. Untuk model yang lain bisa Anda buat sendiri. Silahkan bereksperimen.

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