Meringkas Artikel Otomatis Tanpa Javascript

Mad Trik - Pada tutorial kali ini kita akan membahas tentang membuat ringkasan artikel otomatis tanpa javascript atau yang sering kita sebut dengan auto read more.

Hasilnya akan seperti di blog ini.

Dan dengan menggunakan ringkasan artikel otomatis ini, kecepatan muat halaman blog kamu akan menjadi seperti kilat (tergantung apa yang di blog kamu juga sih). Itulah salah satu kelebihan dengan ringkasan artikel ini.

Karena ringkasan yang diambil itu dari <data:post.snippet> yang juga ada di dalam widget artikel populer. Cara ini berasal dari blog Duypam yang kemudian di perjelas lagi di blog DTE karena di blog awal tadi memakai bahasa asing.....mungkin bahasa Vietnam ?

Tapi kalau saya lihat ada sedikit kekurangan pada tutorial yang sudah dijelaskan di blognya om Taufik (DTE) maupun di blog Duypam itu, yaitu ringkasan artikelnya nanti akan berdampak buruk jika artikelnya nanti kita bagikan ke Google+.

Deskripsi artikelnya hilang !. Awalnya saya juga tidak memperdulikan hal ini, tapi karena lama-kelamaan tidak enak juga dengan hasilnya maka saya mencoba beberapa eksperimen dengan mengorbankan beberapa template bawaan Blogger dan saya teliti sedikit kemudian saya pasangkan beberapa kode yang ada ke dalam template blog saya, hasilnya pun cukup berhasil.

Dan hasil akhirnya kira-kira akan seperti gambar dibawah ini:

Hasilnya akan seperti ini.

Tapi jangan lupa juga untuk mengaktifkan deskripsi penelusuran di blog kamu terlebih dahulu.

Nah daripada banyak basa-basi, saatnya kita melakukan beberapa hack lagi:

Pertama-tama pasang dulu bagian termudah di tutorial ini. Yaitu dengan memasang kode CSS dibawah ini:

/*Gambar*/
 .img-thumbnail {
    float:left;
    padding:4px;
    border:1px solid #ddd;
    width:75px;
    height:75px;
}
.img-thumbnail:hover {
    background-color:#00AFAF;
    border:1px solid #00AFAF;
}

Kemudian bagian agak sulitnya. Cari kode ini <data:post.body> yang ada di blog kamu.

Jika terdapat dua kode yang sejenis, cari saja kode yang ada di dalam area <b:includable id='post' var='post'>

Jika sudah ketemu, ganti kode tersebut dengan kode dibawah ini:

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
    <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <data:post.body/>
        <b:else/>
            <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
                <data:post.body/>
            </b:if>
        </b:if>
        <div style='clear: both;' />
        <!-- clear for photos floats -->
    </div>
    <b:else/>
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <data:post.body/>
        <b:else/>
            <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
                <data:post.body/>
            </b:if>
        </b:if>
        <div style='clear: both;' />
        <!-- clear for photos floats -->
    </div>
</b:if>

<b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
</b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:post.thumbnailUrl'>
         <a expr:href='data:post.url'>
        <img class='img-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>
        <b:else/>
         <a expr:href='data:post.url'>
        <img class='img-thumbnail' expr:alt='data:post.title' src='Logo Blog Kamu Disini'/></a>
        </b:if>

        <div class='post-snippet'>
            <b:if cond='data:post.snippet'>
                <data:post.snippet/>
            <b:else/>
                Konten tidak ada
            </b:if>
        </div>
    </b:if>
</b:if>

Jika selesai semua simpan perubahan yang ada di template kamu. Dan lihat hasilnya