How To Create Read More in Blogs

Untuk membuat "read more" ini memerlukan anda mengubah code HTML pada template anda.
Pastikan anda membuat salinan code HTML asal anda supaya mengelakkan daripada berlaku sebarang kesilapan ketika mengubah code HTML.


Step 1 : Edit your template


Sekarang klik pada Dashboard --> Design --> Edit HTML
Ctrl + F Cari ]]></b:skin> dan </head>


.hidecomment {display:none;}
.showcomment {display:inline;}



Copy dan paste code di atas sebelum ]]></b:skin> 


Kemudian masukan code di bawah selepas ]]></b:skin> dan sebelum </head>




<!-- Read More -->
<script type="text/Javascript">
function triggerComment (postid) {
   var whichpost = document.getElementById(postid);
   if (whichpost.className=="showcomment") { whichpost.className="hidecomment"; }
     else { whichpost.className="showcomment"; }
     }
     </script>
    <!-- Read More -->



Contoh:




kemudian klick SAVE TEMPLATE


Step 2 : Creating "read more" in your blog post


Saya akan menerangkan cara bagaiman meletakan read more di dalam post. Saya ingatkan di sini agak sukar kerana mempunyai beberapa code rumit yang membuatkan anda berasa susah. Jadi anda mungkin perlu melakukan beberapa kali supaya kelihatan sempurna.


Klik Posting --> New Post --> Edit HTML
Di bawah adalah code yang perlu anda copy dan paste.



 <a aiotitle="click to expand" href="javascript:triggerComment('READ_MORE_NAME')">Click to read more</a>
<div class="hidecomment" id="READ_MORE_NAME">put your hidden text here</div>


Anda perlu mengubah READ_MORE_NAME dengan apa-apa sahaja tetapi pastikan kedua-duanya adalah sama.


Ini adalah contoh text yang ingin anda tulis:


first text
second text
third text


kemudian anda ingin membuat read more pada second text dan third text ke akhir. Jadi, code anda akan menjadi seperti ini:


first text
-- start read more --
second text
third text
-- end of read more --

Jadi, post anda akan menjadi seperti ini:

first text

<a aiotitle="click to expand" href="javascript:triggerComment('READ_MORE_NAME')">Click to read more</a>

<div class="hidecomment" id="READ_MORE_NAME">
second paragraph

third paragraph</div>

Selamat mencuba.. Diharap amat membantu... 

No comments :