Posted by : Unknown Jumat, 18 Januari 2013

Cara Membuat Dua Kolom Widget Dibawah Postingan adalah cara yang sama ketika membuat dua kolom dibawah header atau kolom-kolom widget yang lainnya hanya perbedaann kode, perbedaan tata letak dan perbedaan cara saja. Seperti halnya fungsi dan manfaat saat membuat satu kolom widget dibawah postingan, manfaat dua kolom widget ini juga lebih maksimal karena ada link artikel yang sejajar antara kolom yang satu dengan yang lainnya (kolom kanan kiri) seperti yang terlihat pada blog saya ini, sayang kolom yng sebelah kanan masih kosong :)

Cara membuat dua kolom widget dibawah postingan ini sebenarnya ada dua cara yang bisa dilakukan yaitu kita bisa benar-benar membuat dua kolom dibawah postingan dan hasilnya bisa terlihat di menu Tata Letak, sedanghkan yang satunya lagi, kita membuat dua kolom dibawah postingan tapi hasilnya tidak terlihat di menu Tata Letak seperti yang saya gunakan pada template blog ini (nanti akan saya share juga..)

Cara Membuat Dua Kolom Widget Dibawah Postingan

Berikut Cara Membuat Dua Kolom Widget Dibawah Postingan
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode berikut ini
    #main-wrapper {float:left;margin-right:10px;overflow:hidden;width:507px;word-wrap:break-word;}
  4. Letakkan kode berikut tepat dibawah kode no.3
    #twounderposting {width:100%;float:center;margin:10px 0;padding:0px;}
    #twounderpostingleft{width: 45%;float: left;}
    #twounderpostingright{width: 45%;float: right;}

    • Atau jika anda tidak menemukan kode #main-wrapper karena perbedaan kode pada template, cari saja kode ]]></b:skin>
    • letakkan kode berikut tepat diatas kode ]]></b:skin>
      #twounderposting {width:100%;float:center;margin:10px 0;padding:0px;}
      #twounderpostingleft{width: 45%;float: left;}
      #twounderpostingright{width: 45%;float: right;}
  5. Cari kode berikut ini
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </div>
  6. Letakkan kode berikut sebelum kode penutup pada no.5
    <div id='twounderposting'>
    <div id='twounderpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
    <b:section class='main' id='twounderpostingleft' preferred='yes' style='float:center;'/>
    </div>
    <div id='twounderpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
    <b:section class='main' id='twounderpostingright' preferred='yes' style='float:right;'/>
    </div>
    </div>

    Sehingga hasilnya akan terlihat seperti berikut ini
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section
    >
    <div id='twounderposting'>
    <div id='twounderpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
    <b:section class='main' id='twounderpostingleft' preferred='yes' style='float:center;'/>
    </div>
    <div id='twounderpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
    <b:section class='main' id='twounderpostingright' preferred='yes' style='float:right;'/>
    </div>
    </div>

    </div>
  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak
Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda
Sekian, jika ada permasalahan dalam membuat dua kolom widget dibawah postingan, silahkan tinggalkan komentar anda untuk artikel ini, Cara Membuat Dua Kolom Widget Dibawah Postingan

Description: Cara Membuat Dua Kolom Widget Dibawah Postingan
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Dua Kolom Widget Dibawah Postingan

Leave a Reply

Monggo Tinggalkan Jejak Kaks :)

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Popular Post

Labels

Arsip Blog

Followers

- Copyright © 2013 shad0w-share | Designed by Johanes Djogan -