Rabu, 16 Januari 2013

Cara Membuat Dua Kolom Widget Dibawah Header

Cara Membuat Dua Kolom Widget Dibawah Header merupakan kelanjutan dari artikel sebelumnya yaitu membuat satu kolom widget diatas dan dibawah header yang pada artikel selanjutnya akan dibahas cara membuat tiga kolom widget dibawah header. Cara membuat dua kolom widget dibawah header ini juga sama ketika anda membuat kolom-kolom yang lain yang masih berada di area header blog serta memiliki fungsi dan kegunaan yang sama.

Cara Membuat Dua Kolom Widget Dibawah Header

Berikut Cara Membuat Dua Kolom Widget Dibawah Header
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode ]]></b:skin>
  4. Salin kode berikut tepat diatas kode ]]></b:skin>
    #twounderheader { clear:both; }
.twounderheader-widget { padding:0px 10px 10px 10px; }
  • Cari kode <div id='main-wrapper'>
  • Pasang kode berikut tepat diatas kode <div id='main-wrapper'>
    <div id='twounderheader'>
    <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='header' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='header' id='col2' preferred='yes' style='float:left;'/>
    </div>
    </div>
  • 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

    Semoga artikel cara membuat dua kolom widget dibawah header ini bermnafaat. Jika ada permasalahan dalam memasang kode, silahkan tinggalkan komentar anda di artikel ini, cara membuat dua kolom widget dibawah header

    Cara Membuat Dua Kolom Widget Dibawah Header Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni

    7 komentar:

    1. mantaff gan,, tapi sayang setelah saya coba kok jadinya melebihi template saya lebarnya

      BalasHapus
    2. @Warok Ponoragan sesuaikan lebarnya mas, jika pada kode diatas menggunakan % coba ganti dengan piksel (px), misal 400px, 450px atau menyesuaikan dengan lebar keseluruhan pada header blog anda

      BalasHapus
    3. Informasinya sangat bermanfaat sobat, terimakasih...

      BalasHapus
    4. sip mbak..kalau cara edit lebar template lewat HTML gmn ya mbak??

      BalasHapus
    5. Makasih info tentang tutorial blognya Bos, sangat membantu.,

      BalasHapus
    6. Sob, katanya ane berkomentar langsung agan follow.,., follow ane ya Gan.,. :)

      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