Cari Artikel Blog Ini

Total Tayangan Halaman

CARA MEMBUAT MULTI SIDEBAR ( 6 BUAH )

Postingan ini dikhususkan untuk blog yang selama ini mengikuti postingan EPG Studio dan yang telah memiliki tiga sidebar yaitu sidebar atas dan yang duanya ada dibawah sidebar atas.
Jika anda belum melengkapi dengan ketiga sidebar tersebut silahkan kunjungi postingan ini untuk membuatnya :

Setelah sidebar anda menjadi tiga, barulah anda lanjutkan baca postingan ini.
Tiga sidebar yang dimiliki EPG Studio diberi nama : Sidebar-wrapper, Sidebarbaru-wrapper dan Sidebaratas-wrapper.
Tiga sidebar yang akan ditambahkan harus memiliki ukuran yang sama dengan ketiga sidebar diatas dan penamaannya harus berbeda dengan nama sidebar yang telah ada.
Nama sidebar yang ditambahkan di blog EPG Studio diberi nama sebagai berikut :
  1. Sidebartengah-wrapper : memiliki ukuran sama dengan sidebar atas wrapper.
  2. Sidebarbawah-wrapper : memiliki ukura yang sama dengan sidebar-wrapper.
  3. Sidebarbawahbaru-wrapper : memiliki ukuran yang sama dengan sidebarbaru-wrapper.

Setelah siap dengan nama ketiga sidebar yang akan ditambahkan, ikuti langkah-langkah berikut ini :
  1. Masuk ke Edit HTML.
  2. Back up dulu templatenya kalau takut gagal.
  3. Cari kode ini :
    #sidebarbaru-wrapper {
    width: 230px;
    float: right;background:#0066CC; border:0px solid $bordercolor;white;
    padding:5px 5px .25em;
    padding-left:5px;
    word-wrap: break-word;
    overflow: hidden;
    }

    (mungkin pada sebagian template memiliki istilah yang berbeda).
  4. Copy kode dibawah ini kemudian paste tepat dibawah kode tadi :
    #sidebartengah-wrapper {
    border: 0px solid #0066CC;
    background:#3D81EE;
    width:470px;
    float:right;
    padding:5px;
    margin-bottom:5px;
    }

    #sidebarbawah-wrapper {
    width: 230px;
    float: $endSide;background:#0066CC; border:0px solid $bordercolor;white;
    padding:2.5px 2.5px 2.5px .5em;
    word-wrap: break-word;
    overflow: hidden;
    }
    #sidebarbawahbaru-wrapper {
    width: 230px;
    float: $endSide;background:#0066CC; border:0px solid $bordercolor;white;
    padding:5px 5px .25em;
    word-wrap: break-word;
    overflow: hidden;
    }

  5. Selanjutnya cari kode ini :
    <div id="sidebarbaru-wrapper">
    <b:section class="sidebar" id="sidebarbaru" preferred="yes"></div><lu>


    Copy kode dibawah ini kemudian paste tepat diatas kode tadi.


    <div id='sidebarbawahbaru-wrapper'>
    <b:section class='sidebarbawahbaru-wrapper' id='sidebarbarubawah-wrapper' showaddelement='yes'>
    </b:section>
    </div>

    <div id='sidebarbawah-wrapper'>
    <b:section class='sidebarbawah-wrapper' id='sidebarbawah-wrapper' showaddelement='yes'>
    </b:section>
    </div>

    <div id='sidebartengah-wrapper'>
    <b:section class='sidebaratas' id='sidebartengah' showaddelement='yes'>
    </b:section>
    </div>


  6. Klik tombol Simpan template


Jika ingin sidebar yang baru kita tambahkan tampil dalan bentuk kotak-kotak, lakukanlah langkah-langkah berikut.
  1. Masih di Edit HTML.
  2. Cari kode ini .sidebaratas .widget{ untuk menempatkan sidebartengah .widget
  3. Copy seluruh kode dibawah ini kemudian paste tepat dibawahnya.


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



  4. Cari kode ini .sidebar .widget{ untuk meletakan .sidebarbawah-wrapper .widget{ dan .sidebarbawahbaru-wrapper .widget{
  5. Copy seluruh kode dibawah ini dan paste tepat diatas kode .sidebar .widget{


    .sidebarbawah-wrapper .widget{
    background:#3D81EE;
    border:2px solid #66B5FF;
    margin:0 0 0.5em;
    padding:0.5em;
    }

    .sidebarbawahbaru-wrapper .widget{
    background:#3D81EE;
    border:2px solid #66B5FF;
    margin:0 0 0.5em;
    padding:0.5em;
    }

  6. Warna yang digunakan pada tips ini semuanya merupakan warna yang digunakan pada EPG Studio. Silahkan anda ganti sesuai dengan warna kesukaan anda.
  7. Setelah selsai pengeditan klik Tombol Simpan Template.
  8. Isilah sidebar baru dengan sesuatu yang bermanfaat bagi blog anda.
  9. Selamat mencoba, semoga berhasil dan bermanfaat...!!!



Sekali lagi lagi postingan ini khusus untuk blog yang telah mengikuti postingan EPG Studio dan yang telah menambah sidebar menjadi 3 buah.

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
3 Comments

3 komentar :

Full Album Mp3 + Softwere + Photoshop + Serial Number + Ebook + Mobile, All Free Download mengatakan...

gimana cara buat yang persi multi idebar yang sanggat praktis?tolong donk?

share computer mengatakan...

makasih infonya :)

Aquarium fish mengatakan...

thanks for share..

Posting Komentar

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