Cara Membuat Posting Dua Kolom di Blogger

POSTING DUA KOLOM

S elain adanya drop cap di awal paragraf pertama, biasanya artikel-artikel di dalam surat kabar atau majalah disajikan dalam bentuk kolom-kolom. Kita juga dapat menerapkan gaya penulisan seperti ini dalam membuat suatu artikel di Blogger. Di sini kita akan membuat halaman posting menjadi 2 kolom. Dengan menulis artikel di dua kolom akan menjadikan blog kita tampak cantik dan menarik seperti tampilan artikel di koran atau majalah.

Sebenarnya dalam membagi postingan menjadi 2 kolom ini tidaklah terbilang begitu sulit. Kita hanya perlu menambahkan kode HTML seperti kita menambahkan kode HTML dalam membuat tabel di Blogger. Kemudian kita hanya tinggal mengatur teks atau tulisan mana saja yang akan diletakkan di kolom sebelah kiri atau di kolom sebelah kanan. Bila Anda ingin mengetahui lebih lanjut mengenai bagaimana cara membuat isi posting menjadi dua kolom di Blogger, silakan dibaca terus ya artikel ini sampai selesai. Semoga postingan ini bermanfaat.

Untuk membuat posting seperti di atas, silakan copy dan paste kode di bawah ini pada posisi Edit HTML kemudian isikan teks atau artikel di tempat yang telah ditentukan.

<table cellpadding="10" cellspacing="10"><tbody>

<tr> <td align="justify" valign="top" width="300">artikel di kolom sebelah kiri</td> <td align="justify" valign="top" width="300">artikel di kolom sebelah kanan</td></tr>

</tbody></table>

Keterangan:

• cellpadding="10" >> ini untuk mengatur jarak antara tepi kolom dengan tulisan sebesar 10 piksel.
• cellspacing="10" >> ini adalah untuk mengatur jarak antara dua kolom sebesar 10 piksel.
• align="justify" >> merupakan perataan teks (justify untuk rata kanan-kiri, right untuk rata kanan, left untuk rata kiri, dan center untuk rata tengah).
• valign="top" >> mengatur perataan vertikal (top untuk rata atas, bottom untuk rata bawah, dan middle untuk rata tengah).
• width="300" >> merupakan lebar untuk kolom, dalam hal ini sebesar 300 piksel.

Anda dapat mengubah item-item yang berwarna merah sesuai dengan selera dan kondisi template blog Anda.

Cara Lain Membuat Drop Cap di Blogger

Beberapa waktu yang lalu, telah dibahas mengenai cara membuat drop cap di Blogger. Di dalam posting tersebut sudah dijelaskan bahwa untuk membuat drop cap kita perlu mengedit HTML template blog guna menambahkan kode-kode pembentuk drop cap. Nah, kali ini kita masih membahas tentang cara membuat drop cap, namun dengan cara yang sedikit berbeda.

Bila pada cara sebelumnya kita perlu mengedit HTML template blog, maka pada cara yang satu ini kita meletakkan langsung kode pembentuk drop cap di posisi Edit HTML postingan. Kode pembentuk drop cap yang dimaksud adalah seperti di bawah ini.

<span style="color: black; float: left; font-family: Times New Roman; font-size: 50px; line-height: 40px; padding-right: 3px; padding-top: 1px;">huruf yang dijadikan drop cap</span>

Yang perlu diingat adalah saat meletakkan kode tersebut harus berada di posisi Edit HTML. Kemudian untuk mengetikkan huruf atau teks selanjutnya dapat dilakukan di Edit HTML atau Compose.

Contoh:

<span style="color: black; float: left; font-family: Times New Roman; font-size: 50px; line-height: 40px; padding-right: 3px; padding-top: 1px;">H</span>ai, jumpa lagi dengan saya. Pada kesempatan kali ini kita akan membuat drop cap di posting tanpa harus mengedit HTML template blog. Bagi yang tidak mau mengedit template blog silakan menggunakan cara ini.

Maka hasilnya akan seperti ini.

Hai, jumpa lagi dengan saya. Pada kesempatan kali ini kita akan membuat drop cap di posting tanpa harus mengedit HTML template blog. Bagi yang tidak mau mengedit template blog silakan menggunakan cara ini.

Berikut penjelasan singkat mengenai kode di atas.

<span style="color: black; float: left; font-family: Times New Roman; font-size: 50px; line-height: 40px; padding-right: 3px; padding-top: 1px;">huruf yang dijadikan drop cap</span>

color: black; menunjukkan warna dari huruf drop cap, dalam hal ini warna huruf tersebut adalah black atau hitam. Anda dapat menggantinya dengan warna lain, misalnya red untuk merah, blue untuk biru, green untuk hijau, dan lain-lain.

float: left; ini menunjukkan kode agar tulisan awal diletakkan pada posisi kiri (left) alias mepet ke kiri.

font-family: Times New Roman; ini adalah jenis huruf drop cap, Anda dapat menggantinya dengan yang lain, misalnya Verdana.

