Pendekkan Paparan Blog - "Baca Seterusnya"

Pernah rasa tak Artikel atau blog yang dipaparkan tu panjang sangat? Apa kata kita hack sikit blogger supaya singkatkan sikit artikel tu...

Sebenarnya ada banyak projek hack yang boleh kita guna. Tapi untuk kali ni, jom kita tengok hack "Baca Seterusnya..." untuk pendekkan paparan artikel :P

Caranya:

1. Login ke dalam akaun blogspot anda di: http://www.blogger.com/.


2. Pada Dashboard , klik Layout untuk ubahsuai cara paparan blog.




3. Klik pada Edit HTML dan mula hack kod blog anda.
   



4. Sebelum anda rosakkan blog anda, apa kata simpan backup blog anda tu dulu ... Klik Download Full Template ... dan simpan backup di dalam komputer anda.



5. Selepas tu, tandakan Expand Widget Templates untuk memulakan operasi hack!



6. Cari kod <data:post.body/>. Untuk mudahkan pencarian, tekan kekunci 'Ctrl+F'. Anda sepatutnya jumpa kod ini:
   <div class='post-header-line-1'/><div class='post-body entry-content'> <data:post.body/><div style='clear: both;'/>
   
   
7. Masukkan kod di bawah ini sebelum kod <data:post.body/>
   
   

   <b:if cond='data:blog.pageType ==
   &quot;item&quot;'><style>.fullpost{display:inline;}</style><p><data:post.body/></p><b:else/><style>.fullpost{display:none;}</style>

   
   
8. Anda sepatutnya mendapat hasil seperti berikut:
   

   <div class='post-header-line-1'/><div
   class='post-body entry-content'>
   <b:if cond='data:blog.pageType ==
   &quot;item&quot;'><style>.fullpost{display:inline;}</style><p><data:post.body/></p><b:else/><style>.fullpost{display:none;}</style>
   <data:post.body/>




9. Kemudian, tambahkan kod berikut di bawah kod tadi
   

   <b:if cond='data:blog.pageType !=
   &quot;item&quot;'><br/> <a
   expr:href='data:post.url'>Baca Seterusnya...</a>
   </b:if> </b:if>

   
   
   
10. Anda seharusnya mendapat hasil seperti berikut
    

    <div class='post-header-line-1'/><div class='post-body
    entry-content'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><style>.fullpost{display:inline;}</style><p><data:post.body/></p><b:else/><style>.fullpost{display:none;}</style>
    <data:post.body/>
    <b:if cond='data:blog.pageType !=
    &quot;item&quot;'><br/> <a
    expr:href='data:post.url'>Baca Seterusnya...</a>
    </b:if> </b:if>
    <div style='clear:
    both;'/>




11. Setelah selesai, klik Save Template untuk simpan hack tadi...


12. Selepas berjaya simpan, klik Settings > Formating > Post Template dan masukkan kod berikut:
    
    

    <span class="fullpost">
    </span>

    
    
    Anda akan melihat skrin seperti berikut



13. Untuk menghasilkan Artikel (blog) yang menggunakan fungsi ini, masukkan teks dan gambar sebelum <span class="fullpost"> dan baki yang lainnya selepas itu. Pastikan artikel anda ditutup dengan </span> seperti berikut
    
14. Simpan kerja anda dan lihat hasilnya.

Jika anda dapat melihat seperti di atas, tahniah! Anda telah berjaya :P