Konsep Auto Read-More Baru dengan Bantuan Textarea
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 menciptakan ringkasan dan menampilkannya lagi dengan cara mengganti konten posting awal dengan ringkasan teks baru yang sudah dikurangi. Namun terkadang cara ini tidak efektif, karena biasanya peramban masih tetap bisa mengakses dan memparse semua kode HTML di dalam posting. Karakter posting memang terpotong, tapi beban muat tidak berubah.
Saat ini tidak ada cara yang bisa dibilang paling tepat untuk mengatasi masalah ini, dan satu-satunya cara yang paling sesuai dengan prosedur adalah dengan memanfaatkan elemen <data:post.snippet/>
yang sebenarnya merupakan elemen untuk blog tampilan seluler (baca di sini).
Tapi, sebenarnya masih ada cara yang sederhana untuk mencegah peramban mengakses semua kode HTML posting saat kita belum memasuki halaman tunggal posting tersebut, yaitu dengan cara mengubah data yang dipanggil (dalam hal ini adalah konten posting) menjadi sesuatu yang bukan kode 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 kode HTML apapun yang ada di dalamnya tidak akan pernah diparse oleh peramban karena peramban hanya akan menganggapnya sebagai teks biasa yang ringan dan tidak memberikan beban permintaan HTTP tambahan (misalnya dari gambar atau video yang ada di dalam posting):
<textarea id='text-1234'><data:post.body/></textarea>
Konsepnya hanya seperti itu. Dan sisanya, kita bisa menggunakan JavaScript untuk menampilkan sebagian konten dari area teks tersebut, kemudian kita masukkan hasilnya 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 karakter yang telah dikurangi tersebut ke dalam kontainer di bawahnya
document.getElementById('container-1234').innerHTML = summary + '…';
</script>
Thumbnail posting bisa kita dapatkan melalui elemen <data:post.thumbnailUrl/>
dengan resolusi yang sudah diubah, sedangkan elemen <textarea>
bisa kita sembunyikan dengan CSS. Proses penerapan selengkapnya bisa Anda baca mulai dari sini.
Membuat Posting Auto Read-More Blogspot Versi Manipulasi Textarea
Sebelum melakukan modifikasi, terlebih dahulu backup kode template Anda untuk berjaga-jaga jika terjadi kesalahan.
Pertama-tama, masuklah ke editor HTML template Anda kemudian cek Expand Template Widget. Temukan kode ini:
</head>
Salin kode 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="thumbnail" style="width:' + d.thumbnailSize + 'px;height:' + d.thumbnailSize + 'px;">' + text.substring(0, d.summaryLength) + '…';
}
//]]>
</script>
Setelah itu cari baris kode yang tampak kurang lebih seperti 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 kode di atas menjadi kode 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 kode CSS ini yang berfungsi untuk menggeser thumbnail gambar ke samping kiri ringkasan artikel. Letakkan kode 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 sekarang mungkin kodenya menjadi sedikit lebih rumit karena ada beberapa microdata yang disusun secara otomatis oleh Blogger. Mungkin suatu saat yang Anda temukan adalah baris kode seperti 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 kode di atas dengan kode 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>
47 Komentar
Unknown
Mesti bilang WAW nih mas \o/ yang jelas akan membuat tempe lebih ringan ya :D.
Ijin coba sample templatenya mas. Salam sukses
Beben Koben
bahaya kalo maen textarea ma iframe dengan blogspot bos...ngeriii
bagus nih buat belajar :D
Unknown
emang efeknya apa om? kok bahaya?
Beben Koben
untuk blogspot atribut textarea serasa diberi batasan sendiri pemakaiaannya. contoh textarea: add a gadget button yg skrg rada ngaco jika di pakai di area postingan (dulu gak apa")
contoh iframe: semua produk google anti iframe :P jd gak tampil jg :)
kalo emang mau bermain dengan atribut textarea, yaaa harus kek Taufik Nurrohman yg ngerti script....qiqiqiqi
Ivan Niblesim
benar apa yang dibilang master beben koben. iframe tidak disukai google. saya sendiri lebih suka halaman depan yang menampilkan hanya judul postingan. lebih enteng. tapi experiment bro DTE patut diacungi jempol. sayangnya gak ada demo.
Taufik Nurrohman
Saya sudah cari di Google mengenai SEO Black Hat dengan textarea tapi tidak ada: https://www.google.com/search?q=SEO+black+hat+with+%3Ctextarea%3E
Dan lagipula, konten textarea ini tidak berisi teks-teks spam, melainkan berisi paragraf asli dari posting, jadi Saya rasa tidak masalah. Punya link yang bagus soal ini?
Beben Koben
bkn masalah di konten textareanya, tapi fitur ini sedikit membutuhkan pengetahuan dalam jika mau diterapkan di template kita :D
kira" :P
Unknown
referensi blackhat seo hidden text :
http://www.shimonsandler.com/14-methods-to-hide-text/
http://www.mattcutts.com/blog/avoid-keyword-stuffing/
Unknown
Wah.. ada ilmu baru lagi..
Terima Kasih mas Taufik..
Sukses Selalu.. :)
Unknown
thx infonya... sy punya masalah juga nih
coba mampir: whatskpop.blogspot.com/
Templatenya pake auto read more (bagus sih) CUMA, pos sebelum di klik read more itu keliatan seperti berantakan dan nyambung ky gitu... kl cuma memperbaiki aja bisa gak ya? (Read more tetep, cuma postingannya sebelum klik read more, beraturan/sesuai dengan yang kita buat)
Hmmm... kl tau, kasitau sy ya... thx you
Adi Nugraha Y
coba kasih Justify di class wrapfullpost gini:
.wrapfullpost {
text-align: justify;
}
Taufik Nurrohman
Kalau kamu memakai script yang Saya buat di atas, cukup ganti kode ini:
dengan ini:
Untuk punyamu mungkin harus diubah seperti ini:
Putra
akal akalan multiline text-overflow :p
carwan
oke (y)
Unknown
Terima kasih atas tutorialnya mas
saya akan pelajari dari sini :D
Unknown
mas bisa ga kalo text areanya dijadikan dalam bentuk popup? jadi kan postnya snippet, tapi pada saat diklik judul dan/ atau readmore itu keluar popup text area gitu mas... hehe maap mas banyak mintanya :D
Taufik Nurrohman
Textarea cuma untuk menyimpan teks. Kalau textareanya ditampilkan sebagai popup nanti hasilnya muncul sebagai teks berupa kode HTML, bukan posting yang bisa dibaca. Harus buat kontainer lagi untuk mengisi konten textarea sepenuhnya:
Setelah itu sembunyikan popup posting dengan CSS:
Untuk menampilkan dan menyembunyikan posting bisa memakai JQuery yang memiliki efek/fungsi toggle:
Unknown
dicoba dulu ya mas, ya walaupun masih kurang paham :-D
nanti saya tanya-tanya lagi mas, makasih :-)
PamungkasBayu
Om, Bisa gak kalau Gambar Thumbnailnya diambil bukan dari'post-thumbnail' itu? :(
jadi biar imagenya ukuranya gak harus kotak / sama sisi? seperti cara auto-readmore di tutorial2 sebelumnya...
tapi tetep pake konsep textarea itu.
saya udah utak-atik javascriptnya tapi ga mudeng...
maaf minta2 om...
Taufik Nurrohman
Pakai ini saja bisa kok. Yang membuat kotak itu kan asalnya dari akhiran
-c
pada URL thumbnail. Kalau mau menampilkan ukuran asli tinggal dihapus saja akhiran itu. Ini kodenya:PamungkasBayu
oh, gitu om...
saya kira 'post-thumbnail' emang harus kotak,
makasih kalau gitu...,
saya coba dulu...
ntar laporan...
Unknown
Ide yang benar-benar menarik sobat! Saya malah baru kepikiran sekarang. Tapi memang benar, textarea semacam ini tidak bisa bekerja dengan baik pada semua template Blogger. Saya tadi sudah coba dengan beberapa template, hasilnya ada yang override. Stidaknya mesti diakali dengan beberapa aturan CSS tertentu. Tapi terlepas dari itu, ini brilian :)
Unknown
tanks mas udah share
http://mvcline.blogspot.com/
Adjie Purbojati
kalau thumbnailnya tidak tampil, itu masalahnya apa ya?
Taufik Nurrohman
Gambar harus diunggah ke Picasa (bukan hasil copy-paste gambar dari situs lain).
mustajib
Mas, untuk ganti tulisan "baca selengkapnya" gimana y? karena blog saya berbahasa inggris.
terimakasih
Taufik Nurrohman
Ubah saja pengaturan bahasa ke bahasa Inggris. Atau kalau tidak berhasil masuk ke tab Tata Letak kemudian klik Edit di pojok kanan atas. Setelah itu ubah teks “Baca selengkapnya »” menjadi “Read more »”.
Atau kalau tetap tidak berhasil, ganti kode ini dengan kata “Read More”:
Shalahuddin
hilang, tulisan nya. hanya tinggal judul.
Unknown
saya udah coba pasang di blogspot baru saya, yg mau lihat live view.nya disini gan : responsiver(.)blogspot(.)com...
Unknown
misalnya
thumbnailSize: 150
kalau gitukan otomatis lebar dan tingginya 150px..
biar lebarnya 250px dan tingginya 150px gimana caranya...????
javascriptnya dirubah bagian yang mana..??
Taufik Nurrohman
Bertuah
Maaf, Mas. Saya mo tanya nih :D
Thumbnailnya itu sekedar gambar aja, gimana caranya biar tumbnailnya mengarah (dikasi link) ke artikel?
Trims Mas.
Taufik Nurrohman
Tambah satu parameter lagi (dalam kode ini bernama
d
) pada fungsicreatePostSummary
untuk mengambil URL posting:Lalu sisipkan data
data:post.url
ke dalam parameter fungsi yang dieksekusi:Bertuah
Terimakasih Mas Taufiq. Saya akan coba2 terapkan di blog saya.
Bertuah
Kode auto readmore dengan tambahan parameter d ini gagal, Pak Taufik. Thumbnail dan summary yg udah diatur gak muncul, yang muncul cuman thumbnail default blogspot 72px aja, Pak.
Ada cara lainnya Pak Taufik?
Maaf, kalo udah ngerepotin :D
Unknown
auto read more ini mendukung thumbnail video selain youtube gak om ???
Unknown
Hi brother, I have seen that your auto readmore trick is using by Savida Premium responsive template. But I am unable to increase the image thumbnail size as well as I have see that if I use wide image in blog then image thumbnail is cutting edge from left and right side. So how to centering the image thus full image can be display? Please reply me soon.
May Allah bless you.
Taufik Nurrohman
Replace this code:
with this:
BloggerSpice
Thanks for your reply..but unfortunately it is not working. Thumbnail image is not centering. Still image side is cutting. I have send you the total auto readmore code from the template... please kindly give me a solution. Thank you.
Unknown
mas saya mau tanya nih . saya kan Make Template dari DTE . yang B1:A - TEMPLATE BLOGGER MINIMALIS RESPONSIF \o/ , nah saya mau ilangin tuh Kotak ReadMoe nya mas , Tapi saya cari Palah Pusing ~x( , mohon pencerahannya ya kang , :D
Mohamed Lamine K
\ O / Thank you Mr Taufik , : -bd
it can be change or delete textarea element , and run the script ?
I hope rply
Mohamed Lamine K
Hello Mr Taufik ^ _ ^ ,
can we change the textarea element to other ?
If no,
can we delete it after the page loaded ?
Thank you : -bd
Taufik Nurrohman
The reason i’m using a
<textarea>
element because<textarea>
will make the HTML content inside it becomes a plain text data. So that images, videos and other external assets will not be loaded inside a<textarea>
. I don’t think there’s another element that can do something like that.Unknown
Kalau nambah judul diantara gambar sama summary post nya gimana Bang?
Taufik Nurrohman
Tambah satu parameter lagi, namanya
title
untuk mengambil judul posting:Lalu…
Sodikin Kurniawan
Makasih bang. ..
Iwan Efendi
Makasih mas, sudah saya terapkan terima kasih.