IwanBerbagi.com - Pada tanggal 16 februari 2017 kemarin, para blogger kebingungan karena ringkasan posting yang biasanya menggunakan elemen <data:post.snippet/> tidak bisa menampilkan ringkasan postingnya dan terkesan hilang.

Saya sendiri juga awalnya bingung dengan kejadian ini, karena ringkasan posting lumayan penting juga untuk mempercantik tampilan blog pada homepage. Namun, tanggal 17 Februari 2017 ringkasan posting ini bisa kembali diakses hanya dengan menggunakan elemen <data:post.snippet/> tersebut seperti biasa.

Karena saya sudah sempat ngacak-ngacak kode sebelum Ringkasan posting tersebut normal kembali, maka saya sudah bisa menggunakan ringkasan posting menggunakan javascript.
Membuat Ringkasan Posting Dengan Textarea Javascript
Saya mengadopsi tutorial yang ada pada dte.web.id yang sudah saya modifikasi juga scriptnya agar hanya meload ringkasan posting tanpa meload thumbnail blog. Saya hanya untuk dokumentasi saja dalam pelajaran yang saya dapatkan. Jika kamu ingin mencobanya juga kamu bisa mencobanya.

Pada contoh ini saya menggunakan template Fastest Magz v3.1 yang sudah saya modifikasi sedikit. Untuk mengganti ringkasan postingnya cari kode berikut :
  <b:if cond='data:post.snippet'>
       <div class='snippetpost'>
       <data:post.snippet/><br/>
       </div>
  </b:if>
Tugas kamu hanya perlu mengganti kode-kode tersebut dengan kode berikut ini :
           <div class='snippetpost'>
 <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>
      <p class='post-summary' expr:id='&quot;summaryContainer-&quot; + data:post.id' style='margin:0 0 -20px'/>
      <script>createPostSummary(&quot;postData-<data:post.id/>&quot;, &quot;summaryContainer-<data:post.id/>&quot;, &quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>&quot;);</script>
  <div style='clear:both;'/> <!-- clear for photos floats -->
</div><br/>
           </div>
Dan selanjutnya simpan kode javascript berikut ini tepat diatas <head/> atau kode &lt;/head&gt;&lt;!--<head/>--&gt; tergantung template yang kamu gunakan :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
// Lightweight `auto read-more` hack for Blogger using `Textarea` by Taufik Nurrohman
// URL: https://plus.google.com/108949996304093815163/about
//<![CDATA[
var configSummary = {
    summaryLength: 85, // Define the summary length
};
function createPostSummary(a, b, c, title) {
    var text,
        html = "",
        doc = document,
        d = configSummary,
        copyFrom = doc.getElementById(a).value,
        pasteTo = doc.getElementById(b);
    text = copyFrom.replace(/<.*?>/g, "").replace(/[\n\r]+/g, ' ');
    html = text.substring(0, d.summaryLength) + '&hellip;';
    pasteTo.innerHTML = html;
}
//]]>
</script>
</b:if>
Jika kamu kreatif kode tersebut bisa juga digunakan untuk template lainnya, kamu hanya perlu menyesuaikan posisi kodenya dan sesuaikan dengan template yang kamu gunakan. Saya hanya sekedar domentasi saja, jika suatu saat memang elemen <data:post.snippet/> tidak bisa digunakan.
Share this with short URL:
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed