Posting Auto Read-More Tanpa JavaScript
Posting ini sekaligus sebagai sanggahan dari pernyataan Saya mengenai tidak adanya tag khusus dari Blogger untuk memproduksi ringkasan artikel pada Optimasi Thumbnail pada Auto Read-More Link dan Widget Blogger
Versi posting auto read-more link yang satu ini adalah murni menggunakan tag data
dari Blogger untuk mengambil ringkasan artikel dan thumbnail posting. Kita akan menggunakan ke dua elemen ini untuk menyisipkan ringkasan dan gambar:
Mengambil Ringkasan Posting
<data:post.snippet/>
Mengambil Thumbnail Posting
<img expr:src='data:post.thumbnailUrl'/>
Selama ini Saya tidak menyadarinya, tapi jika kita melihat isi dari widget Posting Populer, maka kita akan menemukan kedua data
tersebut di dalamnya (sedikit berbeda pada data:post.thumbnailUrl
). Mereka berdua digunakan untuk menampilkan ringkasan artikel sebanyak 100 karakter dan thumbnail berukuran 72 × 72 piksel seperti yang biasanya kita lihat pada widget Posting Populer bawaan dari Blogger - Referensi
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='clear' style='clear: both;'/>
Jika Anda saat ini telah memakai versi auto read-more link script, Anda bisa dengan mudah memodifikasinya. Pada formulir HTML Temlpate, temukan kode ini:
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script>createSummaryAndThumb("summary<data:post.id/>");</script>
Ganti menjadi seperti ini:
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>
Setelah itu temukan kode ini:
]]></b:skin>
Letakkan kode CSS ini di atasnya untuk mengatur posisi thumbnail:
.post-thumbnail {
width:72px;
height:72px;
float:left;
margin:2px 10px 0 0;
}
Terakhir, Anda bisa membuang script auto read-more link yang biasanya terletak di atas </head>
Klik Simpan Template.
Jika posting Anda masih berupa posting biasa, carilah kode ini:
<data:post.body/>
Ganti dengan kode ini:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png'/></a>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<div class='rm-button-wrap'>
<a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
Klik Simpan Template.
Masalah Interpretasi Tag HTML
<data:post.snippet/>
memiliki sikap yang tidak lazim jika dilihat dari segi perannya di dalam menampilkan ringkasan artikel. Dia akan memparse semua kode HTML yang pernah kita ketik di dalam posting menjadi apa adanya. Sehingga hal-hal aneh semacam ini mungkin akan Anda alami terutama jika Anda memiliki posting dengan kumpulan kode HTML di dalamnya:
Blogger sepertinya sudah memperbaiki masalah ini.
Kita bisa saja menggunakan JavaScript untuk menghilangkan semua tag HTML di dalamnya, tapi di sini Saya ingin merealisasikan isi artikel sesuai dengan judulnya (tanpa JavaScript). Jadi untuk kasus ini Saya akan menggunakan CSS Pseudo-Element.
Kita tidak akan meletakkan data:post.snippet
sebagai elemen apa adanya seperti halnya saat kita menuliskan kode <data:post.snippet/>
, tapi kita akan memasukkannya ke dalam atribut seperti ini:
<div class='post-snippet' expr:data-snippet='data:post.snippet'></div>
Dengan cara di atas, maka deskripsi posting akan tersimpan di dalam atribut data-snippet
. Dan untuk menampilkan nilai atribut tersebut sebagai teks, kita bisa menggunakan CSS Pseudo-Element :before
atau :after
seperti ini:
.post-snippet:before {
content:attr(data-snippet);
}
81 Komentar
Syakir Rahman
Akhirnya, setelah dicari-cari ketemu jugaa.. terima kasih mas!
gtrslnc
mas, cara mengatur jumlah post snippetnya gimana mas??
Taufik Nurrohman
Untuk yang ini tidak bisa.
Admin
Mas Taufik, kalau buat thumbnail sejajar dengan judul artikel gimana yah ?
SS nya dibawah ini, terima kasih sebelumnya :-bd
Taufik Nurrohman
Saya cuma bisa bantu sampai sebatas ini: http://jsfiddle.net/zojqesgL/1/
NB: Pakai URL gambar yang asli, jangan pakai URL gambar versi berbagi. Lain kali gambarnya diunggah ke Picasa saja lalu set ke mode publik.
Unknown
mas gimana untuk memunculkan thumbnail video youtube di homepage, soalnya jika sebuah posting tidak menggunakan gambar bisa muncul thumbnail yang no image. tapi kalo menggunakan video youtube gak muncul thumbnail apapun di homepage mas. tapi saya lihat di widget populer post bisa muncul thumbnailnya dari video youtube tersebut. saya mencoba kode ini
expr:src='data:post.thumbnailUrl'
saya ganti dengan kode iniexpr:src='data:post.thumbnail'
seperti pada widget populer post tapi tetap saja tidak bisa :'(Unknown
ow sudah bisa mas ternyata masalahnya gara2 saya tambahin kode ini <b:if cond='data:post.firstImageUrl'> jadi tidak muncul. sekarang sudah bisa \o/ :-bd
Febri Tri Harmoko
kang taufik saya mau tanya..
kalau misal saya memperpanjang tulisan pada postingan hompage nya bisa kagak ? apa kalau kita menggunakan tutor ini. tidak bisa mengatur jumlah kata yang tampil dalam homepage ?
saya mau mengatur sebanyak 250kata yg tampil pada homepage saja. apakah bisa seperti itu?
Cheesy Martabak
Nggak bisa om, kecuali pakai cara yang satunya yang ada di blog ini.
http://www.dte.web.id/2013/01/konsep-auto-read-more-dengan-bantuan.html
Nazril Ilham
asslm bisa bantu saya,, saya mencoba artikel ini dan hasilnya blog saya jadi berantakan,, silahkan cek jagodesain.com
Raka Maulana
om taufik, ane mau tanya,,
kalo mau mindahin judul postingan ke samping thumbnail bisa nggak om???
Taufik Nurrohman
Coba yang ini → /2013/09/memposisikan-judul-dan-ringkasan.html
Unknown
salam kenal sebelummnya mas, maaf saya mau tanya kalau ini namanya javascript apa ya
var atag=_$_7fc8[0],imgtag=_$_7fc8[1],ifrtag=_$_7fc8[2],xab=_$_7fc8[3],nW=_$_7fc8[4],/gi],elmt=document.getElementById(_$_7fc8[5]+nW+xab),sLg=$(_$_7fc8[6]).length?$(_$_7fc8[6]).attr(_$_7fc8[7]):100,fMn=$(_$_7fc8[8]).length&&_$_7fc8[9]==$(_$_7fc8[8]).attr(_$_7fc8[7])?!1:!0,sMn=$(_$_7fc8[10]).length&&_$_7fc8[9]==$(_$_7fc8[10]).attr(_$_7fc8[7])?!1:!0,SSp=$(_$_7fc8[11]).length?$(_$_7fc8[11]).attr(_$_7fc8[7]):5e3,NPp=$(_$_7fc8[12]).length?$(_$_7fc8[12]).attr(_$_7fc8[7]):20,raB=$(_$_7fc8[13]).length&&_$_7fc8[9]!=$(_$_7fc8[13]).attr(_$_7fc8[7])?$(_$_7fc8[13]).attr(_$_7fc8[7]):_$_7fc8[14],hAu=$(_$_7fc8[15]).length&&_$_7fc8[16]==$(_$_7fc8[15]).attr(_$_7fc8[7])?!1:!0,ntx=$(_$_7fc8[17]).length&&
Apa itu java script asli, atau hasil dari yang sudah di pack, kemudian bagaimana cara membuatnya, kalau itu bukan kode asli, bagaimana cara melihat kode aslinya.
terima kasih
Taufik Nurrohman
Itu sudah di-pack. Cara membuatnya, definisikan nama variabel yang tidak enak untuk dibaca sebagai array, lalu isi array tersebut dengan data-data berupa string atau integer seperti ini:
dg patang
Berguna skali