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

Cara Membuat Tulisan Berjalan ( Pelangi)



Di sini tulisan yang ingin di beri efek pelangi berjalan


Efek tulisan pelangi ini saya ambil dari blog Aku Punya dot Com, kemudian saya tambahkan sedikit kode agar bisa berjalan dan muncullah tulisan pelangi berjalan ini. Langsung saja praktekkan. Caranya sangat mudah.
  • Login ke blog Anda dan pilih RANCANGAN. Kemudian pilih EDIT HTML.
  • Jangan lupa download template blog Anda terlebih dahulu. Centang EXPAND TEMPLATE WIDGET.
  • Copy dan letakkan kode berikut sebelum kode </head>.
  • Klik SAVE.
  • Langkah selanjutnya adalah memasukkan kode berikut ke dalam text/tulisan yang ingin diberi efek pelangi berjalan.
Selesai dan lihat hasilnya.
Selamat belajar dan jangan lupa komentarnya ya!!

Sumber: http://aku-punya.com/cara-membuat-text-tulisan-pelangi.html
Baca Lengkap....

Mengganti Read More dengan Gambar

Selamat Malam. Setelah lama tidak membuat postingan, saya berinisiatif saja memberikan tips ini kepada para blogger. Masih tentang modifikasi blog. Posting kali ini pun masih membahas tentang tutorial yang sudah umum, yaitu mengganti tulisan Read More/Baca Selengkapnya dengan sebuah gambar.

Yang pertama Anda lakukan adalah membuat gambar read more yang akan kita gunakan nanti. Silahkan buka situs Supalogo.com atau klik di sini. Di sana Anda bisa memodifikasi tulisan read more seperti yang kita sukai. Tampilannya seperti ini:

Selanjutnya, masukkan kata-kata di kolom yang tersedia. Klik GENERATE dan lihat preview-nya di bawah. Untuk mengganti jenis huruf/font, text size, shadow text, dan warna yang lain, klik saja OPTION. Setelah sesuai dengan selera Anda, download kemudian upload di tempat penyimpanan gambar Anda. Kalau yang saya pakai di sini adalah PICASA. Copy link gambar Anda ke notepad.

Langkah selanjutnya adalah mencari kode berikut:



Setelah ketemu, download dulu template Anda dan centang Expand Widget. Ganti kode + "#more"'><data:post.jumpText/> dengan kode berikut.



Hasilnya seperti ini.



Ganti tulisan berwarna merah dengan URL gambar Anda. Untuk width dan height bisa Anda ganti sesuai dengan template blog Anda. Klik Save Template dam lihat hasilnya.

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