• put your amazing slogan here!

    Membagi Sidebar Menjadi 2 kolom


    Bagaimana untuk membuat sidebar 2 kolom tidak lah terlalu sulit. anda tinggal menambah beberapa code yang tidak terlalu banyak. tanpa lama-lama mari kita coba untuk membuat sidebar menjadi 2 kolom. contohnya seperti gambar ini:


    1. Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.




    Related Post Widget.
    Gb.1


    2. Selanjutnya pilih tab Edit Html (Gb.2). Backup template anda dengan cara klik "Download Full Template". jika nanti terjadi kesalahan hal ini akan mudah untuk mengembalikan seperti semula




    Widget Artikel Yang Berhubungan.
    Gb.2


    3. Setelah itu centang tulisan / checkbox 'Expand Widget Templates' (Gb.3).




    Artikel Terkait / Yang Berkaitan Widget.
    Gb.3

    4. Cari kode seperti dibawah ini ataupun yang mirip (karena setiap template berbeda-beda)
    #sidebar-wrapper {
    background-color: #f6f6f6;
    width:254px;
    float:$endSide;
    padding:0;
    color: $sidebarTextColor;
    font-size: 83%;
    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 */
    }
    Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.

    Catatan:
    Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.

    Sebagai contoh nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing-masing kolom akan kita beri margin sebesar 10px agar terdapat ruang jarak. Sehingga sekarang lebar masing2 sidebar menjadi 117px.

    Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.

    5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti ini

    #sidebar-wrapper {
    background-color: #f6f6f6;
    width:254px;
    float:$endSide;
    padding:0;
    color: $sidebarTextColor;
    font-size: 83%;
    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 */
    }

    #sidebar-wrapper2 {
    background-color: #f6f6f6;
    width:254px;
    float:$endSide;
    padding:0;
    color: $sidebarTextColor;
    font-size: 83%;
    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 */
    }
    6. Ganti nilai width masing-masing kolom menjadi 117px. Lalu tambahkan margin:0px 20px 0px 0px; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini

    #sidebar-wrapper {
    background-color: #f6f6f6;
    width:117px;
    float:$endSide;
    padding:0;
    color: $sidebarTextColor;
    font-size: 83%;
    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 */
    }

    #sidebar-wrapper2 {
    background-color: #f6f6f6;
    width:117px;
    float:$endSide;
    padding:0;
    margin:0px 20px 0px 0px;
    color: $sidebarTextColor;
    font-size: 83%;
    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 */
    }
    7. Setelah itu, temukan kode

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Label1' locked='false' title='kategori' type='Label'/>
    <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
    <b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
    </b:section>
    </div>
    8. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.

    9. Copy kode yang berwarna biru diatas lalu letakkan dibawah </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Jadi hasilnya menjadi seperti ini.


    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Label1' locked='false' title='kategori' type='Label'/>
    <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
    <b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
    </b:section>
    </div>

    <div id='sidebar-wrapper2'>
    <b:section class='sidebar' id='sidebar2' preferred='yes'>
    </b:section>
    </div>
    10. Jika sudah klik Save Template.
    11. Selesai. Klik Page Element untuk melihat hasilnya.


    Selamat mencoba..

    3 komentar:

    1. Thanks for posting step by step how to edit blogger template. :)

      ReplyDelete
    2. Wonderful web site. Plenty of helpful information here. I am sending it to a few friends ans also sharing in delicious. And obviously, thank you on your
      sweat!

      ReplyDelete
    3. This LVM51265 classic Boulogne hatchback croissants bought eight years ago, was still able to easily and all kinds of clothing with,

      ReplyDelete

     

    About Me

    My Photo
    Hi, Im joys, Its my dreaming to be a full-time blogger, imagining a master blogger. But until now all still the same, just an ordinary Joys, newbie a blogger who tries to writing and share information about the culture of blogging. begin actively blogging from september 2009... read more about me

    Recent Comments

    Followers