Tab Menu E

anime

back to top
unik
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Jumat, 22 Februari 2013

Merubah Ukuran Font Postingan Blog

Merubah Ukuran Font Postingan Blog | Kesulitan yang sering di temukan oleh sebagian besar Blogger adalah pada penggunaan theme blog yang sesuai dengan standar seo yang friendly. kebanyakan theme menerapkan ukuran huruf / font kecil terlebih pada bagian judul ( title). apa lagi kalau kita ingin menerapkan tag h1 s/d h6.disini kita masih bisa mengakali atau melakukan edit pada bagian judul agar kelihatan lebih jelas dan friendly untuk seo yaitu dengan merubah ukuran font.

Adakah trik untuk  merubah ukuran font ? Tentu saja ada berbagai faktor yang perlu untuk kita pertimbangkan agar banyak pengunjung yang membaca tulisan kita hingga akhirnya membaca dan memberi komentar dengan baik. Salah satu faktor mendasar yang penting untuk kita perhatikan adalah jenis tulisan yang kita gunakan dalam postingan blog kita. Baca kembali artikel tentang memilih huruf yang pas dalam postingan blog dan baca artikel yang masuk dalam kategori tips menulis untuk meningkatkan kemampuan menulis kita.


Berkaitan dengan pemilihan huruf yang pas bagi postingan blog kita, bagaimana cara untuk merubah ukuran font dan jenis font dalam postingan blog kita? Berikut ini akan dijelaskan cara mengubah jenis font dan ukuran font di dalam postingan blog kita.

Langkah merubah ukuran font adalah masuk ke dalam akun blogger sbb:


Klik rancangan.

Klik edit HTML.

Contreng expand template widget.

Cari kode berikut.

