Sunday, February 3, 2013

8:35 PM


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

0 comments:

Post a Comment