TutorialComunity: Trik Membuat Read More Otomatis Tanpa Javascript

Sunday 25 September 2016

Trik Membuat Read More Otomatis Tanpa Javascript

Hay hay hay,kali ini saya akan posting tentang bagaimana membuat read more otomatis di blog Tanpa javascript,tanpa basa dan basi mari kita menuju ke TKP saja.
Ketika membuat blog baru, biasanya tampilan blog masih biasa-biasa saja. Artinya kita masih menggunakan tampilan blog yang diberikan oleh Blogger sendiri. Seiring dengan waktu, muncul kebosanan dan ingin menggantinya dengan yang lain. Ada yang menggunakan template yang dinamis, atau mengutak-atik tampilan blog sesuai keinginan. 
Hasil gambar untuk icon Read More
Read More atau baca Selanjutnya dibuat agar tampilan blog terlihat lebih rapi dan elegan. Tujuannya agar tampilan blog ketika pertama kali dibuka bisa terlihat banyak cuplikan artikel. Dengan begitu, pengunjung bisa melihat cuplikan-cuplikan yang ada di dalam blog kita dan memilihnya satu persatu. Perlu diketahui, bahwa cara membuat read more dibedakan menjadi dua, yaitu read more otomatis dan manual.Read More cara menual, dengan memanfaatkan Insert Jump Break pada posting blog, dimana setiap kali ingin posting artikel baru, kita akan mengklik icon / fasilitas Insert Jump Break. Cara ini pastinya kita harus melakukannya setiap menulis artikel (bila lupa maka read more tidak muncul).

Sementara Cara Membuat Read More Otomatis ada dua juga, yaitu dengan menggunakan Javascript dan Tanpa Javascript. Read More Otomatis dengan menggunakan Javascript biasanya memanfaatkan pihak ketiga tempat penyimpanan data script. Seperti .JS dan lain-lain,bahwa menggunakan cara ini, Google sendiri tidak menyukainya. Bisa jadi alasannya banyak. Oh iya, apabila anda menggunakan template yang dinamis, biasanya sudang menggunakan cara ini. So... tidak usah lagi anda menggantinya dengan yang baru. 

Cara Membuat Read More Otomatis Tanpa Javascript inilah yang akan kita paparkan disini. 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. Ikuti beberapa langkah di bawah ini.

1. Bukalah Akun Blog anda yang sebenarnya (jangan blog orang lain) bila anda memiliki banyak blog dalam satu akun, silahkan pilih salah satu blog saja. 
2. Pilih Elemen Template, kemudian lanjutkan dengan klik Edit HTML
3. Lalu cari kode ]]></b:skin>, untuk mempermudah silahkan menggunakan ctrl+f
4. Copy / salin kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin>

     .post-thumbnail{float:left;margin-right:20px}
5. Jangan beranjak dulu, masih seputar edit HTML. 
6. Cari kode <data:post.body/> apabila sudah ketemu silahkan Copy kode di bawah ini. 


<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 di copy, gantilah kode <data:post.body/> dengan kode yang barusan di copy.
8. Selesai. Simpan template blog anda.
9. Lihat hasilnya.

Demikianlah Trik Membuat Read More Otomatis Tanpa Javascript, apabila anda sudah menggunakan Template yang dinamis, abaikan saja ini. Semoga bermanfaat yah. Selamat mencoba. Salam blogger.