Membuat Read More Otomatis tanpa JavaScript

Minggu, 22 September 2013

Ganti Template, pengaturan ulang pun mutlak diperlukan. itulah yang Diza Media alami beberapa hari terakhir. Berulang kali ganti template, berulang kali pula harus menyesuaikan beberapa hal yang perlu dipertahankan dari template sebelumnya. Salah satu hal yang perlu dipertahankan dari template sebelum-sebelumnya adalah fasilitas 'read more...'

Sempat terjadi banyak kebingungan saat menerapkan 'read more' otomatis pada template yang sekarang ini aku pakai. Soalnya, template yang aku pakai sekarang tidak dilengkapi dengan readmore, sedangkan template sebelumnya telah dibekali dengan readmore otomatis  dari pembuatnya.

Berbekal Searching di Google, aku menjajal berbagai script yang di Share beberpa pengguna blogger. Namun, tak satu pun yang membuat aku merasa cocok dengan tampilan depannya (homepage). Gambar thumbnail yang seharusnya berukuran sama besar tiap masing-masing posting ternyata tidak sesuai harapan. Bahkan gambar thumnail yang tampil pada homepage ukurannya berfariasi satu sama lain.

Aku pun berpikir keras. Bagaimana mungkin ini bisa terjadi??? (lebai deh). Seperti template yang aku pakai tidak support dengan script readmore yang beredar. Desain template blog dan script yang tersedia agaknya membuat peramban (browser) kebingungan mengeksekusi javascript yang ada. Oleh karena itu, perlu dibuat agar readmore yang akan di pasang compatible dengan template. Nah, disinilah penggunaan read more otomatis tanpa javascript diperlukan. Setidaknya itu menurutku.. (maklum newbie, jadi berfikir seadanya hehehe.. ..)

Dari pengalaman ini, Diza Media akan sharing penggunaan Read More Otomatis tanpa JavaScript ini. Berikut langkah-langkahnya..

1. Login Blogger terlebih dahulu dan pilih Blog yang ingin diberi Read More Otomatis tanpa JavaScript (jika blog lebih dari satu)
2. Pilih Elemen Template, kemudian lanjutkan dengan klik Edit HTML
3. Lalu cari kode ]]></b:skin>, untuk mempermudah gunakan saja CTRL+F
4. Setelah ketemu, Copy kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin>
   .post-thumbnail{float:left;margin-right:20px}
   
   
5. Setelah itu, cari kode <data:post.body/>
6. Ganti kode <data:post.body/> tersebut 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>
   
7. Setelah itu, Save Template.
8. Tunggu beberapa saat dan lihat hasilnya. Selesai.

Cara ini tidak menggunakan situs pihak ketiga, karena langsung masuk ke script HTML blog kita. Menggunakan cara ini ada manfaatnya, dimana template blog anda akan menjadi lebih SEO Friendly dan ringan. Cara atau trik ini kita akan memanfaatkan kode yang digunakan oleh tampilan mobile blogspot, yaitu post snippet. Oleh karena itu, dalam script HTML blog kita, dilakukan penambahan kode.

Labels: Blogging, Sharing, Tips & Trik

Thanks for reading Membuat Read More Otomatis tanpa JavaScript. Please share...!