Cari Artikel Blog Ini

Total Tayangan Laman

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.


Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
7 Comments

7 komentar :

gusti&hana mengatakan...

wah...,boleh di coba nih...,thx...

Anonim mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Anonim mengatakan...

:)) boleh dicoba nih...thanks yah...!!!

SUNU BUDIMAN mengatakan...

Thanks Pak ilmunya...

Santai Disini bersama saya Jianto mengatakan...

Wah ini dia trik yg ditunggu2, ijin mempraktekan di blog aku ya brode' , ntar kalo berhasil aku kabarin deh...Trims..

computer tablet mengatakan...

manstab thanks ya..info nya

TK.Tunas Harapan mengatakan...

mantappp

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!