Membuat Read More Otomatis Untuk Loading Lebih Ringan

Untuk mempercantik tampilan blog, maka perlu penambahan read more di blog. Selain hanya sekedar untuk mempercantik, dengan memasang read more atau baca selanjutnya ini, juga dapat mengurangi loading home page blog. Bayangkan jika pengunjung yang datang di blog, harus menunggu loading semua artikel di home page untuk terbuka semuanya, loading menjadi lambat bukan?, Oleh sebab itulah read more berperan untuk memangkas atau memotong artikel, dan kemudian hanya menampilkan sedikit saja dari cuplikan artikel tersebut di home page. Dengan begitu meskipun menempatkan hingga 10 artikel di halaman utama, maka tidak akan di load terlalu berat. Sebab ya itu tadi, dari 10 artikel itu hanya ditampilkan cuplikan-cuplikannya saja.

Ada dua cara untuk membuat read more pada blog Anda.

Yang pertama adalah dengan cara manual, yaitu membuat satu-satu di setiap artikel, tentunya ini tanpa edit html segala yang mungkin terkadang cukup sulit.

Yang kedua adalah secara otomatis, cara otomatis adalah tinggal mengedit html template, dan kemudian seluruh artikel baik yang telah ada atau pun yang akan dibuat selanjutnya, maka akan ter-read more otomatis, tentunya masing-masing cara memiliki kelebihan dan kerurangannya masing-masing. Jika ingin mengetahuinya, silahkan baca tulisan saya sebelumnya yaitu kelebihan dan kekurangan read more manual dan otomatis. Baiklah tak panjang lebar lagi, inilah cara membuat read more otomatis yang ringan dan mudah di blog.

• Masuk di blog yang ingin diberi read more otomatis, atau belum memiliki blog? jika belum  maka silahkan baca cara mudah membuat blog.
• Setelah masuk di blog, silahkan klik menu template di sebelah kiri blog, selanjutnya silahkan klik edit html seperti gambar di bawah ini.

• Setelah masuk pada editor html template Anda, munculkanlah kotak pencarian dengan menekan tombol CTRL+F di keyboard. Nah, cari kode ]]></b:skin> dengan cara mencarinya melalui kotak pencarian yang baru saja Anda munculkan.

• Setelah ketemu, copy kode di bawah ini, dan harus letakkan tepat di atas kode ]]></b:skin> tadi

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

• Nah, tahap kelima ini, cari kode <data:post.body/> di html template. Ingat ya, bahwa kode tersebut masing-masing template memiliki jumlah yang berbeda-beda. Ada yang dua, ada yang tiga dan empat. Jadi, cobalah pilih kode tersebut dari yang paling terakhir duluan dan gantikan 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>

Simpan template dan lihat hasilnya. Jika belum berhasil, silahkan kembali masuk ke edit html template tadi, dan tekan CTRL+Z di keyboard untuk mengembalikan atau meng-undo pada settingan saat belum merubah kode html di blog.

• Karena tadi belum berhasil, silahkan ganti kode yang nomor tiga,nomor dua, atau nomor satu hingga berhasil.