Rabu, 16 Januari 2013

Cara Membuat Dua Kolom Widget Diatas Postingan

Cara Membuat Dua Kolom Widget Diatas Postingan merupakan kelanjutan dari artikel sebelumnya yaitu cara membuat satu kolom widget diatas postingan yang hanya membaginya menjadi dua kolom widget seperti yang dijelaskan pada artikel ini, cara membuat dua kolom widget diatas postingan

Cara Membuat Dua Kolom Widget Diatas Postingan

Berikut Cara Membuat Dua Kolom Widget Diatas Postingan
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode ]]></b:skin>
  4. Letakkan kode berikut diatas kode ]]></b:skin>
    #twoupperposting{margin:10px 0;padding:0px;width:100%;}
    #twoupperpostingleft{width: 45%;float: left;}
    #twoupperpostingright{width: 45%;float: right;}
  5. Cari kode <div id='main-wrapper'>
  6. Letakkan kode berikut ini tepat dibawah kode <div id='main-wrapper'>
    <div id='twoupperposting'>
    <div id='twoupperpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
    <b:section class='main' id='twoupperpostingleft' preferred='yes' style='float:center;'/>
    </div>
    <div id='twoupperpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
    <b:section class='main' id='twoupperpostingright' preferred='yes' style='float:right;'/>
    </div>
    </div>


    Sehingga hasilnya seperti ini

    <div id='main-wrapper'>
    <div id='twoupperposting'>
    <div id='twoupperpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
    <b:section class='main' id='twoupperpostingleft' preferred='yes' style='float:center;'/>
    </div>
    <div id='twoupperpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
    <b:section class='main' id='twoupperpostingright' preferred='yes' style='float:right;'/>
    </div>
    </div>

    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    <b:section class='main' id='mainbottom' showaddelement='yes'/>
    </div>
  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak
Penting: Kode diatas bekerja di template blog saya dan 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

Alangkah senangnya saya jika anda berkenan untuk meninggalkan komentar anda dalam artikel cara membuat satu kolom widget diatas postingan ini karena saya akan menjadi Follower blog anda. Terimakasih telah membaca artikel ini, Cara Membuat Dua Kolom Widget Diatas Postingan

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

16 komentar:

  1. Anaa blm smpat posting yg ini :) jadi mengingatkn. Thanks tuk sharing trbaikx.

    Tmplatex skrg jd full kolom tambah gadget ya, keren!

    BalasHapus
  2. @Amatullah Syukur senang sekali bisa dikunjungi senior saya,, mohon saran dan bimbingannya mbak jika ada salah dalam tutor ini..
    template ini masih aslinya mbak blm diapa-apain :)

    BalasHapus
  3. Info yang bagus dan menarik untuk dibaca, Saya suka mengunjungi blog ini.

    BalasHapus
  4. @Obat Pembesar Payudara terimakasih atas kunjungan anda, semoga bermanfaat

    BalasHapus
  5. mantep gan http://galleryanu.blogspot.com

    BalasHapus
  6. Hemm...
    Kode2 Yg Suruh Cari Kode Main Wrapper gk ada di blog ane :(

    BalasHapus
  7. @Jakarta-Cyber4art anda menggunakan template dari mas Sugeng, yg mana setiap kodenya telah diganti menggunakan bahasa Indonesia, untuk main wrapper di template anda hanya ada di CSS sedangkan di Htmlnya tidak ada. sebagai ganti dari main warapper silahkan anda cari dan lihat kode <div id='kotak-kontent'> di template anda. terimakasih

    BalasHapus
  8. sangat bermanfaat, ini yang saya cari untuk pemasangan iklan di atas postingan, btw terima kasih udh mau share pengalaman

    BalasHapus
  9. makasih artikelnya bagus untuk di baca

    Salam kenal...

    BalasHapus
  10. @artikel bebas okey, semoga sukses dengan pemasangan iklannya mas,, amin

    BalasHapus
  11. @casc_azhar14 sama-sama, terimakasih juga buat anda atas kunjungan serta komentarnya di artikel ini, salam kenal..

    BalasHapus
  12. Makasih infonya..
    Mampir ke blogku
    www.lamongansite.blogspot.com

    BalasHapus
  13. wahh mntap dachhh
    mksih ea...

    BalasHapus
  14. ah gak bisa !!!!!!!
    gue gak bisa bisa

    BalasHapus
  15. mbak, itukan di kode cssnya sudah ada aturan margin, padding, width, float,, jadi buat apa

    style='width: 45%; float: left; margin:0; ???
    *bukannya sok pintar,itu biar lebih efektif + maaf kalo saya ada salah karena saya belum lama ngeblog, dan salam kenal...
    kaappe.blogspot.com

    BalasHapus
    Balasan
    1. terimakasih atas perhatiannya, silahkan di lihat perbedaan dari hasil jadinya kalau memang tidak ada pengaruhnya, bisa di hapus :)

      Hapus

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

Direktori

direktori weblogger
Direktori WeBlog Indonesia