18 Menambah Elemen Dibawah Dua Sidebar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Sebelumnya saya pernah posting cara menambahkan elemen (dua kolom tambah gadget) dibawah sebuah sidebar utama.
 menambahkan elemen (dua kolom tambah gadget) dibawah sebuah sidebar utama
Postingan kali ini trik menambah elemen halaman dibawah dua kolom atau sidebar yang telah saya buat kemarin.
Seperti gambar dibawah ini:
menambah elemen halaman dibawah dua kolom atau sidebar

Menambah elemen di bawah dua sidebar

  1. Login ke blogger dengan id anda
  2. Masuk ke menu Tata Letak
  3. Pada tab menu, klik Edit HTML
  4. Backup template anda, klik Download Template Lengkap
  5. Sekarang cari kode ini :
    #sidebar-wrapper {
    width: 220px;
    float: $startSide;
    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. Silahkan diganti dulu nilai width 220px; dan properti float: $startSide; dengan nilai lebar sidebar yang anda rencanakan. Misalnya width: 350px dan properti menjadi float: right; Jadinya seperti ini :
    #sidebar-wrapper {
    width: 350px;
    float: right;
    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. Jika anda telah membuat dua sidebar di bawah sidebar utama seperti pada tutorial yang sebelumnya, silahkan tambahkan hanya kode yang berwarna hijau saja.
    #left-col {
    width:170px;
    float:left;
    word-wrap:break-word;
    overflow:hidden;
    }
    #right-col {
    width:170px;
    float:right;
    word-wrap:break-word;
    overflow:hidden;
    }
    #bottom-col {
    width:350px;
    float:right;
    word-wrap:break-word;
    overflow:hidden;
    }
    Sehingga kodenya akan menjadi seperti ini :
    #sidebar-wrapper {
    width: 350px;
    float: right;
    $startSide
    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 */
    }
    #left-col {
    width:170px;
    float:left;
    word-wrap:break-word;
    overflow:hidden;
    }
    #right-col {
    width:170px;
    float:right;
    word-wrap:break-word;
    overflow:hidden;
    }
    #bottom-col {
    width:170px;
    float:right;
    word-wrap:break-word;
    overflow:hidden;
    }
  8. Sekarang buat kode HTML untuk bottom sidebar yang dinamai sebagai "bottom-col" tersebut. Carilah kode ini :
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    <b:widget id= dan seterusnya...
    <b:section class='sidebar' id='left-col' preferred='yes'/>
    <b:section class='sidebar' id='right-col' preferred='yes'/>
    </div>
  9. Sisipkan kode berikut di bawah kode tadi :
    <b:section class='sidebar' id='bottom-col' preferred='yes'/>
  10. Sehingga secara keseluruhan menjadi seperti ini :
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    <b:widget id= dan seterusnya....
    <b:section class='sidebar' id='left-col' preferred='yes'/>
    <b:section class='sidebar' id='right-col' preferred='yes'/>
    <b:section class='sidebar' id='bottom-col' preferred='yes'/>
    </div>
  11. Sekarang klik tombol SIMPAN TEMPLATE
  12. Selesai
Untuk melihat hasilnya masuk ke elemen halaman, semoga berhasil!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

18 komentar :

  1. mohon izin di copy ya...

    makasih...

    BalasHapus
  2. silahkan! pingin lihat blog eksperimen anaa? klik disini

    BalasHapus
  3. waduh waduh, makin keren aja artikelnya...
    aku tidak menguasai HTML...
    salut mba...
    makasih sudah berbagi.

    BalasHapus
  4. sama ukhty Narti! anaa bljr ni krn pingin buat template islami insyaAllah kdpnx

    BalasHapus
  5. sip.. lha klo pengen ditambahin diatasnya gimana..?

    BalasHapus
  6. diatas apa nie? krg jls tanyax? sblmx anaa dah posting cara buat dua sidebar diatasx?

    BalasHapus
  7. Numpang baca tips, Trims tipsnya......

    BalasHapus
  8. manteb gan,,
    minta id ym nya dunk :D

    BalasHapus
  9. langsung kupraktekin nih....

    BalasHapus
  10. wahh takpraktekin ternyata langsung bisa..makasih ya gan...

    BalasHapus
  11. sama2, trimaksh komentarx

    BalasHapus
  12. thanks yah, lg coba design blog sendiri :)

    BalasHapus
  13. terimks jg komentarx, smg berhasil!

    BalasHapus
  14. Thanks Gan, ini saya cari2 dari kemarin, cuma Di Blog anda yang ketemu, infonya bermanfaat sekali Thanks Gan http://ithedoctor.com

    BalasHapus
  15. Assalamualaikum...
    mampir Atuh....

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!