15 Merubah Posisi Sidebar & Main Pada Template Blogger

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

InsyaAllah kali ini saya ingin berbagi trik mudah bahkan sangat sederhana, yang saya temukan hasil dari otak-atik CSS saat mencoba mendesain template baru. Yaitu cara merubah posisi sidebar dan main (kolom utama tempat postingan) pada template blogger, sebagai contoh tampilan elemen halaman template default minima seperti image berikut:

Merubah Posisi Sidebar Dan Main Pada Template Blogger

Dari gambar diatas kita bisa melihat posisi sidebar berada disebelah kanan, sedangkan kolom utama disebelah kiri. Untuk merubah posisi sidebar dan main menjadi sebaliknya seperti gambar dibawah ini, mudah saja silahkan ikuti tutorial berikut:

Merubah Posisi Sidebar Dan Main Pada Template Blogger

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Cari kode berikut:

#main-wrapper {
  width: 410px;
  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 */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  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 */
}

3. Yang perlu diperhatikan hanya tulisan yang berwarna merah, silahkan ganti dengan kode berikut:

#main-wrapper {
  width: 410px;
  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 */
  }

#sidebar-wrapper {
  width: 220px;
  float: left;
  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 */
}

4. Simpan template. Silahkan lihat hasilnya pada bagian elemen halaman.

InsyaAllah postingan berikutnya saya akan mengetengahkan trik CSS dan HTML lainnya, yaitu cara menambahkan 4 kolom/ elemen halaman baru diatas footer.


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

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

15 komentar :

  1. waahhh keren ini...
    bisa langsung dicoba..
    terimakasih banyak sobat atas tutorial yang keren2 disini :D

    BalasHapus
  2. kalau aq lebih suka sidebar berada di kanan sob

    BalasHapus
  3. @ sehat-mu: makasih jg apresiasinya
    @ rizky: iya menurut ilmu desain untuk org indo yang tulisannya dibaca dari kiri kekanan, sidebar disebelah kanan mmg lebih baik, selain saat loading page yg lebih dulu tampil adalah postingan bukan widget jadi perhatian pengunjung jg lebih utama dan dahulu ke postingan sebelum ragam widget dan aksesoris blog.

    tapi selera org khn berbeda2

    BalasHapus
  4. terima kasih atas infonya.....

    BalasHapus
  5. misalnya kolom posting blog/ main di hide dari home bisa gak ???

    BalasHapus
  6. blog saya ngak bisa dirubah pisisinya.apa solusinya

    BalasHapus
  7. kalo menambhakan 2 elemen di bawah postingan gimana ya.....?????

    BalasHapus
  8. tankiyu tutornya bos.. langsung praktek

    BalasHapus
  9. nice gan

    bermanfaat
    follback ya gan

    BalasHapus
  10. terimakasih ilmunya sob..
    sangat bermanfaat
    kebetulan saya jg pengen desain template n header blog saya,

    salam kenal.

    BalasHapus
  11. kalau merubah sidebar ke bawah bloggimna caranya

    BalasHapus
  12. Terima kasih infonya, sangat membantu :)

    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!