Cara membuat efek koran pada posting blog

Untuk membuat huruf awal di cetak lebih besar atau tulisan bergaya koran, maka Anda perlu membubuhkan kode css ke dalam style sheet nya. Karena template blogger masih terbagi dua yaitu klasik dan baru, maka untuk cara penempatan kode pun ada sedikit berbeda. Untuk itu silahkan ikuti langkah-langkah berikut ini !

Untuk Template Klasik
1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4.Copy seluruh kode template, lalu paste pada notepad kemudian save. Ini untuk berjaga-jaga apabila terjadi kesalahan melakukan editting
5.Copy paste kode berikut di antara kode <style type='text/css'> dan kode </style> dan kalau Anda merasa bingung, maka tempatkan saja di atas kode </style>

/* kode untuk huruf awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}
6. Klik tombol Simpan Perubahan Template
7. Selesai

Untuk Template Baru
1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4.Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
5.Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode ]]></b:skin> , atau jika bingung simpan saja persis di atas kode ]]></b:skin>

/* kode untuk huruf awal----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}
6. Klik Tombol Simpan Template
7. Selesai.

Langkah-langkah di atas merupakan langkah pertama, langkah selanjutnya yang harus Anda lakukan adalah ketika melakukan posting harus pada posisi Edit HTML bukan pada Compose.

Simpanlah huruf awal artikel pada kode berikut <span class="awal"> huruf awal </span>. Setelah itu terserah sobat, mau tetap pada posisi Edit HTML atau berpindah ke mode Compose tidak ada masalah.

Berikut adalah ulasannya agar Anda lebih paham

/* kode untuk huruf awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

.awal --> ini adalah penamaan saja, mau di ubah jadi begin, start, atau apa saja boleh, cuma jangan lupa untuk membubuhkan tanda titik (dot) di awal tulisan.

float:left; --> ini adalah kode agar tulisan awal di letakkan pada posisi kiri alias mepet ke kiri, jangan di ubah kalau yang ini.

color: #000000; --> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, jika Anda ingin warna yang lain maka silahkan saja di ganti.

background:#ffffff; --> ini adalah kode untuk warna latar belakang, kode #ffffff adalah kode warna putih, jika Anda ingin warna yang lain silahkan di ganti sesuai keinginan.

line-height:80px; --> ini adalah kode untuk jarak baris, sebaiknya jangan di ganti.

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

padding-right:5px; --> ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 5 pixel, jika Anda berniat mengganti jaraknya, silahkan ganti nilainya saja.

font-family:times; --> ini adalah kode jenis huruf, yang di pakai adalah jenis times, jika tidak suka dengan times bisa di ganti dengan yang lain, mau Georgia, Verdana, sans-serif atau yang lainnya silahkan saja.

font-size:100px; --> ini adalah kode untuk besarnya huruf, jika mau di ganti silahkan ganti nilainya saja.

Nah, gimana? Bisa ga?
Oke, selamat mencoba ya….

| Free Sofware and games |