Tuesday, October 30, 2012

Cara Membuat Dua Kolom Widget Di Bawah Postingan Blog

Cara Membuat Dua Kolom Widget Di Bawah Postingan Blog

Cara Membuat Dua Kolom Widget Di Bawah Postingan Blog

Cara Membuat Dua Kolom Widget Di Bawah Postingan Blog - Tips kali ini yang akan saya share adalah cara membuat 2 (dua) buah kolom widget berada di bawah postingan, sobat bisa lihat contohnya di bawah postingan ini, seandainya sobat berminat untuk menambahkan 2 kolom di bawah postingan silahkan sobat ikuti langkah-langkahnya dibawah.

Untuk menghindari hal yang tidak kita inginkan, lakukan backup template dulu sebelum melakukan pengeditan terhadap template, karena seandainya terjadi kesalahan kita sudah punya salinan template kita.

Berikut Cara Membuat Dua Kolom Widget di Bawah Postingan :
  1. Masuk terlebih dahulu ke akun blogger sobat
  2. Kemudian pilih Template --> Edit HTML --> Lanjutkan
  3. Jika sudah muncul tampilan Template Edit HTML sobat centang Expand Template Widget
  4. Langkah selanjutnya sobat cari kode ]]></b:skin> untuk mempermudah sobat bisa tekan Ctrl+F atau tekan tombol F3 pada Keyboard sobat untuk melakukan pencarian.
  5. Jika sudah ketemu copy kode dibawah tepat diatas kode ]]></b:skin>
  6. .creativekolom {{margin:5px 0px 10px 0px;padding:5px 0;clear:both;}}
    .bawahkiri {float:left;width:47%;margin-right:5px;border: 1px solid #ccc; padding: 5px; background: #ffffff;-moz-border-radius:5px; -webkit-border-radius: 5px; border-radius: 5px;}
    .bawahkanan {float:right;width:47%;border: 1px solid #ccc; padding: 5px; background: #ffffff;-moz-border-radius:5px; -webkit-border-radius: 5px; border-radius: 5px;}
  7. Langkah selanjutnya sobat cari kode <data:post.body/>
  8. Jika sudah ketemu sobat Copy kode dibawah tepat dibawah kode <data:post.body/>
  9. <b:if cond='data:blog.pageType == "item"'>
    <div class='creativekolom'>
    <div class='bawahkiri'>
    Simpan tulisan atau Kode Script yang sobat kehendaki di sini -> Untuk kolom sebelah kiri
    </div>
    <div class='bawahkanan'>
    Simpan tulisan atau Kode Script yang sobat kehendaki di sini  -> Untuk kolom sebelah kanan
    </div> </div> </b:if>
  10. Silahkan sobat klik tombol pratinjau terlebih dahulu untuk mengetahui apakah ada kesalahan atau tidak.
  11. Seandainya tidak ada masalah sobat tinggal klik tombol Simpan Template.
  12. Untuk contoh hasilnya sobat bisa lihat 2 kolom tambahan di bawah postingan ini.
Untuk tulisan yang dikasi warna merah boleh sobat rubah sesuai kebutuhan atau sesuai dengan template sobat, mungkin cukup sekian dulu tips kali ini mudah-mudahan Cara Membuat Dua Kolom Widget Di Bawah Postingan Blog bisa bermanfaat dan berguna.

Selamat Mencoba