Welcome to my blog, hope you enjoy reading :)
RSS

Monday, August 30, 2010

Cara Membuat Kotak Terpisah Pada Blog


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




  • 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

    15 comments:

    1. Gann,,kok saya Cari Kode berikut .post {
      kok gak ada sihh gan

      ReplyDelete
    2. TULISANNYA GAK JELAS BROO, WARNA LATAR TEKS TERLALU TERAN, GAK MATCH DENGAN WAR TLISAN

      ReplyDelete
    3. bro ga paham ni, mungkin bisa lebih rinci

      ReplyDelete
    4. Gan Ne AQ Mau KomenT
      NtaR KaLau KiTa Bikin KoLOm Nya Ke DalaM EnTri Gimana CaRanYa Pa NtaR KoDenYa ???
      MakaSih Yachh Gan

      ReplyDelete
    5. TErima kasih. Tips yang bermanfaat. Keep Blogging

      ReplyDelete
    6. kk..

      please,,,

      kasih tau,,

      kok gak da sih..

      yang ada malah .post nya ajah ..

      gak pake tanda {

      pening dah,,

      T_T

      ReplyDelete
    7. azmar syah : gini lh gan,,,,,,rata2 blog pasti ad itu,,krna itu code htmlny,,,klau ad itu bru bsa buat kotak trpisah,,,,,,,,,cba ge dhe,,,soalnya punya aku berhasil...

      anju : emng klau pakai kode yang d atas gmna,,,,gk bsa y,,entri sma html y jlas bda,,klau d artikel ini cma mnjlaskan buat khusus d edit html,,,

      hnya skian yg bsa saya jawab makash dah mmpir k blg sya,,,god blogger

      ReplyDelete
    8. Thanx infona gan...

      ReplyDelete
    9. Thank you udah share ilmu buat pemula..

      ReplyDelete
    10. kata .post { itu diantara .post dg { gk ada space nyA.......

      ReplyDelete
    11. Wah thanks Gan Jadi :D...

      ReplyDelete
    12. thanks yah..sekarang saya ngebuat blog jadi lebih bagus...

      ReplyDelete

    Maaf Bukan Bermaksud apa,impian relugais12 hanya ingin memberi tahukan,setiap anda yang membaca artikel di atas tersebut,wajib mengisi post komentar anda di bawah ini,karna itu lbih memudahkan saya untuk mencoba apa yang kalian komentar,,,,
    pliiiizzzzsssss NO SPAM,^_^,NO PORN

    Add 'Q y Sobat Sxli'n

    SmSan Yukxs

    Make Widget

    Link Keren

    free web site traffic and promotion membuat blog terlihat berarti Free Link Exchange membuat blog terlihat berarti

    Ayo Kita nonton TV live

    Photobucket