Merubah Posisi Sidebar & Main Pada Template Blogger

Merubah Posisi Sidebar & Main Pada Template Blogger

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:
 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:

 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.

Cara lain merubah design tampilan homepage berbeda dengan halaman posting, melihat tampilan blog sendiri dengan tampilan yang monoton kadang membosankan, dengan sedikit perubahan akan bisa menghasilkan tampilan yang lebih hidup, perubahan yang dimaksud adalah membuat beda antara tampilan homepage dengan tampilan halaman postingan.

Sebagai contoh kita akan merubah tampilan posisi sidebar, diasumsikan posisi sidebar default berada pada sebelah kiri, baik itu dalam tampilan homepage maupun tampilan halaman posting, untuk membedakan tampilan homepage dengan halaman posting, kita akan merubah posisi sidebar pada halaman posting disebelah kanan, dengan kata lain tampilan homepage sidebar berada di sebelah kiri tapi waktu masuk ke halaman posting posisi sidebar berada disebelah kanan,
Untuk bisa merubah tampilan tersebut kita menggunakan gabungan kode antara CSS dan HTML <b:if.

kode HTML yang dipakai adalah :

<b:if cond='data:blog.pageType == "item"'>
Widget Kalian Disini
</b:if>

kode tersebut diatas adalah untuk menampilkan widget atau bagian template hanya tampil pada halaman posting, sebelumya pernah dibahas mengenai cara menampilkan dan menyembunyikan widget pada halaman tertentu, jika tertarik untuk mengetahuinya, kalian bisa membacanya dengan mengklik link tersebut.

Kembali ke pokok bahasan, kode yang kedua yaitu kode CSS external dengan style HTML :

<style type='text/css'> Kode CSS </style>

Bagaimana cara merubah tampilan homepage berbeda dengan tampilan halaman post?
Sebelum melakukan perubahan dalam template sebaiknya melakukan backup template terlebih dahulu dengan cara Download Full Template, selanjutnya cari kode </head> dan tempatkan kode dibawah ini diatasnya :

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>

Kode CSS

</style>
</b:if>

Kode tersebut diatas adalah untuk menampilkan bagian template hanya tampil pada halaman posting, sehingga untuk memindahkan posisi sidebar kesebelah kanan jika masuk pada halaman posting , kita cari kode CSS bagian sidebar-nya. bagi beberapa template yang kalian pakai, mungkin ada yang menggunakan bagian sidebar 2, 3 kolom, 1:2 kolom atau 1:2:1 kolom, untuk yang menggunakan sidebar banyak kolom akan sulit menentukan mana kode CSS bagian sidebar, untuk mempermudah kita ambil kode CSS bagian blog post, dengan kata lain bila sidebar berada disebelah kiri, maka blog postnya ada disebelah kanan. kode yang diambil adalah kode blog post seperti dibawah ini :

#main-wrapper {
float:right;
}

kode diatas menunjukan bahwa blog post berada pada sebelah kanan, untuk menampilkan blog post berada pada sebelah kiri pada halaman post, rubah menjadi :

#main-wrapper {
float:left;
}

sehingga kode keseluruhan menjadi seperti ini :

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>

#main-wrapper {
float:left;
}

</style>
</b:if>

Save template, dan lihat hasilnya pada bagian halaman posting dan halaman homepage, cara ini berlaku juga untuk header, footer, body dan warna font. dan bagian-bagian template lainnya untuk menjadikan berbeda pada tiap halaman.

Semoga bermanfaat,