Cara Membuat Kotak Terpisah Pada Blog

Welcome to My Blog Bang Udin

Cara Membuat Kotak Terpisah Pada Blog

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




  • 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

    By : Bang Udin

    Prcantik belok anda di bawah ini

    Tidak ada komentar:

    Posting Komentar

    Followers

    Pengikut

    ALL TUTORIAL BLOG

    Informasi Baru
    Cara Membuat Scroll Bar. Tulisan Berjalan di Addressbar.
    Menghilangkan Angka Label.
    Cara Hack Chip Zynga.
    Membuat GIF Untuk Banner.
    Membuat Read more Otomatis.
    SEO Blogger/Blogspot Template. Curi Password Flash disk. Cara Buat Title Header Bergerak. Cara Membuat Letak Background Di Kotak Comment. Cara Membuat Menambah Jumlah Yang Di Batasi. Cara Membuat Memasang Widget Sms Gratis. Cara Membuat cursor Pada Blog. Membuat Domain Gratis di CO.CC. Membuat Next Page judul Postingan. Next Page Hanya Judul Postingan. Cara Membuat Efek Heart(Hati). Cara Memasang Meta tag. Cara Membuat meta tag di blog. Cara Membuat Icon,GIF, Flash. Cara Membuat Flash. Cara Membuat Menu Melayang. Cara Membuat Label Berputar. Cara Mengganti Icon Bloger. Cara Membuat Template. Menambah dua kolom dibawah/diatas post body. Cara Membuat Menu Tab View. Safware Pengelola Blog.

    Archives