Selama ini kita telah mengenal kode JavaScript pembuat ringkasan posting otomatis yang hanya bekerja dengan cara mengambil HTML di dalam posting, kemudian mengurangi jumlahnya untuk membuat ringkasan dan menampilkannya lagi dengan cara mengganti konten posting awal dengan ringkasan teks gres yang sudah dikurangi. Namun terkadang cara ini tidak efektif, alasannya biasanya peramban masih tetap sanggup mengakses dan memparse semua instruksi HTML di dalam posting. Karakter posting memang terpotong, tapi beban muat tidak berubah.
Saat ini tidak ada cara yang sanggup dibilang paling sempurna untuk mengatasi dilema ini, dan satu-satunya cara yang paling sesuai dengan mekanisme ialah dengan memanfaatkan elemen <data:post.snippet/> yang sesungguhnya merupakan elemen untuk blog tampilan seluler (baca di sini).
Tapi, sesungguhnya masih ada cara yang sederhana untuk mencegah peramban mengakses semua instruksi HTML posting ketika kita belum memasuki halaman tunggal posting tersebut, yaitu dengan cara mengubah data yang dipanggil (dalam hal ini ialah konten posting) menjadi sesuatu yang bukan instruksi HTML, sesuatu yang lebih ringan dan tidak memicu peramban untuk mengerjakan apapun kecuali mengunduh teks yang ada. Yaitu dengan cara memanfaatkan <textarea>
Bungkus semua konten posting yang ada dengan elemen <textarea> sehingga instruksi HTML apapun yang ada di dalamnya tidak akan pernah diparse oleh peramban alasannya peramban hanya akan menganggapnya sebagai teks biasa yang ringan dan tidak memperlihatkan beban undangan HTTP pemanis (misalnya dari gambar atau video yang ada di dalam posting):
<textarea id='text-1234'><data:post.body/></textarea>Konsepnya hanya menyerupai itu. Dan sisanya, kita sanggup memakai JavaScript untuk menampilkan sebagian konten dari area teks tersebut, kemudian kita masukkan risikonya ke dalam kontainer lain sebagai HTML:
<textarea id='text-1234'> <data:post.body/> </textarea> <div id='container-1234'></div> <script> // Ambil teks dari `<textarea>`, kemudian kurangi jumlah karakternya (menjadi 200 karakter) var summary = document.getElementById('text-1234').value.substring(0, 200); // Sisipkan aksara yang telah dikurangi tersebut ke dalam kontainer di bawahnya document.getElementById('container-1234').innerHTML = summary + '…'; </script>Thumbnail posting sanggup kita dapatkan melalui elemen <data:post.thumbnailUrl/> dengan resolusi yang sudah diubah, sedangkan elemen <textarea> sanggup kita sembunyikan dengan CSS. Proses penerapan selengkapnya sanggup Anda baca mulai dari sini.
Membuat Posting Auto Read-More Blogspot Versi Manipulasi Textarea
Sebelum melaksanakan modifikasi, terlebih dahulu backup instruksi template Anda untuk berjaga-jaga jikalau terjadi kesalahan.
Pertama-tama, masuklah ke editor HTML template Anda kemudian cek Expand Template Widget. Temukan instruksi ini:
</head>
Salin instruksi ini kemudian letakkan di atasnya:
<script> // Lightweight `auto read-more` hack for Blogger using `Textarea` by Taufik Nurrohman // URL: https://plus.google.com/108949996304093815163/about //<![CDATA[ var configSummary = { thumbnailSize: 100, // Define the post thumbnail size summaryLength: 300, // Define the summary length noThumbUrl: "//3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png" // `no image` URL }; function createPostSummary(a, b, c) { var text, doc = document, d = configSummary, copyFrom = doc.getElementById(a).value, pasteTo = doc.getElementById(b), postThumbnail = (c === "") ? d.noThumbUrl : c; text = copyFrom.replace(/<.*?>/g, "").replace(/\s+/g," "); pasteTo.innerHTML = '<img class="post-thumbnail" src="' + postThumbnail.replace(/\/s\d+(\-c)?\//, '/s' + d.thumbnailSize + '-c/') + '" alt="Auto Readmore Hack for Blogger with Textarea Konsep Auto Read-More Baru dengan Bantuan Textarea" style="width:' + d.thumbnailSize + 'px;height:' + d.thumbnailSize + 'px;">' + text.substring(0, d.summaryLength) + '…'; } //]]> </script>Setelah itu cari baris instruksi yang tampak kurang lebih menyerupai ini:
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'><data:post.body/> <div style='clear:both;'/> <!-- clear for photos floats --> </div>Ganti semua instruksi di atas menjadi instruksi ini:
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <textarea expr:id='"postData-" + data:post.id' style='display:none;'><data:post.body/></textarea> <p class='post-summary' expr:id='"summaryContainer-" + data:post.id'> <!-- for non/inactive JavaScript browsers --> <b:if cond='data:post.thumbnailUrl'> <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/> </b:if> <b:if cond='data:post.snippet'> <data:post.snippet/> </b:if> <!-- end for non/inactive JavaScript browsers --> </p> <p class='post-more-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.jumpText + " " + data:post.title'> <data:post.jumpText/> </a> </p> <script>createPostSummary("postData-<data:post.id/>", "summaryContainer-<data:post.id/>", "<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>");</script> </b:if> </b:if> <div style='clear:both;'/> <!-- clear for photos floats --> </div>Sisanya tinggal menambahkan instruksi CSS ini yang berfungsi untuk menggeser thumbnail gambar ke samping kiri ringkasan artikel. Letakkan instruksi ini di atas ]]></b:skin> atau </style>:
.post-thumbnail { display:block; float:left; margin:.2em 1em 0 0; }Klik Simpan Template.
Untuk template versi standar yang kini mungkin kodenya menjadi sedikit lebih rumit alasannya ada beberapa microdata yang disusun secara otomatis oleh Blogger. Mungkin suatu ketika yang Anda temukan ialah baris instruksi menyerupai ini:
<b:if cond='data:blog.metaDescription == ""'> <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. --> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'><data:post.body/> <div style='clear:both;'/> <!-- clear for photos floats --> </div> <b:else/> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'><data:post.body/> <div style='clear:both;'/> <!-- clear for photos floats --> </div> </b:if>Tidak masalah. Ganti semua instruksi di atas dengan instruksi ini:
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <textarea expr:id='"postData-" + data:post.id' style='display:none;'><data:post.body/></textarea> <p class='post-summary' expr:id='"summaryContainer-" + data:post.id'> <!-- for non/inactive JavaScript browsers --> <b:if cond='data:post.thumbnailUrl'> <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/> </b:if> <span itemprop='description'> <b:if cond='data:post.snippet'> <data:post.snippet/> </b:if> </span> <!-- end for non/inactive JavaScript browsers --> </p> <p class='post-more-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.jumpText + " " + data:post.title'> <data:post.jumpText/> </a> </p> <script>createPostSummary("postData-<data:post.id/>", "summaryContainer-<data:post.id/>", "<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>");</script> </b:if> </b:if> <div style='clear:both;'/> <!-- clear for photos floats --> </div>