Blog kita akan terlihat lebih baik dan bagus jika didukung oleh tampilan yang yang baik juga, artinya selain konten (isi) blog kita baik atau bermutu setidaknya juga ditunjang tampilan blog kita yang juga harus indah dan bagus. Salah satu hal yang bisa kita lakukan untuk memperindah blog kita adalah dengan membuat tulisan atau teks yang ada di blog kita tak hanya diam, artinya berjalan dan bergerak-gerak :z

Setelah kita belajar membuat tulisan berjalan, yang dulu pernah kita pelajari bersama disini. Kita sekarang beralih, cara membuat tulisan berkedip-kedip. Mungkin kita juga bisa kasih julukan dengan tulisan genit :o Karena dengan tulisan berkedip-kedip ini akan menjadi daya tarik orang untuk melihatnya. Bayangkan saja jika ada cewek di dekat kita yang mengedip-ngedipkan matanya. :D

Itu contoh atau hasil dari pelajaran kita hari ini, yaitu membuat tulisan berkedip, lalu apa saja hasil dari modifikasi atau manfaat apa yang bisa kita peroleh dari kode html tulisan berkedip ini? Kita juga dapat membuat link dari tulisan berkedip itu, hasilnya akan seperti ini :


Cara Membuat Tulisan Berkedip-kedip 
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode-kode berikut ini


5. Sedang untuk yang kita sisipkan link kodenya seperti ini


6. Kita dapat menganti tulisan yang nampak (SELAMAT DATANG), dengan berbagai keinginan kita. Dan link http://www.kurniasepta.blogspot.com/ dengan URL yang kita tuju.

Tahap Desain

Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:



Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :

background
header
main
footer

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Nha modeng po ra?

Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }
4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :

#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}

6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }

10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }

kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.

:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......

Membuat Efek Huruf Berkedip-Kedip (Blink) Di WordPress.com

Disini Saya akan berbagi seputar trick WordPress.com terbaru. Dan trick tersebut adalah membuat efek huruf blink atau membuat efek huruf menjadi kedip-kedip seperti lampu natal.
Sebelumnya Saya ingin berucap salam kepada pembaca setia bootingskoBlog. Semoga Anda tidak bosan-bosannya berkunjung dan menyebarkan artikel kepada sesama rekan yang membutuhkannya. Untuk para rekan-rekan bootingskoBlog yang telah berkomentar dan belum terbalas oleh Saya, mohon maaf yang sebesar-besarnya. Saya akan berusaha untuk membalas dengan kemampuan Saya yang terbatas .
Kembali ke benang merah , mungkin banyak rekan-rekan beranggapan kalau trick ini mustahil  diterapkan di WordPress.com dan hanya berlaku di Blogspot. Namun sepertinya dengan sedikit usaha pasti ada solusinya. Dan ternyata benar efek ini bisa untuk pengguna WordPress.com tercinta. Sebagai bukti lihat contoh dibawah:

Selamat Datang

Gimana? Cukup menarik bukan? Ikuti caranya sebagai berikut:

1. Login ke Admin WordPress anda.
2. Pada sisi kiri halaman  klik menu [Post] > [Add New].
   
3. Dan akan tampil halaman ‘Add New Post’.
   
4. Copy dan paste kode dibawah ini pada mode [HTML].
   

   <a style="color: #FF0000; font-size: 22px; text-decoration: blink;">Tulisan Anda…</a>

   Parameter:
   color: ganti dengan kode warna lain.
   font-size: rubah nilai ukuran huruf.
5. Setelah selesai, klik tombol [Save Draft] bila anda ingin menyimpannya dulu atau klik tombol [Publish] bila anda ingin menampilkannya pada halaman blog anda.
   

Andapun bisa memasang trick ini di sidebar atau widgets text. Selamat mencoba!