MEMBUAT READ MORE OTOMATIS TANPA JAVA SCRIPT

Posted by Tips dan Trik on

15 May 2014

Fungsi read more pada sebuah blog adalah untuk menampilkan ringkasan pada setiap artikel yang ditampilkan baik pada halaman utama (home page) atau berdasarkan label (kategori). Cuplikan dari sebuah artikel yang dihasilkan oleh fungsi ini akan berisi potongan paragraf pertama dan gambar (bila ada). Keuntungannya adalah blog dapat menampilkan beberapa artikel sekaligus tanpa loading yang lama dan tidak melorot ke bawah.

Untuk membuat fungsi read more ini, dapat dilakukan melalui 2 cara yaitu melalui pemenggalan langsung pada saat membuat posting di editor blogger melalui pilihan insert jump link atau dengan penambahan java script tertentu pada template yang akan otomatis memotong setiap artikel pada blog menjadi sebuah cuplikan pendek.

Sayangnya penambahan java script yang terlalu banyak pada blog akan membebani kecepatan loadingnya, hal ini disebabkan karena kumpulan script tersebut tersimpan pada sebuah layanan hosting, apalagi bila penggunanya banyak. Nah dalam kesempatan ini kita akan mencoba membuat fungsi read more pada platform blogger tanpa menggunakan java script.

Langsung saja, berikut langkah-langkahnya :

1. Pada akun blogger, pilih Template >> Edit Template
2. Gunakan Ctrl + F kemudian carilah kode ]]></b:skin> dan letakkan kode HTML berikut ini di atasnya :

.post-thumbnail{float:left;margin-right:20px}

3. Lalu carilah kode <data:post.body/> dan ganti dengan kode berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Karena jumlah kode <data:post.body/> pada sebuah template, biasanya lebih dari satu maka disini kita coba saja menggantinya satu persatu melalui percobaan trial & error. Jangan lupa lakukan pratinjau terlebih dahulu untuk melihat perubahannya.

4. Bila hasilnya sudah sesuai dengan keinginan Save Template.

Demikianlah cara mudah untuk membuat fungsi read more otomatis pada flatform Blogger tanpa menggunakan kode java script. Silahkan dicoba dan semoga bermanfaat.

Ingin Penghasilan tambahan yang menjanjikan "KlIK DISINI"