Membuat Read More Model Baru

[+/-] Read More... dan [+/-] Summary only... ini disebut Super Peek-A-Boo Posts, ini pertama kali di hack oleh Ramani tanpa: [+/-] Summary only..., kemudian oleh Hans dikembangkan dengan menambahkan [+/-] Summary only...

Jadi, Super Peek-A-Boo Posts ini kelebihannya dibanding dengan Read More versi yang lama, dia tidak perlu me-loading ulang.

Adapun cara untuk meng-instalnya:

Step 1:
Sign In, masuk ke dashboard, kemudian klik layout tab-edit html, Back-up terlebih dahulu template kita dan jangan lupa kasih centang pada expand widget templates, lalu Tambahkan kode javascript dibawah ini, letakan persis sebelum </head>-tag.


<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />


Step 2:
Cari kode 'post' di dalam template, dan ubah sehingga seperti dibawah ini. (Tulisan berwarna merah harus ditambahkan ke dalamnya)

<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
.... rest of template code ....

kemudian Save template.

Step 3:
Klik Settings tab lalu masuk ke Formatting tab, pada bagian paling bawah pada Post Template ada kotak kosong, copy paste kode di bawah ini ke dalam kotak kosong tersebut.

Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>


kemudian Save Settings. Selesai.

Pada saat mau posting summary/ringkasan yang mau ditampilkan di muka ditaruh di Type your summary here. atau di atas <span id="fullpost"> kemudian untuk lanjutannya letakkan di Type the rest of your post here. atau diantara <span id="fullpost"> dan </span>

Untuk postingan yang pendek, anda bisa menghapus kode nya pada saat posting, dan seluruh posting akan tampil penuh tanpa [+/-] Read More... dan [+/-] Summary only...

 

Versi lain Pembuatan Read More

Selain cara pembuatan Read more seperti model di atas berikut adalah versi lain pembuatan read more. silahkan anda pilh model yang mana tergantung selera anda. Ikuti panduan berikut:
1. Buka template --> edit HTML
2. Kasih tanda tik/cek menu "expand widget template"
3. Cari kode berikut di TEMPLATE blog Anda:


<div class='post-header-line-1'/> <div class='post-body'>


4. Kalau sudah ketemu, letakkan kode berikut DI BAWAH kode html di atas:


<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>



5. Di Bawah kode di atas ada kode html sbb:

<p><data:post.body/></p>



<div style='clear: both;'/> <!-- clear for photos floats -->

</div>


6. Nah, di antara kode <p><data:post.body/></p> dan kode <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

pasang kode html ini:
<a expr:href='data:post.url'>Read More......</a>

</b:if>


7. Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna biru adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):

    <div class='post-header-line-1'/>

    <div class='post-body'>

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

         <p><data:post.body/></p>

         <a expr:href='data:post.url'>Read More......</a>
      </b:if>

      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

8. Klik SETTINGS, terus klik FORMATTING. Di paling bawah ada kotak kosong di samping menu POST TEMPLATE. Isi kotak kosong tsb dg kode berikut:


<span class="fullpost">



</span>


Jangan lupa klik SAVE apabila sudah dipasang.


9. Klik SAVE. Selesai.***

CARA MEMPOSTING

Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode

<span class="fullpost">



</span>


Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry), letakkan di antara kode
<span class="fullpost"> dan </span>.

Catatan Penting:

(A) Artikel yg diposting sebelum pemasangan kode READ MORE di atas akan tetap tampil penuh di halaman muka, Anda bisa mengeditnya dg cara sbb:

1. Klik menu EDIT POSTS
2. Klik EDIT di artikel yg akan diedit.
3. Pasang kode <span class="fullpost">
di bawah paragraf yg akan ditampilkan. Dan pasang kode </span>
di akhir artikel.

Ingat kode hanya ada SATU kode <span class="fullpost"> dan </span>. Apabila terdapat lebih dari satu, dan biasanya numpuk di bagian paling bawah artikel, maka dibuang saja.

Related Posts by Categories - Postingan Sejenis :