Sabtu, 25 Januari 2014

Membuat Auto Read-More dengan Bantuan TextArea

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 :

Membuat Auto Read-More dengan Bantuan TextArea

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