Membuat Auto Read-More dengan Bantuan TextArea | Czn Deface | Tutorial No.1 Yang Tepat Di Indonesia

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

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) + '…';
}
//]]>
</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

Bangkitlah Kembali
by : Rendra Mahardika

Aku berharap hari ini tidak terjadi
Aku ingin hari yang disebut "Hari Pahlawan"
tidak pernah dikenal orang
Karena....
Mereka tidak melanjuti perjuanganmu
Pemimpinku yang sekarang hanya mampu
Mengotori kain putihmu.

Pahlawanku...
Aku sedih melihat negeri ini
Sejak kau pergi
Ibu Pertiwi sangat sering menangis
Para Garuda juga enggan
Mengudara di Zamrud Khatulistiwa
Itu semua karena mereka!!!
Para "TIKUS BANGSAWAN" yang merusak
Alam Indonesia

Sebelum hari ini berakhir
Kumohon... BANGKITLAH PAHLAWANKU
Bangkitlah kembali dan bantu kami
Tapi bukan sebagai mayat perang
Bukan jua sebagai pembalas dendam

Melainkan sebagai kesadaran di hati Pemerintah
Atas kerusakan yang mereka perbuat di Bumi Pertiwi
Bangkitlah sebagai semangat di jiwa Garuda Muda
Agar dapat mengembangkan sayapnya
Demi melindungi Bumi Pertiwi. - See more at: http://rendramh.blogspot.com/2012/11/puisi-hari-pahlawan_10.html#sthash.f1nDD2QO.dpuf