Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Jumat, 15 Januari 2016

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 sobat
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard sobat
  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 sobat 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 sobat miliki dengan setiap panduan yang sobat dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate sobat

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




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

TOP