Membuat Auto Read-More dengan Bantuan TextArea

kak sakti

Panduan Blog

Sabtu, 25 Januari 2014

add comment

Membuat Auto Read-More dengan Bantuan TextArea - Di waktu luang ini saya akan membagikan tutorial mengenai auto read more atau yang bisa disebut dengan baca selengkapnya . Auto read more ini merupakan auto read more yang saya gunakan di template ini . oh ya tanpa panjang dan lebar mari kita buat auto read more yang keren dan fast loading ini :

Berikut Cara Membuat Auto Read-More dengan Bantuan TextArea :

1. Pasang CSS-nya telebih dahulu . ( pasang kode dibawah ini diatas kode ]]</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;}

2. Langkah ke-dua 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>

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

Langkah yang terakhir sobat pasang Java script di bawah ini tepat diatas kode </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>

Nah gimana Tutorial Membuat Auto Read-More dengan Bantuan TextArea cukup mudahkan , oh ya bila sobat mengalamai kesulitan dalam Membuat Auto Read-More dengan Bantuan TextArea silahkan bertanya melalui kotak komentar sumber:http://www.dte.web.id/2013/01/konsep-auto-read-more-dengan-bantuan.html