![]() |
| Contoh penerapan auto readmore tanpa JavaScript |
Banyak sekali tutorial di Google dengan kata kunci "auto readmore untuk blogger", namun sayangnya banyak sekali tutorial auto readmore yang menggunakan JavaScript. Padahal, JavaScript tersebut, walaupun memotong dan membuat ringkasan postingan, sebenarnya beban loadingnya tetap sama, karena JavaScript tersebut tidak menghilangkan melainkan memanipulasi.
Nah, kebetulan saya mendapat tutorial auto readmore ini dari Mas Taufik Nurrohman, tapi saya sedikit memodifikasi bagian HTML-nya yaitu pada bagian thumbnail di ringkasan postingan mempunyai atribut alt yang sama, menjadi otomatis terhadap judul postingan thumbnail masing-masing. Sedikit pusing, ya? Hehehe...
Cara Memasang Auto Readmore
- Masuk ke halaman Template > Edit HTML.
- Cari kode </style>. Taruh CSS berikut diatasnya.
.post-thumbnail {
width:72px;
height:72px;
float:left;
margin:2px 10px 0 0;
}
- Sekarang cari <data:post.body/>. Biasanya ada 4 kode yang sama, silakan pilih yang kedua atau yang ketiga. Setelah ketemu ganti kodenya dengan kode berikut ini:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img alt='Tidak ada gambar' class='post-thumbnail' src='http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.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'>Baca Selengkapnya</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>
Jika ada yang ingin ditanyakan silakan tanya lewat kolom komentar, saya akan memmbantu sobat sebisa mungkin. Semoga bermanfaat...
