Membuat Posting Auto Readmore Thumbnail Tanpa Javascript

Auto Readmore
Auto Readmore? Apa sih itu? Ane sendiri juga gak tau gan. trus? hahaa.. Gak ane bercanda gan, ane kali ini mau share Cara Membuat Posting Auto Readmore Thumbnail Tanpa Javascript, kenapa gak pake javascript? Karena javascript membuat blog loadingnya agak berat karena penguraian script javascript itu butuh waktu agak lama (kayak ngerti aja nih ane.. hehee). Sebenernya ane dulu gak tau yang beginian gan karena ane pada dasarnya anak grafis. Karena rasa keingintahuan ane cukup kuat akhirnya ane searching di Google kesana kemari akhirnya ketemu beberapa referensi yang membuat ane ngerti. Eits, ane dapet itu gak langsung semata-mata ane copas dan ane share disini hlooh. Karena yang ane cari dari google belum membuat ane puas, akhirnya ane cari dan gabungkan beberapa script itu sesuai dengan keinginan dan kebutuhan ane gan. Oh iya sebelum mulai setel musik Metal dulu gan biar tambah cadas. :)

Oke langsung to the point aja kita belajar bersama caranya seperti berikut :
Login dasboard > Template > Edit HTML > centang "Expand Template Widget",
(jangan lupa backup dulu template kamu jaga-jaga jika ada kesalahan)

Kemudian carilah kode <data:post.body/> untuk memudahkan pake Ctrl+F
Ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
</div>
<b:else/>
    <a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiuhlTx29gUSDGqS1KXPSinuR8r8niuwEukko2ZrbBfSSXm3cX9RWRK6qEbVAWjyawKVrrnY2nHwStUd2QfEMC_TDvGy2_ahI5goTYMAnm-rYywDFA0IHHvqgBcFD2vvrrO6DQKv5jLQq1/s0/no-image.png'/></a>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link' style='float:right'>
<a expr:href='data:post.url' expr:title='data:post.title'>Readmore &#187;</a>
</div></b:if><b:else/>
<data:post.body/></b:if><b:else/>
<data:post.body/></b:if></b:if>


Setelah itu carilah kode ]]></b:skin> (ini fungsinya untuk menempatkan kode CSS diatas kode tersebut)
kemudian letakkan kode ini diatas kode tersebut




Tapi sayangnya dengan cara ini ringkasan artikel hanya 140 karakter gan. Ya begitulah semua ada sisi positif dan negatifnya gan. Demikian Cara Membuat Posting Auto Readmore Thumbnail Tanpa Javascript, Semoga bermanfaat untuk kalian. :)

Baca juga gan dan silahkan dikombinasikan : Membagi Elemen Posting Jadi Dua Kolom

Sumber Referensi :
http://hompimpaalaihumgambreng.blogspot.com/2012/04/posting-auto-read-more-tanpa-javascript.html
http://www.spiderbeat.com/2012/05/cara-membuat-autoreadmore-blogspot.html