TAMBAH LAGI SIDEBAR BLOG ANDA JADI 3 BUAH


Perhatikan Penampilan EPG Studio pada bagian sidebar. Sekarang peampilan sidebarnya menjadi 3. Satu memanjang dibagian atas dan yang duanya lagi ada dibagian bawah. Sidebar yang memanjang itu memiliki lebar yang sama dengan kedua sidebar dibawahnya.
Bagi anda yang menambah sidebar ketiga, ikuti langkah-langkahnya.

  • Sign ke Blogger.
  • Pilih Rancangan.
  • Pilih Edit HTML.
  • Back up dulu template anda.
  • Tombol pada Expand Tempate Widgetnya tidak perlu dikasih tanda contreng.
  • Cari kode #sidebar
  • Copy kode dibawah in dan paste diatas kode tadi.

    #sidebaratas-wrapper {
    border: 1px solid #FFFFFF;
    background:#FFFFFF;
    width:470px;
    float:right;
    padding:5px;
    margin-top:10px;
    }


    ubahlah kode tersebut sesuai dengan lebar dari kedua sidebar yang sudah ada dengan menjumlahkan width dari kedua sidebar ditambah padding dan margin.
    Contoh sidebar yang digunakan pada EPG Studio (kode ini hanya untuk contoh saja)

    #sidebaratas-wrapper { /*Sidebar yang ditambahkan*/
    border: 1px none #FFFFFF;
    background:#0000b3;
    width:470px;
    float:right;
    padding:5px 5px .25em;
    margin-bottom:10px;
    }
    #sidebar-wrapper { /*sidebar lama*/
    width: 260px;
    float: $endSide;background:#0000b3; border:0px solid $bordercolor;white; padding:5px 5px .25em;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #sidebarbaru-wrapper {/*sidemar lama*/
    width: 200px;
    float: right;background:#0000b3; border:0px solid $bordercolor;white; padding:5px 5px .25em;
    psdding-left:5px;
    word-wrap: break-word;
    overflow: hidden;
    }
  • Setelah selesai mengubah lebar sidebar baru, cari kode seperti ini :

    <div id='crosscol-wrapper' style='text-align:center'>
    <b:section class='crosscol' id='crosscol' showaddelement='no'/>
    </div>
  • Copy kode dibawah ini kemudian paste tepat dibawah kode tadi :

    <div id='sidebaratas-wrapper'>
    <b:section class='sidebaratas' id='sidebaratas' showaddelement='yes'>
    </b:section>
    </div>
  • Klik tombol Simpan Template.
  • Selesai...Lihat Blog baru anda sekarang


Jika sidebar atas ingin ditampilkan dalam bentuk kotak-kotak ikuti langkah berikut ini :


  • Masih di edit HTML.
  • Cari kode ini :


    /* Sidebar Content
    ----------------------------------------------- */
  • Copy seluruh kode dibawah unu kemudian paste tepat dibawah kode tadi
    .sidebaratas {
    color: $sidebartextcolor;
    line-height: 1.5em;
    }

    .sidebaratas ul {
    list-style:none;
    margin:0 0 0;
    padding:0 0 0;
    }
    .sidebaratas li {
    margin:0;
    padding-top:0;
    padding-$endSide:0;
    padding-bottom:.25em;
    padding-$startSide:15px;
    text-indent:-15px;
    line-height:1.5em;
    }
    .sidebaratas .widget{
    background:#3D81EE;
    border:2px solid #66B5FF;
    margin:0 0 0.25em;
    padding:0.5em;
    }


    Ubahlah kode yang berwarna merah sesuai dengan keinginan anda
  • Setelah selesai pengeditan, klik Tombol Simpan Template.
  • Lihat perubahan pada blog anda.


Tidak ada komentar:

Posting Komentar

Popular Posts

Archives

Download

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes