Menambah 2 Kolom Dibawah Postingan ini merupakan panduan blogger
yang memaksimalkan halaman postingan blog. Dengan menambah 2 kolom
dibawah postingan kita dapat memaksimalkan serta mengisi ruang kosong
dan menambahka widget yang kita inginkan. Banyak para blogger yang sudah
menggunakan teknik ini, dan biasanya mereka menambahkan widget artikel terkait dan juga kotak berlangganan email.
Sebenarnya banyak manfaat ketika
kita menggunakan teknik ini, diantaranya tidak menjejali sidebar blog
yang berpengaruh dengan kecepatan loading blog. Hal ini sering diabaikan
oleh para blogger yang
keasikkan untuk mempercantik blog dengan widget-widget yang notabanenya
tidak telalu penting. Untuk itu jika anda tertarik untuk memaksimalkan
halaman postingan blog Anda dengan menambah 2 kolom dibawah postingan, perhatikan tutorial berikut ini.
1. Login ke akun blogger Anda
2. Kemudian klik rancangan
3. Klik Edit HTML
4. Untuk berjaga-jaga dan mencegah hal-hal yang tidak diinginkan jika terjadi kesalahan, download terlebih dahulu template anda.
5. Beri centang/ceklis pada kotak Expand Template Widget
6. Lanjutkan dengan mencari kode ]]></b:skin> (gunakan ctrl + f untuk mempermudah pencarian)
7. Jika sudah dapat, sisipkan kode berikut diatas kode ]]></b:skin>
.bawahpost {{margin:5px 0px 10px 0px;padding:5px 0;clear:both;}}
.bawahkiri {float:left;width:305px;margin-right:5px;border: 1px solid #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;}
.bawahkanan {float:right;width:305px;border: 1px solid #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;}
Rekomendasi : Agar ukuran kode CSS menjadi lebih kecil, saya
merekomendasikan dan menyarankan kepada Anda untuk mengkompres kode css
diatas. Hal ini dilakukan untuk menghindari lambatnya loading blog yang
anda miliki. Anda dapat menguunakan CSS compressor tool yang telah saya
sediakan dan sangat mudah dalam penggunaannya.
8. Lalu lanjutkan dengan mencari kode <data:post.body/> jika Anda telah menggunakan fungsi readmore, kode tersebut ada 2, kemudian
9. Masukkan kode berikut ini dibawah kode <data:post.body/> yang kedua/yang terakhir
<b:if cond='data:blog.pageType == "item"'>
<div class='bawahpost'>
<div class='bawahkiri'>
Kode Widget atau tulisan anda ada di sebelah kiri disini</div>
<div class='bawahkanan'>
Kode Widget atau tulisan anda ada di sebelah kanan disini</div>
</div>
</b:if>
Untuk tulisan yang berwarna merah, silahkan Anda hapus dan ganti dengan kode widget yang Anda inginkan kemudian sesuikan width: 305px (lebar kotak) dengan keinginan Anda.
10. Save.
No comments:
Post a Comment