Pasang Widget 3 kolom di bawah header

image Baiklah langsung menuju lokasi pengeditan template-nya.




  • Silahkan login ke blogger.
  • Pilih Rancangan.
  • Pilih tab Edit HML.
  • Letakkan kode css berikut ini diatas kode ]]></b:skin>
    /* –- Top --*/
    #top {
    background:#fff;
    margin-top:10px auto;
    width:960px;
    overflow:hidden;
    font-size:12px;
    padding:10px;
    }

    #top h2 {
    background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;
    font-size:14pt;
    font-weight:400;
    text-align:center;
    font-style:normal;
    line-height:1.3em;
    color:#fff;
    padding:5px;
    margin-top:-10px;
    margin-left:-10px;
    margin-right:-10px;
    }

    #top ul {
    color:#333;
    margin:0;
    padding:0;
    }

    #top ul li {
    background:url(http://2.bp.blogspot.com/_7Y9pl24WpQY/SqkUYNZmPxI/AAAAAAAAA4U/se2boblD4-M/s320/b3.gif) no-repeat;
    list-style-type:none;
    border-bottom:1px dashed #CCC;
    margin:0 0 10px;
    padding:0 0 5px 20px;
    }

    #top ul li a:hover {
    margin:0px 0px 5px;
    padding:0px;
    }

    #topcenter {
    width:300px;
    float:left;
    margin-left:10px;
    background:#fff;
    padding:10px
    }

    #topleft {
    width:280px;
    float:left;
    margin-left:10px;
    background:#fff;
    padding:10px;
    }

    #topright {
    width:280px;
    float:right;
    margin-left:10px;
    background:#fff;
    padding:10px;
    }

  • Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='JUDUL BLOG SOBAT (Header)' type='Header'/>
    </b:section>
    </div>
  • Kemudian letakkan kode berikut ini tepat setelah kode diatas :
    <div id='top'>
    <b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
    </b:section>
    <b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
    </b:section>
    <b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
    </b:section>
    </div>
  • Simpan Template.

0 komentar "Pasang Widget 3 kolom di bawah header", Baca atau Masukkan Komentar

Posting Komentar

Jika artikel ini bermanfaat bisa dishare gan, tapi ingat selalu cantumkan sumber jika ingin copas artikel ini