font-size: 50px; ini adalah kode untuk besarnya huruf, bila ingin diganti dengan ukuran yang lain, silakan ubah nilainya saja.

line-height: 40px;  ini merupakan kode untuk jarak baris.

padding-right: 3px; ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 3 pixel, jika Anda ingin mengganti jaraknya, silakan diubah nilainya.

padding-top: 1px; ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya.

Cara Membuat Drop Cap di Blogger

D

rop Cap merupakan suatu teks atau huruf yang ukurannya lebih besar dibandingkan dengan huruf lainnya. Drop Cap ini biasa dijumpai pada huruf awal paragraf atau alinea pertama suatu artikel di media cetak seperti koran atau majalah. Kita juga dapat menerapkan gaya penulisan koran atau majalah ini pada artikel yang kita buat di Blogger. Jika di template Anda belum tersedia drop cap dan Anda tertarik untuk membuat drop cap ini, berikut langkah-langkahnya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Back-up template dengan mengeklik Download Template Lengkap untuk berjaga-jaga bila nanti terjadi kesalahan dalam pengeditan.

4. Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian)

5. Copy kode di bawah ini dan paste di atas kode ]]></b:skin>

/* kode membuat posting unik

----------------------------------------------- */

.unik {

float:left;

color: #000000;

background:#ffffff;

line-height:40px;

padding-top:1px;

padding-right:3px;

font-size:50px;

}

6. Klik tombol SIMPAN TEMPLATE.

Langkah-langkah di atas merupakan langkah awal, langkah berikutnya yang harus Anda lakukan adalah saat melakukan posting Anda harus berada pada posisi Edit HTML bukan pada Compose. Simpanlah huruf awal artikel pada kode berikut <div class="unik">huruf awal</div>. Setelah itu terserah Anda, apakah ingin tetap pada posisi Edit HTML atau berpindah ke mode Compose tidak ada masalah. Contoh penulisan artikelnya seperti di bawah ini.

<div class="unik">H</div>ai, perkenalkan nama saya Munadi. Apa kabar? Semoga para pembaca dalam keadaan yang baik-baik saja. Bagaimana? Tidak sulit bukan dalam membuat drop cap di Blogger. Dengan adanya drop cap ini di posting kita maka akan membuat artikel kita menjadi lebih menarik seperti tampilan artikel di koran-koran.

Maka hasilnya akan seperti di bawah ini.

H

ai, perkenalkan nama saya Munadi. Apa kabar? Semoga para pembaca dalam keadaan yang baik-baik saja. Bagaimana? Tidak sulit bukan dalam membuat drop cap di Blogger. Dengan adanya drop cap ini di posting kita maka akan membuat artikel kita menjadi lebih menarik seperti tampilan artikel di koran-koran.

Berikut ini keterangan untuk kode membuat drop cap.

/* kode membuat posting unik

----------------------------------------------- */

.unik {

float:left;

color: #000000;

background:#ffffff;

line-height:40px;

padding-top:1px;

padding-right:3px;

font-size:50px;

}

.unik >> ini merupakan penamaan saja, kalau mau diganti dengan awal, begin, start, atau apa saja boleh, hanya jangan lupa untuk membubuhkan tanda titik (dot) di awal tulisan.

float:left; >> ini adalah kode agar tulisan awal diletakkan pada posisi kiri alias mepet ke kiri.

color: #000000; >> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, bila Anda ingin warna yang lain maka silakan untuk diganti.

background:#ffffff; >> ini adalah kode untuk warna latar belakang, kode #ffffff adalah kode warna putih, jika Anda mau warna yang lain silakan diganti sesuai keinginan.

line-height:40px; >> ini merupakan kode untuk jarak baris.

padding-top:1px; >> ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya.

padding-right:3px; --> ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 3 pixel, jika Anda ingin mengganti jaraknya, silakan diubah nilainya.

font-size:50px; >> ini adalah kode untuk besarnya huruf, bila ingin diganti silakan ubah nilainya saja.

Cara Membuat Judul Blog Berjalan

Banyak cara yang dapat dilakukan untuk mempercantik tampilan suatu blog agar terlihat menarik di mata para pengunjung. Salah satunya adalah dengan membuat judul blog tersebut berjalan atau bergerak pada title bar browser seperti fungsi Marquee. Tidak seperti membuat teks berjalan pada fungsi marquee yang membutuhkan tag <marquee>, di sini kita memerlukan JavaScript tertentu untuk membuat judul blog berjalan. Untuk membuat judul/title blog berjalan, berikut ini langkah-langkahnya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Back-up template dengan mengeklik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan.

4. Cari tag <head>.

5. Copy kode di bawah ini dan paste-kan di bawah tag <head> tersebut.

<script language='JavaScript'>
var txt=&quot; <data:blog.pageTitle/> &quot;;
var kecepatan=200;
var segarkan=null;
function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}
bergerak();
</script>

6. Untuk mengubah kecepatan silakan ganti angka 200 pada var kecepatan=200; semakin rendah nilainya semakin cepat gerakannya.

7. Klik tombol SIMPAN TEMPLATE.