Sabtu, 12 Januari 2013

Cara Mudah Membagi Dua Kolom Header Di Blog

بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ اارَّØ­ِيم

Cara MUDAH Membagi Dua Kolom Header Di Blog | Tips Blog | Cara Mudah Membuat Dua Kolom Header Di Blogspot -  Posting kaili ini Kolom Blog GRATIS akan berbagi cara Cara MUDAH Membagi Dua Kolom Header Di Blog | Tips Blog | Cara Mudah Membuat Dua Kolom Header Di Blogspot, perlu di ketahui bahwa desain template (baca:Template Blogspot Keren dan SEO Friendly) itu sangat komplek dan menggunakan banyak teknik, agar terfokus KBG mengambil sampel template magazine yang sobat ingin mengetahui teknik ini, sobat harus terlebih dahulu download (http://kolombloggratis.blogspot.com/2012/01/free-download-templates-blogger.html) & KBG sarankan jangan pada blog kesayangan sobat tapi buatlah blog uJI Coba, Berikut perhatikan langkah Cara MUDAH Membagi Dua Kolom Header Pada Blog :
  1. Login ke blogger lalu Klik rancangan - Klik tab elemen Halaman - Klik tab Edit HTML cari kode seperti ini :
    /* Header
    ===================================
    */
    #header-wrapper {
    width:900px;
    margin:0 auto 0px;
    background:$bgheadercolor url(http://kolombloggratis.blogspot.com/2011/02/cara-membagi-dua-kolom-header.html) no-repeat top center;
    height:190px;
    }

    #header-inner {
    width:900px;
    background-position: center;
    margin-$startSide: auto;
    margin-$endSide: auto;
    }

    #header {
    margin: 0px;
    text-align: left;
    color:$pagetitlecolor;
    }
  2. Ganti dengan kode berikut ini :
    /* Header
    ===================================
    */

    #header-wrapper {
    width:900px;
    margin:0 auto 0px;
    background:$bgheadercolor url(http://kolombloggratis.blogspot.com/2011/02/cara-membagi-dua-kolom-header.html) no-repeat top center;
    height:190px;
    }

    #head-inner {
    width:600px;
    background-position: left;
    margin-left: auto;
    margin-right: auto;
    float:left;
    }

    #header {
    margin: 0px;
    text-align: left;
    color:#ffcc66;
    }

    #r_head{
    width:300px;
    float:left;
    padding-top:10px;
    }
  3. Coba scroll ke bagian bawah, dan temukan kode seperti ini :
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
    </b:section>
    </div>
  4. Ganti dengan kode di bawah ini, lalu simpan template :
    <div id='header-wrapper'>
    <div id='head-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
    </b:section>
    </div>
    <div id='r_head'>
    <b:section class='header' id='header2' preferred='yes'/>
    </div>
    </div>

Sumber : http://kolombloggratis.blogspot.com/2011/02/cara-membagi-dua-kolom-header.html#ixzz2Hq19daSK

4 komentar:

  1. makasih infonya, sangat bermanfaat.......kita tunggu bantuan kunjungan baliknya ke link kita

    BalasHapus
  2. thanks infonya bermanfaat sekali,..

    BalasHapus
  3. @Teknik sipil Terimakasih juga, semoga anda betah mampir di rumah digital aku ini. :)

    BalasHapus
  4. @kolom trimakasih bila isi artikel ini bermanfaat bagi anda.

    BalasHapus