Cara Menambahkan Script Auto Read More Tanpa JavaScript

Pemahaman tingkat dasar tetap diperlukan ketika belajar membuat theme. Hal ini terinspirasi dari apa yang saya alami ketika menambahkan script auto read more. Dan pengalaman pribadi ini mungkin jarang dialami orang lain. 

Padahal script auto read more sebelumnya tidak bermasalah alias baik-baik saja. Dan waktu itu proses belajar otoidak saya belum tertarik dengan framework css yang satu ini. Hingga seiring waktu akhirnya berkenalan dengan bootstrap dari internet.

Setelah itu mencoba membuat warasfood theme yang dibangun dengan bootstrap. Theme ini termasuk hasil cipta perdana setelah belajar otodidak. Tidak heran jika didalamnya masih banyak kekurangan. Termasuk diantaranya ketika memasang script auto read more.

Awalnya memang tidak terlihat ada masalah ketika memasang script ini pada theme bootstrap. Baru setelah banyak postingan seiring waktu berjalan akan terlihat error. 

Lalu error apakah yang dimaksud? Teman-teman mengalaminya juga? Pantau terus artikel kali ini tentang script auto read more yang bisa berjalan mulus pada theme bootstrap.

Cara Menambahkan Script Auto Read More Tanpa JavaScript

Pada dasarnya, script auto read more akan memendekan artikel yang terlihat pada home. Oleh karenanya, script dianggap bermasalah jika sebagian artikel yang terlihat di home hasilnya berbeda. 

Misalnya, sebagian besar artikel berhasil dipendekan dengan baik. Sedangkan satu atau beberapa artikel lainnya malah utuh dari awal sampai akhir tulisan.

Seperti itulah yang terjadi pada blog ini kemarin dengan script auto read more yang terpasang. Dan usut punya usut sepertinya penggunaan kode javascript ini penyebabnya. Biasanya, kode ini ditempatkan pada theme bootstrap di atas </head>. 

Nah, berhubung masih banyak kelemahan memahami sintaks javascript. Akhirnya saya mencari cara cepat alias jalan pintas. Intinya, kita gunakan saja kode auto read more yang dibangun tanpa menggunakan javascript. 

Tertarik dengan cara menambahkan script auto readmore tanpa javascript? Ini tahapannya!.

1. Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Tekan Ctrl + F dan masukan kode ini :<b:if cond='data:post.hasJumpLink'> dan tekan enter.

4. Perintah di atas membawa langung ke baris kode yang dimaksud. 

5. Perhatikan baris kode diatasnya, yaitu: <div style='clear: both;'/> <!-- clear for photos floats --></div>.

6. Kemudian perhatikan lagi baris kode di atas: <div class='post-footer'>,.

7. Di sana ada baris kode seperti yang tertera di bawah ini. Jika teman-teman sudah menemukannya silahkan hapus baris kode tersebut.

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

8. Kemudian paste baris kode di bawah ini di atas: <div style='clear: both;'/> <!-- clear for photos floats -->. Dan jika pernah memasang script auto read more sebelumnya silahkan timpa dengan baris kode ini. 

Catatan update 19 April 2023: Pada script dibawah ini memunculkan tombol read more bukan hanya di postingan, melainkan juga di halaman statis. Bagi yang ingin hanya tampil di postingan saja silahkan ikuti tutorial cara mengatasi tombol read more yang muncul di halaman statis.

<!-- Auto read more Start --> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='post-thumb'> <style type='text/css'>. post-thumb img {float: left; margin: 0 10px 5px 0;}</style> <img expr:src='data:post.thumbnailUrl'/> </div> </b:if> <data:post.snippet/> <b:if cond='data:post.jumpLink != data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/> </b:if> <!-- Auto read more End -->

9. Masukan kode css berikut di antara tag <b:skin><![CDATA[/*  dan ]]></b:skin>. Silahkan sesuaikan dengan template masing-masing ya.

/* AUTO READ MORE */ .post-thumb img {float: left; margin: 0 10px 5px 0; } .jump-link { float:right;margin:1% 1%; } .jump-link a { text-align:center; display:inline-block; padding:6px 6px 6px; color: #000000; margin:10px 10px 10px; font:70% 'Oswald',Sans-Serif; background-color:#grey; text-decoration:none; border-left:10px solid #05A8FC; box-shadow:1px 1px 2px gainsboro; transition: border-left .777s; -webkit-transition: border-left .777s; -moz-transition: border-left .777s; -o-transition: border-left .777s; -ms-transition: border-left .777s; } .jump-link a:hover { border-left:10px solid #FC2B2C; color:#222222; }

10. Klik icon "Simpan" yang terletak pada bagian paling pojok kanan atas.

11. Hasil bisa dilihat seperti pada link yang sama dengan tutorial ini.

Demo

Kesimpulan

Javascript termasuk komponen yang tidak bisa lepas dalam desain web. Pun ketika kita menggunakan mesin blogger untuk belajar membuat theme. Kemudian datanglah bootstrap yang membantu mempercepat pembuatan theme. 

Dan asumsi saya, framework CSS ini juga tidak lepas dari Javascript. Sebagai buktinya, bootstrap menyertakan pustaka javascript namun sesuai dengan kemasan sendiri. 

Hal itu sebagaimana terlihat sebelum tag penutup </body>. Terlihat kan pemanggilan javascript dari Bootstrap melalui CDN?

Sekian bahasan tentang script auto read more tanpa javascript. 

Semoga bermanfaat.

Baca Juga