Membuat Auto Read-More dengan Bantuan TextArea

Selamat siang, sudah beberapa hari ini saya tidak mengecek blog saya sendiri. Karena ada beberapa kesibukan di dunia nyata dan di dunia maya juga. Kali ini saya ingin membuat sebuah tutorial bagaimana cara untuk Membuat Auto Read-More dengan Bantuan TextArea, karena tutorial  ini merupakan kelanjutan dari tutorial sebelumnya, "Cara Membuat Sidebar Bersebelah dengan Artikel". Sebelumnya, artikel ini merupakan artikel yang saya tulis ulang dari blog DTE.

Saya sedang tidak ingin menjelaskan panjang lebar, mood saya hancur karena ada yang berkomentar seperti layaknya orang yang paling benar. Cek Post Facebook ane jika ingin melihat ScreenShot komentar. Seorang blogger itu seharusnya mencoba untuk membangun blog temannya dengan kritikan dan pendapat bukan dengan hinaan. Terimakasih.

Javascript

Letakkan javascript berikut tepat di atas </head>

<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 = {
    thumbnailSize: 100, // Define the post thumbnail size
    summaryLength: 300, // Define the summary length
    noThumbUrl: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png" // `no image` URL
};
function createPostSummary(a,b,c) {
    var text, doc = document, d = configSummary,
        copyFrom = doc.getElementById(a).value,
        pasteTo = doc.getElementById(b),
        postThumbnail = (c === "") ? d.noThumbUrl : c;
    text = copyFrom.replace(/<(.*?)>/g,"").replace(/[\n\r]+/g," ");
    pasteTo.innerHTML = '<img class="post-thumbnail" src="'+postThumbnail.replace(/\/s[0-9]+(\-c)?\//,'/s'+d.thumbnailSize+'-c/')+'" alt="thumbnail" style="width:'+d.thumbnailSize+'px;height:'+d.thumbnailSize+'px;">' + text.substring(0,d.summaryLength) + '&hellip;';
}
//]]>
</script>

HTML

Cari kode <data:post.body/> yang ke-2 kemudian ganti kode yang seperti berikut

      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>

        <data:post.body/>

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

      </div>

dengan kode berikut

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

    <data:post.body/>

  <b:else/>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

      <data:post.body/>

    <b:else/>

      <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'>

          <!-- for non/inactive JavaScript browsers -->

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

            <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/>

          </b:if>

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

            <data:post.snippet/>

          </b:if>

          <!-- end for non/inactive JavaScript browsers -->

        </p>

        <p class='post-more-link'>

          <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>

            <data:post.jumpText/>

          </a>

        </p>

        <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>

    </b:if>

  </b:if>

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

</div>

CSS

Letakkan kode berikut tepat di atas ]]</b:skin>

.post-thumbnail{height: 100px !important;float: left;margin: 3px;border: 5px solid #DFDFDF;}.post-more-link {text-align: right;float: right;}.post-footer{display:none;}

Kemudian Simpan Template

---