.post-body{  atau  .post-body {

Untuk mengubah jenis font di postingan masukan kode berikut di dalam kode di atas.

font-family:georgia

Untuk mengubah ukuran font di postingan blog kita, masukan kode berikut di dalam kode di atas.


font-size:15px;

Contoh kode untuk mengubah jenis dan ukuran font.

.post-body{font-family:georgia;font-size:15px;

Klik simpan template dan selesai.

Keterangan:

Ganti georgia dengan jenis font yang kita sukai.
Ganti 15px dengan ukuran font yang kita sukai.

Gunakan tombol Ctrl+F pada keyboard untuk mempercepat proses pencarian kode yang kita inginkan di dalam template blog.

Unduh dan simpan template blog kita terlebih dahulu sebagai langkah antisipasi jika kita mengalami kegagalan ketika proses merubah ukuran font berlangsung.

Merubah ukuran font.pada dasarnya bertujuan agar pengunjung datang ke blog kita dan membaca artikel yang kita tulis. oleh karena itu, berikanlah tampilan jenis font yang selaras dengan desain template blog kita dan mudah serta nyaman untuk dibaca.saat merubah ukuran font atur juga ukuran font agar tidak terlalu besar atau terlalu kecil. Sehingga, dengan pengaturan jenis dan ukuran font di postingan blog yang pas akan membuat pengunjung semakin betah untuk berlama-lama membaca setiap halaman postingan di blog kita.

Demikianlah cara Merubah ukuran font postingan blog semoga bermanfaat.

Super Mudah Ganti Ukuran Font Postingan Blogger

jenis dan ukuran / size huruf atau font pada postingan mungkin beda dengan selera kita , misalnya ukuran kecil, akibatnya kurang nyaman dimata terutama bagi yang ketajaman penglihatannya sudah mulai berkurang sehingga perlu Merubah Ukuran dan Jenis Font tersebut, untuk itulah saya share Cara Super Mudah Ganti Ukuran Font Postingan Blogger yang kemarin saya lakukan. Langsung ke topik bahasan Cara Super Mudah Ganti Ukuran Font Postingan Blogger sbb.:
  1. Log in ke account sobat di blogger.com
  2. Klik tanda panah, lalu pilih Template
  3. Selanjutnya plih Edit HTML  --> klik Procced atau proses
  4. Cari kode .post body  atau .post-body, gunakan Ctrl+F untuk mencarinya 
  5. Kode lengkapnya seperti ini :
    .post-body{
    margin:0 0 .75em;
    line-height:1.6em}
    .post-body blockquote{
    line-height:1.3em}
  6. Setelah ketemu , tambahkan kode font atau huruf yang berwarna merah setelah margin:0 0 .75em; seperti tampak pada tampilan dibawah ini :
    .post-body{
    margin:0 0 .75em;
    font-size:14px;
    font-family:Arial, Georgia,Times New Roman;

    line-height:1.6em}
    .post-body blockquote{
    line-height:1.3em}
  7. Atau bisa juga dalam kode  body {  seperti dibawh ini
    body{
    background: #f5fffa;
    width:980px;
    color:#333;
    font-size:14px;
    font-family:Arial,Tahoma,Verdana;

    margin:0 auto 0;
    padding:0}
  8. Angka 14px dan jenis font bisa diganti sesuai selera
  9. Lakukan preview dulu, jika sudah ok tinggal save template
  10. Cara mudah ganti size font selesai sampai disini.
Itulah Cara Super Mudah Ganti Ukuran Font Postingan Blogger yang saya share kali ini. Semoga bermanfaat.

  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong share/bagikan dengan tombol share dibawah.
  3. Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan

Cara mudah Membuat isi Widget Sejajar (Horizontal)

Di dalam sebuah blog terutama Personal blog, pasti selalu terdapat widget, karena widget bisa berfungsi sebagai tempat untuk menyimpan facebook like, atau menempatkan Alexa/Histat dan lain-lain tergantung si pemilik blog,  tapi secara default isi widget akan sejajar secara vertikal ke bawah jika kode kode tersebut hanya dipasang tanpa kode tambahan lain,  nah disini saya akan share bagaimana cara untuk mensejajarkan isi widget, lihat kode di bawah ini
<table><tr>
<td>Kode Widget/kode html Disini</td>
<td>Kode Javascript juga bisa</td>
</tr></table>
mudah kan?
agar lebih jelas akan saya beri contoh langsung.
Di bawah ini akan saya pasang kode html gambar, yang di simpan secara biasa saja (di simpan saling tumpuk) Maka Hasilnya akan seperti ini
Photobucket
Photobucket
tapi jika kita pakai kode tambahan di atas yang berfungsi untuk mensejajarkan isi widget , maka hasilnya akan seperti ini
PhotobucketPhotobucket

bagaimana jika ada tiga atau lebih isi widget yang ingin disejajarkan? mudah saja, kita tinggal tambahkan kode yang di tengah itu <td>Kode Html/kode widget</td>
Itulah tutorial tentang Cara mudah Membuat isi Widget Sejajar (Horizontal) , semoga postingan kali ini bermanfaat untuk anda, selamat mencoba . . .

(CSS) Fungsi OVERFLOW

OVERFLOW sering digunakan dalam kode CSS. Fungsi dari overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll. Fungsi ini bisa diterapkan dalam objek teks ataupun gambar.

Pada objek tertentu, baik posting atau widget, kadang kadang ada yang memakan tempat ke pinggir atau ke bawah. Supaya objek tersebut muncul sesuai dengan yang kita kehendaki, maka digunakan syntax overerflow.

Penggunaan kode ini ada beberapa alternatif, yaitu:
  1. overflow:scroll
  2. overflow:auto
  3. overflow:hidden
  4. overflow:display
Sebagai contoh, saya akan membuat objek untuk postingan atau widget. Contoh kode yang digunakan adalah :
<div style="background-color:#FBFBFB; border:1px solid #D2D2D2; padding:10px; width:400px; height:100px; overflow:auto;">
teks atau gambar di sini</div>
keterangan:
background-color : warna latar belakang
border : warna garis pinggir
padding : jarak dari pinggir garis ke objek
width : lebar
height : tinggi
overflow : silahkan pilih auto, scroll, hidden atau display sesuai kebutuhan.

Hasil overflow:auto
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.

Hasil overflow:scroll
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.

Hasil overflow:hidden
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi oferflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.

Hasil overflow:display
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.