Mengubah Tampilan Template Blogger Viomagz #1 | Sidebar di Posisi Kiri

Dipostingan artikel kali ini aku ingin berbagi bagaimana cara ubah tampilan template viomagz menjadi sidebar di kiri. Tampilan viomagz defult biasanya akan menampilkan sidebar di kanan, namun kali ini kalian bisa custom sidebar blogger agar tampil di kiri.

Cara Atur Sidebar Template Viomagz Di Kiri

Template viomagz merupakan template premium dan gratis yang dibuat oleh blogger Suggeng.id. Template ini telah aku pergunakan dan modif dengan berbagai macam style, salah satunya menampilkan sidebar viomag disisi kiri. Sebelum kalian mengubah template blogger, ada baiknya kalian ikuti aturan berikut.

• Backup template agar jika error kalian tinggal upload ulang.
• Aku menggunakan template Viomagz versi 4.6.0.
• Setiap temlate akan berbeda kodenya.

Tolong perhatikan aturan di atas oke, jika sudah siap kita mulai custom viomagz sidebar dikiri blogger.

1. Masuk ke blogger.com.
2. Klik Thema > Edit HTML.
3. Cari kode CSS berikut dengan menggunakan CTRL + F agar mempermudah.

#post-wrapper {
background: transparent;
float: left;
width: 70%;
}

4. Ubah nilai bagian float: left; menjadi float: right;
5. Selanjutnya kalian cari lagi kode CSS berikut.

#sidebar-wrapper {
background: transparent;
float: right;
width: 30%;
margin: 0 auto;
}

6. Ubah nilai bagian float: right; menjadi float: left;
7. Lalu kalian cari kode CSS lagi kode berikut.

.post-container {
padding-right: 25px;
}

8. Ubah CSS padding-right: 25px; menjadi padding-left: 25px;
9. Selesai, Simpan tema dan lihat hasilnya.

Attention.

Cara mengubah sibar vimagz jadi tampil di kiri di atas hanya mengubah tampilan di blog tidak mengubah tampilan tata letak. Jadi jika kalian juga ingin mengubah posisi tata letak viomagz agar sama seperti tampilan blog yang kalian ubah, ikuti caranya berikut.

mengubah tampilan tata letak sidebar viomagz menjadi dikiri.

1. Log in blogger.com > thema > Edit HTML
2. Cari kode CSS berikut

body#layout #sidebar-wrapper{float:left;width:30%;max-width:300px;padding-top:20px}

3. Ubah nilai CSS float:right; menjadi float:left;
4. Lalu cari juga kode CSS berikut.

body#layout #post-wrapper{float:right;width:70%;max-width:700px;padding-top:20px}

5. Ubah nilai CSS float:left; menjadi float:right;
6. Cari lagi kode CSS berikut.

body#layout #post-wrapper .post-container {padding: 0 0 25px 0;}

7. Ubah nilai padding: 0 0 25px 0; menjadi padding: 0 0 0 25px;
8. Selesai.

Penutup.

Cara mengubah tampilan viomagz menjadi sibar dikiri ini telah aku terapkan di bloggerxcode, so udah pasti lancar okeh. Yang penting dalam melakukan sesuatu itu kalian harus teliti. Sekian dari kami.