Pernah lihat blog ketika setelah menuju ke halaman postingan, posisi postingan dan sidebarnya berpindah tempat dari posisi semula? Jika pernah dan ingin mencobanya, maka kali ini saya akan menulis tutorialnya disini untuk sobat sekalian.
Pernah lihat blognya Kang Rohman di kolom-tutorial.blogspot.com kan?! Nah, itulah contohnya blog yang dimodifikasi dengan memindahkan posisi postingan dan sidebar dari posisi semula. Cara ini memang cukup efektif mengingat kadang kala widget kita terlalu banyak dan tidak ingin untuk menghapusnya karena widget itu penting. Tentu saja cara ini cukup efektif bukan?!
Saya juga pernah membuat tutorial tentang menampilkan widget di halaman tertentu. Pada tutorial itu ditulis bagaimana kita bisa menampilkan widget di halaman tertentu. Misalnya, widget recent post hanya tampil pada homepage saja, begitu juga sebaliknya hanya ditampilkan pada halaman postingan saja. Silakan dipraktekkan saja, klik disini.
Pengen blog sobat seperti punya Kang Rohman? Ikuti tutorialnya di bawah ini!
1. Silakan sobat tuju ke halaman Edit HTML, lalu cari kode CSS berikut ini :
#main-wrapper {float: left;width: 639px;margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;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 */}
2. Setelah itu, copy kode CSS template sobat yang mirip dengan kode CSS di atas, lalu paste dan taruh kode tersebut di atas kode </head>
3. Masukkan kode yang berwarna merah. Jangan lupa ganti float: left menjadi float: right nya hingga menjadi seperti di bawah ini :
<b:if cond='data:blog.pageType == "item"'><style>#main-wrapper {float: right;width: 639px;margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;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 */}</style></b:if>
4. Nah, jika sudah semua di atas dilakukan, klik Save template dan lihat sendiri hasilnya bagaimana..
Catatan:
Biasanya jika salah satu di antara #main-wrapper dan #sidebar-wrapper diganti float nya, maka otomatis akan berpindah posisi.