Latest Posts

Monday, May 18, 2015

Memperbaiki Page Break Error, Read More Button Tidak Tampil | Blogger




Akibat terlalu sering mengutak-atik template, baru saya sadari ada yang salah dengan tampilan Post setelah menambahkan fungsi Page Break/ Jump Break [ Read More ] pada artikel baru yang panjang isi kontennya. Fungsi [ tombol ] Read More tidak nampak/terlihat seperti biasanya di sudut kanan bawah, sebenarnya Page Break memang masih berfungsi akan tetapi tampilan tombol Read More nya saja yang hilang.

Seingatku, beberapa hari sebelumnya memang saya sempat merubah kode Css & kode Html untuk memodifikasi tampilan Page Break [ Read More ] & Navigasi Post [ Home, Next, Previous ]. 

Waktu itu, validasi editor template pun tidak memberitahukan jika ada yang salah saat saya merubah kode html tertentu, makanya masalah ini jadi membingungkan bagi saya plus harus menelusuri di bagian mana yang salah di bagian Css nya atau Html nya.

Untungnya, setelah googling ada sedikit gambaran/petunjuk apa yang harus saya periksa, setelah ketemu lalu saya coba perbaiki dan selesailah masalahnya, solved.

Solusinya adalah sebagai berikut :

1. Login > Template > Backup Template.

2. Kemudian ke Edit HTML.

3. Bila sudah melakukan modifikasi Page Break dengan Css, maka cari dengan Ctrl+F  kata " Read More " atau cari baris kode Html dibawah ini,

     
       <div class='jump-link'>


4. Pastikan baris kode Html diatasnya adalah persis sama seperti baris kode dibawah ini,

     
       <b:if cond='data:post.hasJumpLink'>


5. Bila tidak sama maka samakan atau copy paste kode diatas untuk mengantikan kode yang salah tersebut, sehingga menjadi,

       
       <b:if cond='data:post.hasJumpLink'>
       <div class='jump-link'&gt        
       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>Read More!</a>
       </div>
       </b:if>



6. Simpan template kemudian coba ulangi lagi menambahkan Page Break [ Read More ] pada Post dan lihat hasilnya, seharusnya masalah sudah terselesaikan, tombol  Read More tampil.

Dalam kasus saya, baris kode  yang salah adalah seperti dibawah ini, yang sekilas memang tidak kelihatan salahnya,

     
       <b:if cond='data:post.has'>


Seharusnya seperti berikut,


     
       <b:if cond='data:post.hasJumpLink'>


Jelas sekali letak kesalahannya ya, seperti yang saya bilang sebelumnya bahwa validator editor template tidak memberitahukan jika ada kesalahan ini, saat template saya simpan ya lancar saja bisa tersimpan alias tidak ada notifikasi error. 

Kesalahan ini simple namun membuatku bingung juga, saya kurang teliti dan berhati-hati saat modifikasi kode html di template editor, opreknya memang saya lakukan sampai larut malam, karena mengantuk jadinya kosentrasi berkurang dan terjadilah kesalahan kecil ini, yang disebabkan tidak sempurnanya penulisan kode Html ( yang terhapus secara tidak sengaja ).

Ini merupakan pelajaran bagi saya yang suka mengutak-atik template, memang harus siap menanggung resikonya bila suatu saat ada error akibat modifikasi template yang saya lakukan, karena kecerobohan sendiri ya pusingnya juga sendirian, paling-paling Mbah Google yang setia menemani & membantu kepusingan saya, he he.

Berikut ini tampilan Page Break yang sudah diperbaiki.




Tips. Biasakan melakukan Backup Template apabila melakukan perubahan [ Modifikasi/ Kustomisasi ] pada template. 


Selamat Mencoba!

No comments:

Post a Comment

N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.

Emoticon : Untuk menyisipkan emoticon dalam komentar, silahkan klik pada emoticons icon yang tersedia dibawah ini untuk melihat kodenya lalu tinggal di copy dan di paste [ sisipkan ] kodenya ke dalam komentar.