Wednesday, May 16, 2012

MEMBUAT KOTAK POSTING TERPISAH


Membuat kotak posting terpisah sebagian banyak yang menyukai, karena kelihatan lebih rapi disamping dapat mengatur border warna yang lebih menarik kemudian dikombinasikan dengan warna background membuat kolom post lebih cerah.
Kali ini saya mencoba untuk berbagi informasi, bagaimana membuat kotak posting terpisah-pisah disetiap judul dengan cara 2 pilihan :

  1. Kotak Posting terpisah dengan bentuk garis kotak
    1. Login ke"Blogger" dengan user ID Anda
    2. Pilih "Tata Letak"
    3. Pilih "Edit HTML"
    4. Cari Kode berikut .post {
    5. Copy "kode dibawah" ini dan letakan dibawah kode tersebut



      Padding:10px; /* Jarak text post dengan garis pinggir */
      Border-top: 2px solid #D8D8D8; /* warna garis pinggir atas */
      Border-bottom: 2px solid #D8D8D8; /* warna garis pinggir bawah */
      Border-left: 2px solid #D8D8D8; /* warna garis pinggir kiri */
      Border-right: 2px solid #D8D8D8; /* warna garis pinggir kanan */
      Margin-bottom: 30px; /* jarak antara post yang satu dengan yang lainnya */

    6. Simpan Template


    Contoh kotak posting terpisah garis lurus

    KOTAK POSTING I bentuk garis kotak

    KOTAK POSTING II bentuk garis kotak



  2. Kotak Posting terpisah dengan garis melengkung disetiap sudut

  1. Login ke Blogger dengan user ID Anda
  2. Pilih Tata Letak
  3. Pilih Edit HTML
  4. Cari kode h2.date-header {
  5. Letakan kode dibawah ini tepat dibawah kode tersebut

    border-left:3px solid #A9D0F5;
    border-right:3px solid #A9D0F5;
    border-top:3px solid #A9D0F5;
    border-bottom:0px solid #A9D0F5;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;


  6. Kemudian Anda cari kode .post-body {
  7. Letakan kode dibawah ini tepat dibawah kode tersebut


    border-right:3px solid #A9D0F5;
    border-left:3px solid #A9D0F5;

  8. Berikutnya cari kode .post-footer {
  9. Letakan kode dibawah ini tepat dibawah kode tersebut


    border-left:3px solid #A9D0F5;
    border-right:3px solid #A9D0F5;
    border-top:0px solid #A9D0F5;
    border-bottom:3px solid #A9D0F5;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;

  10. Simpan Template

0 comments:

Post a Comment

Silahkan meninggalkan komentar Anda,
Mohon Maaf !!! Jangan meninggalkan Link dan SPAM dalam bentuk apapun, atau komentar Anda akan di laporkan sebagai SPAM...
Setitik komentar Anda, dapat membangun Blog ini...
Terima Kasih atas komentar Anda. . .

Template Design by SkinCorner