Assalamualaikum.
Beberapa saat yang lalu saya sudah share cara memasang auto readmore di posting blog dengan menggunakan javascript.Di posting artikel kali ini saya akan share sebuah tutorial tentang bagaimana caranya membuat auto readmore (summary post) tanpa javascript.
Sebenarnya tujuan dan fungsi pemasangan auto readmore ini sama,hanya saja jika kita menggunakan auto readmore tanpa menggunakan javascript maka loading homepage di blog akan terasa lebih cepat.
Jika anda sudah terlanjur memasang auto readmore di blog lantas ingin memasang auto readmore tanpa java script ini,sebaiknya anda menghapus terlebih dahulu kode auto readmore dengan javascript yang pernah anda pasang pada template.
Berikut cara memasang auto readmore di blog tanpa javascript
1.Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda di www.blogger.com dengan menggunakan akun blogger yang anda miliki.
2.Setelah masuk ke halaman dashboard,silahkan anda klik nama blog yang akan anda pasangi auto readmore pada area posting (apabila anda memiliki blog lebih dari 1).Contoh seperti gambar dibawah ini.
3.Di halaman berikutnya silahkan anda klik template,seperti contoh gambar dibawah ini.
4.Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.
5.Nanti anda akan bertemu dengan struktur kode-kode yang membentuk template blog anda.Silahkan anda cari kode
]]></b:skin>Agar lebih mudah dalam pencarian kode anda bisa menggunakan CTRL+F (jika anda menggunakan komputer).
6.Jika sudah ketemu,silahkan anda masukkan kode css berikut ini tepat diatasnya.
.thumbnail-post { width:128px; height:128px; float:left; margin:0px 10px 0px 0px; }Coba anda perhatikan kode yang saya beri warna biru diatas.
- width:128px adalah ukuran lebar gambar tumbnail,anda bisa mengganti nilai 128 sesuai keinginan anda.
- height:128px adalah ukuran tinggi gambar tumbnail,anda bisa mengganti nilai 128 sesuai keinginan anda.
7.Jika sudah,berikutnya silahkan anda cari kode <data:post.body/>,jika sudah ketemu silahkan anda hapus kode tersebut dan ganti dengan kode berikut ini.
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfza-7qcsOpcA-_Bq7OybTLSclogmLsarXM2ZLGCqwcmSE0Fl1SfuifSiwIdGheu8OiErt2Kth91Keoh13pgyF9wTCNDkKWKvUxItG1wE685tmAbGxsPnAFWN4LYa383FjKFzLzSQ9X6v3/s1600/blogger.png'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div> <div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Read more</a> </div> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> </b:if>Coba anda perhatikan kode yang saya beri warna biru diatas.
- Kata Read more bisa anda ganti dengan kata yang anda inginkan,misal: baca lebih lengkap,selengkapnya,lebih lanjut dan lain sebagainya.
8.Berikutnya silahkan anda klik save atau simpan.
Silahkan kunjungi halaman homepage blog anda,kini posting anda di halaman homepage sudah adah ada fitur readmorenya,dan tampilan homepage blog akan terlihat lebih rapi.
Bagaimana? cukup mudah bukan?
Demikianlah cara memasang auto readmore di blog tanpa javascript,semoga bermanfaat danterimakasih telah berkunjung.
Assalamualaikum.