Membuat Judul Posting Center of Position (Judul Posting di Tengah)


Beberapa perubahan dalam bentuk sederhana mungkin diperlukan dengan tujuan menciptakan keseimbangan penataan, membuat tampilan berbeda yang menjadikan blog terlihat lebih rapi atau menarik, atau mungkin dimaksudkan untuk beberapa tujuan berbeda. Satu perubahan kecil yang dapat kita lakukan adalah pada Judul Posting atau Posts Title.

3 Kemungkinan Perubahan Posts Title:
  • Rata Kiri : Bentuk rata kiri merupakan bentuk dasar yang digunakan di hampir semua desain blog.
  • Rata Tengah atau Center of Position: Dengan menambahkan kode text-align:center maka judul posting akan berubah menjadi rata tengah/center of position.
  • Rata Kanan: Rata kanan berlawanan dengan rata kiri. Judul posting akan rata disebelah kanan sedang posisi sebelah kiri akan bergantung seberapa panjang teks judul posting.


Untuk membentuk judul posting menjadi center of position, perubahan kecil yang menyertakan kode text-align:center harus dilakukan pada syntax .post h3 {...} atau .post h3 a{...}.
  • Cari kode .post h3 atau .post h3 a
  • Pada salah satu syntax tersebut akan terlihat kode CSS seperti terlihat di bawah ini:

  • .post h3 {
    margin:0;
    color:yellow;
    font-size:140%;
    font-family:Times New Roman;
    }
    .post h3 a {
    color:#fdad01;
    font-size:22px;
    font-family:Dauphin;
    font-weight:normal;
    text-decoration:none;
    padding:0 10px;
    }
  • Jika ditemplate tak ditemukan syntax .post h3 a, maka tambahkan kode text-align:center; pada syntax .post h3. Hasil perubahan terlihat seperti berikut:

  • .post h3 {
    margin:0;
    color:yellow;
    font-size:140%;
    font-family:Times New Roman;
    text-align:center;
    }
  • Sedang apabila pada template sampeyan ditemukan kode (syntax) .post h3 a, maka lakukan perubahan (penambahan kode) menjadi seperti ini:

  • .post h3 a {
    color:#fdad01;
    font-size:22px;
    font-family:Dauphin;
    font-weight:normal;
    text-decoration:none;
    padding:0 10px;
    text-align:center;
    }
  • Proses perubahan atau penambahan kode CSS baru seperti terlihat di atas dapat dilakukan setelah sampeyan melakukan "Login" kemudian masuk di halaman "Edit HTML". Setelah perubahan selesai dilakukan, langkah terakhir adalah KLIK "SAVE Templates/Simpan Template".


Catatan/Keterangan:
  • Penambahan kode text-align:center; ditempatkan pada posisi terbawah sebelum tanda } (kurung tutup).
  • Penambahan kode tersebut cukup dilakukan pada salah satu syntax yang tersebut di atas.
  • Jika diinginkan beberapa perubahan lain pada tampilan judul posting, sampeyan bisa melakukan perubahan atau penambahan kode baru yang berbeda pada syntax-syntax di atas.
  • Beberapa contoh perubahan yang mungkin dilakukan: warna font, background, text-decoration, jenis font dan ukuran font serta beberapa perubahan kecil yang lain.
  • Syntax yang digunakan hanyalah sekedar contoh, pasti akan berbeda dengan setiap desain blog yang sampeyan gunakan. Yang terpenting untuk dijadikan acuan adalah pada kode .post h3, .post h3 a dan text-align:center;

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :





» Happy Blogging - gubhugreyot «


Comments