Home / tutorial blog / Menambah Elemen Di Bawah Sidebar

Menambah Elemen Di Bawah Sidebar

Sedikit Info Seputar Menambah Elemen Di Bawah Sidebar Terbaru 2017 - Hay gaes kali ini team Official Sahabat Android, kali ini akan membahas artikel dengan judul Menambah Elemen Di Bawah Sidebar, kami selaku Team Official Sahabat Android telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Official Sahabat Android. semoga isi postingan tentang Artikel tutorial blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Menambah Elemen Di Bawah Sidebar Terbaru
link: Menambah Elemen Di Bawah Sidebar

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Menambah Elemen Di Bawah Sidebar Terbaru dan Terlengkap 2017

Postingan kali ini saya akan memberikan penjelasan mengenai cara menambah elemen (add gadget) di bawah sidebar yang sudah ada. Postingan ini sebenarnya karena permintaan dari sahabat saya Propolis Club yang meminta penjelasan cara menambah 2 elemen di bawah sidebar "kalau sidebarnya yang di bagi duanya sebagian aja jdi ngak semuanya jadi dua kolom gimana sob, mohon pencerahan trims". Untuk contoh gambar bisa anda lihat di bawah ini, ada penambahan dua kolom elemen sidebar di bawah sidebar utama. Artinya, dua kolom sidebar tersebut masih merupakan bagian dari sidebar-wrapper.

elemen bawah sidebar

Berbeda dengan posting terdahulu membagi sidebar menjadi 2 kolom yang menjadikan sidebar utama terbagi dua. Jika tertarik, temukan perbedaannya antara tutorial yang itu dengan tutorial yang sedang anda baca sekarang ini. Seperti biasa, perbedaan kode CSS pada template pasti ada namun tidak banyak. Silahkan menyesuaikan dengan desain template anda. Oke langsung saja kita pada langkah-langkah pembuatannya :
  1. Seperti biasa login ke blogger dengan akun anda
  2. Kemudian masuk ke menu Tata Letak
  3. Setelah itu pada tab menu, klik Edit HTML
  4. Jangan lupa 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. Ganti nilai width 220px; dan properti float: $startSide; dengan nilai sidebar anda. Misalnya width: 350px dan properti menjadi float: right; sehingga secara keseluruhan menjadi 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. Sekarang tambahkan kode berikut di bawah kode tadi
    #left-col {
    width:170px;
    float:left;
    word-wrap:break-word;
    overflow:hidden;
    }
    #right-col {
    width:170px;
    float:right;
    word-wrap:break-word;
    overflow:hidden;
    }
    Secara keseluruhan kodenya 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;
    }
  8. Sekarang kita akan membuat id untuk sidebar left-col dan right-col tersebut. Cari kode ini:
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    <b:widget id= dan seterusnya....
    </div>
  9. Sisipkan kode berikut di bawah <b:widget id= dan seterusnya.... :
    <b:section class='sidebar' id='left-col' preferred='yes'/>
    <b:section class='sidebar' id='right-col' preferred='yes'/>
    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'/>
    </div>
  10. Sekarang klik tombol SIMPAN TEMPLATE
  11. Selesai
Silahkan masuk ke Tata Letak lalu klik Elemen Halaman. Maka disana sudah ditambahkan dua kolom elemen sidebar di bawah sidebar utama. Silahkan elemen baru tersebut mau diisi apa saja. Kalau saya, diisi dengan categories dan buku tamu (lihat sidebar), tapi bisa juga anda isi dengan artikel bagus yang menurut anda layak untuk dibaca atau good articles. Demikian tutorial menambah elemen di bawah sidebar, semoga bermanfaat dan selamat mencoba.

Itulah sedikit Artikel Menambah Elemen Di Bawah Sidebar terbaru dari kami

Semoga artikel Menambah Elemen Di Bawah Sidebar yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Official Sahabat Android. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Menambah Elemen Di Bawah Sidebar

Share this