Kamis, 25 April 2019

Membuat Read More Otomatis Tanpa Java Script

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

Untuk menciptakan fungsi read more ini, sanggup dilakukan melalui 2 cara yaitu melalui pemenggalan pribadi pada dikala menciptakan 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 lantaran kumpulan script tersebut tersimpan pada sebuah layanan hosting, apalagi kalau penggunanya banyak. Nah dalam kesempatan ini kita akan mencoba menciptakan fungsi read more pada platform blogger tanpa memakai java script.

Langsung saja, berikut langkah-langkahnya :

1. Pada akun blogger, pilih Template >> Edit Template
2. Gunakan Ctrl + F kemudian carilah arahan ]]></b:skin> dan letakkan arahan HTML berikut ini di atasnya :
.post-thumbnail{float:left;margin-right:20px}

3. Lalu carilah arahan <data:post.body/> dan ganti dengan arahan 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 arahan <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 balasannya sudah sesuai dengan harapan Save Template.

Demikianlah cara gampang untuk membuat fungsi read more otomatis pada flatform Blogger tanpa memakai arahan java script. Silahkan dicoba dan agar bermanfaat.

0 komentar:

Posting Komentar