Cara Menambahkan Script Auto Read More di Blogspot

Membuat template sendiri butuh proses dan waktu yang tidak sedikit. Apalagi jika pengerjaan itu tidak fokus pada satu pembahasan. Sebagaimana halnya manusia yang biasa berhadapan dengan masalah yang kompleks. Begitu juga dengan metode belajar yang ingin diterapkan secara mandiri alias otodidak. Meskipun masih ada semangat belajar yang belum meredup. Bisa jadi tema yang ingin dipelajari terkadang berubah atau sedikit berbeda.

Seperti halnya dengan template blogspot yang dibuat dari nol. Blog ini sudah lama membahas teori dasar hingga membuat postingan pertama. Namun baru kali ini ingin kembali melanjutkan pembahasan. Tentunya setelah berhasil membuat postingan pertama dan selanjutnya. Hal yang ingin dilihat dari sebuah tampilan blog adalah kerapihan.

Untuk itu, agar semua postingan yang muncul di blog terlihat rapi. Perlu dilakukan pemotongan paragraf secara otomatis. Caranya dengan menggunakan script yang mengatur "auto read more". Dan pengaturan ini disertai dengan gambar thumbnail dan ringkasan agar terlihat lebih cantik.

Oh ya, tulisan ini masih dalam rangkaian tutorial "cara membuat template sendiri" yang mungkin masih panjang. Biar kita saingan sama episode sinetron di tipi-tipi konpensionil.

Cara Menambahkan Script Auto Read More di Blogspot

Fungsi "read more" pada Blogger bisa dilakukan secara manual maupun otomatis. Fungsi pertama yaitu secara manual dilakukan setiap kali kita membuat artikel. Sedangkan dalam bahasan ini dilakukan secara otomatis menggunakan cara kedua melalui script. Selengkapnya, berikut ini cara menambahkan script auto read more di Blogspot.

1. Masuk ke Dashboard Blogger > Edit Theme dan tempatkan kode berikut ini dibawah </head>.

<!-- Auto read more script Start --> <script type='text/javascript'> var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail summary_noimg = 430; //summary length when no image summary_img = 340; //summary length when with image img_thumb_height = 200; img_thumb_width = 200; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(thumbnail_mode == "yes") { if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> <!-- Auto read more script End -->

2. Cari kode: <data:post.body/> yang kedua. Catatan: Template yang digunakan ini dibuat dari nol. Pada template ini terdapat kata-kata <data:post.body/> di dua tempat yang berbeda. Adapun tulisan <data:post.body/> di tempat pertama sebagaimana contoh gambar di bawah ini. Silahkan abaikan saja dan jangan dihapus. 

3. Tulisan <data:post.body/> yang kedua ada di bagian bawah setelah tulisan: <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->. Jika sudah menemukan tulisan ini silahkan hapus saja dan ganti dengan script berikut ini:

<!-- Auto read more Start --> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Read more ...</a> </b:if> </b:if> <!-- Auto read more End -->

4. Setelah paste akan terlihat kurang lebih seperti ini.

5. Klik Simpan.

Kesimpulan

Membuat theme sendiri dari nol tidak langsung ujug-ujug tampak profesional. Meskipun demikian, ada perasaan senang ketika script yang diterapkan dapat berjalan. Iya, meskipun kita tidak mengetik baris demi baris script tersebut. Setidaknya, kita bisa belajar cara membuat template blog sendiri dengan script yang kita pilih. Dan alhamdulillah, script di atas sudah saya terapkan dan bisa berjalan sebagaimana mestinya. Lalu bagaimana dengan praktek percobaan Anda?

Semoga berhasil.