Tadi pagi blog saya baik-baik saja, namun menjelang siang ada keanehan yakni hilangnya link older post dan newer post. Semula saya sempat mengira link itu memang hilang dan berniat menambahakannya lagi ke template, namun ternyata di browser lain link tersebut tetap tampil. Nah apa yang terjadi dengan firefox? Ternyata link tersebut seakan ngumpet dan bergeser jauh dari seharusnya. Ini yang tidak saya mengerti, mencari info ke firefox tidak ada pemberitahuan. Hal sama terjadi ketika banyak template yang elemennya kacau di Firefox hari ini. Dan kembali algi yang paling banyak mengalami termasuk saya adalah hilangnya older post dan newer post link.
Untuk mengatasinya Anda cukup mengubah bagian css blog-pager Anda.
- Silahkan login blogger, Tata Letak lalu pilih Edit HTML
- Cari kode css berikut ini
#blog-pager-newer-link{.............................}
#blog-pager-older-link{.............................}
#blog-pager{..............................}
#blog-pager-older-link{.............................}
#blog-pager{..............................}
titik-titik adalah kode css yang tentu bisa berbeda setiap template.
Cari kode tersebut dan untuk lebih mudahnya ganti saja dengan css berikut ini:
#blog-pager-newer-link{float:left; line-height:1.8em; font-weight:bold}
#blog-pager-older-link{float:right; line-height:1.8em; font-weight:bold}
#blog-pager{width:565px; float:left; text-align:center; line-height:1.8em; font-weight:bold; color:white}
#blog-pager-older-link{float:right; line-height:1.8em; font-weight:bold}
#blog-pager{width:565px; float:left; text-align:center; line-height:1.8em; font-weight:bold; color:white}
Sesuaikan yang berwarna merah dengan lebar pada css main-wrapper Anda. Cari kode css main-wrapper dan lihat lebarnya yang ditandai dengan kode width. Gunakan ukuran yang tertera untuk kode berwarna merah tersebut.
Tambahan... Bagi Template Dengan 2 Lebar Main-Wrapper
Ini saya tambahkan karena banyaknya pertanyaan yang masuk. Yang saya maksud dengan template dengan 2 main-wrapper adalah template dengan lebar area postingan yang berbeda ketika di homepage dan ketika Anda masuk salah satu postingan. Karena pada dasarnya pembenahan ini memasukkan dua kunci utama yakni float: left; dan penyesuaian lebar area postingan, maka untuk template dengan dua main-wrapper kodenya pun harus dua. Lakukan langkah-langkah di atas sebelumnya. Kemudian ikuti tambahan tutorial berikut ini...
- Cari kode main-wrapper kedua, misal di template Magazine R.1.5 Kang Rohman lebar main-wrapper pertama adalah 617px (ini lebar secara umum dan dibenahi dengan tutorial pertama tadi), nah untuk magazine R.1.5 main-wrapper kedua memiliki lebar 315px. Maka carilah kode main-wrapper kedua (kode lebar postingan bersyarat, karena lebar hanya aktif saat berada di homepage, selain homepage blog memanggil lebar secara umum). Anda bisa menemukan lebar main-wrapper kedua dengan rambu-rambu berikut:
Ini saya tambahkan karena banyaknya pertanyaan yang masuk. Yang saya maksud dengan template dengan 2 main-wrapper adalah template dengan lebar area postingan yang berbeda ketika di homepage dan ketika Anda masuk salah satu postingan. Karena pada dasarnya pembenahan ini memasukkan dua kunci utama yakni float: left; dan penyesuaian lebar area postingan, maka untuk template dengan dua main-wrapper kodenya pun harus dua. Lakukan langkah-langkah di atas sebelumnya. Kemudian ikuti tambahan tutorial berikut ini...
- Cari kode main-wrapper kedua, misal di template Magazine R.1.5 Kang Rohman lebar main-wrapper pertama adalah 617px (ini lebar secara umum dan dibenahi dengan tutorial pertama tadi), nah untuk magazine R.1.5 main-wrapper kedua memiliki lebar 315px. Maka carilah kode main-wrapper kedua (kode lebar postingan bersyarat, karena lebar hanya aktif saat berada di homepage, selain homepage blog memanggil lebar secara umum). Anda bisa menemukan lebar main-wrapper kedua dengan rambu-rambu berikut:
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#main-wrapper { width:365px; float:left; padding:0px; margin-top:0px; margin-right:5px; margin-bottom:0px; margin-left:10px; display:inline; }
</b:if>
</style>
<b:if cond='data:blog.pageType != "item"'>
#main-wrapper { width:365px; float:left; padding:0px; margin-top:0px; margin-right:5px; margin-bottom:0px; margin-left:10px; display:inline; }
</b:if>
</style>
Seperti dapat Anda pehatikan di atas untuk css main-wrapper yang kedua diawali dengan syarat. Nah, sekarang Anda juga harus membuat satu lagi css blog-pager untuk dimasukkan ke area tersebut. Misalkan untuk template tersebut menjadi:
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#blog-pager-newer-link{float:left; line-height:1.8em; font-weight:bold}
#blog-pager-older-link{float:right; line-height:1.8em; font-weight:bold}
#blog-pager{width:365px; float:left; text-align:center; line-height:1.8em; font-weight:bold; color:white}
#main-wrapper { width:365px; float:left; padding:0px; margin-top:0px; margin-right:5px; margin-bottom:0px; margin-left:10px; display:inline; }
</b:if>
</style>
<b:if cond='data:blog.pageType != "item"'>
#blog-pager-newer-link{float:left; line-height:1.8em; font-weight:bold}
#blog-pager-older-link{float:right; line-height:1.8em; font-weight:bold}
#blog-pager{width:365px; float:left; text-align:center; line-height:1.8em; font-weight:bold; color:white}
#main-wrapper { width:365px; float:left; padding:0px; margin-top:0px; margin-right:5px; margin-bottom:0px; margin-left:10px; display:inline; }
</b:if>
</style>
Sekarang dijamin older dan newer post link Anda akan normal di template dengan dua macam lebar area psotingan. Sedikit tambahan dari tutorial tadi malam. Semoga bermanfaat....
Wah bisa jadi blog saya mengalami perubahan seperti yang dimaksud pada artikel ini yaitu recent post hilang..coba cek disidebar kiri blog saya pada recent post kosong gan..
ReplyDelete