Jumat, 18 Januari 2013

Cara Membuat Dua Kolom Widget Dibawah Postingan

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

Cara Membuat Dua Kolom Widget Dibawah Postingan Rating: 4.5 Diposkan Oleh: ana sriwahyuni

23 komentar:

  1. postingan ini sangat menarik serta enak dibaca, saya berharap bisa berkunjung lagi

    BalasHapus
  2. "div id='main-wrapper'"


    script yg itu nggak ada di tempelate saya mbak,,,mohon bimbingannya

    BalasHapus
  3. @benu bolu setelah saya cek, template anda menggunakan main-inner, silahkan cari kode main-inner d template anda

    BalasHapus
  4. @diki satriuo budi silahkan semoga bermanfaat,, makasih y..

    BalasHapus
  5. Wah, ini yang saya cari.. ternyata ada disini..
    Nice shared kawan!

    ane ijin pasang diblog ane...

    BalasHapus
  6. Di template mas sugeng enggk bisa mas,,,mohon bantuannya!

    BalasHapus
  7. @NetterKu semua blog bisa kok ditambahi beberapa widget atau kolom sesuai keinginan pemiliknya, namun jika mengalami kesulitan dengan pemasangan, itu dikarenakan ada beberapa kode template yang berbeda. Begitu juga template dari Mas Sugeng, banyak kode yang sudah diganti, misalnya untuk header diganti dengan kepala dan untuk permasalahan anda, saya sarankan untuk bertanya langsung saja ke Mas Sugeng sendiri agar lebih mudah,,, atau coba cari sendiri kira-kira kode untuk dibawah postingan dari template Mas Sugeng itu menggunakan apa, pasti ada..

    BalasHapus
  8. @NetterKu okey, kalau tidak salah, setelah saya lihat kodennya, silahkan cari div id='kotak-kontent' dan letakkan kode dua kolom widget diatas sebelum penutup dari div id='kotak-kontent'

    BalasHapus
  9. Makasih ya udah mau berbagi.
    "Izin copy scriptnya".

    BalasHapus
  10. Terima kasih atas caranya mass

    BalasHapus
  11. thanks broo. kunjungi ya https://jusharno.blogspot.com

    BalasHapus
  12. makasih artikelnya dan sekalian tutornya, mau coba sekalian nih

    BalasHapus
  13. di blog Q g ada mbak kode itu, terkait dgn comment dri maz Benu Bolu sudah Q cari kode main-inner, ternyata ada dua.
    1 di .main-inner .column-right-outer {
    2. di
    yg mna ya mbak yg kompartibel...?? maksie....
    klo sempet lihat blog Q ea mbak.. di http://blogermasadepan.blogspot.com/

    BalasHapus
    Balasan
    1. ada 3 kode main-inner yg perlu diperhatikan dlm blog anda:
      1. column-left-outer merupakan elemen pembungkus utk column-left-inner yg digunakan pada sidebar kiri
      2. column-right-outer merupakan elemen pembungkus utk column-right-inner yg digunakan pada sidebar kanan
      3. column-center-inner merupakan elemen yg membungkus kolom artikel blog

      shg utk memasang widget ini k dlm template blog anda, coba cari kode berikut ini

      <div class='columns-inner'>
      <div class='column-center-outer'>
      <div class='column-center-inner'>
      <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
      </b:section>
      </div>
      </div>
      </div>

      Hapus
  14. saya test dulu ke blog saya ya gan.

    BalasHapus
  15. Balasan
    1. itu sudah menggunakan kode sederhananya dan saya yakin pasti bisa tampil, silahkan dicoba lagi

      Hapus
  16. terima kasih informasinya kk berhasil work salam kenal ya kk http://idegemilang.blogspot.com/

    BalasHapus
  17. artikel yg bermanpaat,terima kasih...!

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia