Menyembunyikan Image Pada Read More Otomatis

image Menjawab pertanyaan sobat alhadi pada postingan revisi read more dan slider pada soft template, yang menanyakan bagaimana cara menghapus read more yang berupa gambar pada template, atau merubah read more berupa gambar menjadi read more text. Dari pertanyaan itu, mungkin yang di maksud adalah menyembuyikan image atau gambar pada read more otomatis sebelum tampil pada halaman penuh.

 

Jika sobat sudah membaca postingan saya tentang membuat read more otomatis, maka sobat akan menemukan kode script seperti berikut :

 

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px; visibility:hidden; display:none"><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>

 

kode yang berwarna merah adalah kode yang baru saya tambahkan, kode tersebut berfungsi untuk membuat image tidak tampil pada halaman postingan sebelum read more di klik sampai tampil pada halaman penuh.

 

Selamat mencoba !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

33 comments

7 Maret 2010 20.27

Makasih untuk tutorialnya kawand...

8 Maret 2010 07.45

makasi infonya,,,

8 Maret 2010 21.44

Mantabb Tutorialnya,..thnks

9 Maret 2010 05.35

mas, bagaimana dong kalau seandainya di template HTML saya tidak ada kode seperti diatas ?
soalnya readmore gambarnya terbawa langsung dari templatenya...

selain itu, bisa ga mas kita pakai script diatas untuk mengganti readmore gambar menjadi readmore teks ?

9 Maret 2010 07.48

@ Fajri : bs mas fajri, di kembalikan aja dulu read more yg manual ke setting normal, trus pasang script auto read more-nya

9 Maret 2010 20.09

mas bisa tidak mengedit templatenyaa ?
soalnya saya benar2 bingung bagaimana cara mengeditnya... nanti mas bisa kok bikin itu template editan mas....
mas bisa bantu tidak ?
kalau bisa saya minta alamat emailnya yaa...

9 Maret 2010 20.34

kalau aq lebih seneng menggunaka readmore text ketimbang gambar

10 Maret 2010 05.39

@rizky2009 : justru itu.... aku pengen ganti readmore nya menjadi teks.... bukan gambar lagi...

10 Maret 2010 07.01

@ fajri : oke, upload aja dulu template-nya mas, trua kasih sy url-nya biar sy download template-nya punya mas, tar sy usahakan edit read more-nya

10 Maret 2010 15.27

@ mas dody : mas ini URL templatenya.... mohon maaf saya uploadnya di ziddu... dikarenakan cuma itu yang saya punyaa....

http://www.ziddu.com/download/8905049/SimpleFreshBloggerTemplates.rar.html

10 Maret 2010 15.32

mas ini saya kirim link downloadnyaa...

http://tinyurl.com/y9kk8ho

nantti jika mas telah berhasil mengganti readmore berupa gambar menjadi readmore teks (kalau bisa yang udah di autoreadmore kan) kabari yaa mas...

terimakasih banyak mas

11 Maret 2010 06.04

@ fajri : sdh jd tuh, coba cek disini, sdh pas pa blm? sekalian sy perbaiki tuh widget sexy sharing-nya, punyamu ga keluar gambar-nya, klo sdh pas silahkan download disini

11 Maret 2010 14.00

@mas dodi : makasih yaa mas udah di perbaiki...
mas itu udah autoreadmore kan ?
langsung saya sedot yaa templatenyaa....

11 Maret 2010 14.05

mas kalau kita mau mengganti gambar Advertise In This Space (468 x 60 Pixel) berubah menjadi dalam bentuk element yang bisa diisi widget/ kode html gitu bisa tidak ?

11 Maret 2010 14.07

SAMBUNGAN >>>>>

contohnya seperti pada template mas, yang ada iklan wordlinx.... maksudnya begitu mas...

11 Maret 2010 16.32

@ fajri : bisa dong, tar klo sempat sy cek lagi ya

11 Maret 2010 16.44

@ fajri : sdh ketemu sobat, coba cek disini, peqitu kah??

11 Maret 2010 17.26

bagaimana mas cara menggantinya ?

12 Maret 2010 00.14

@ fajri : coba klik expand template widget trus cari kode seperti berikut :

<div class='headerright'>

letak kode html banner disini

</div>


oke sobat fajri, selamat memasang bannernya

12 Maret 2010 07.27

Info yang keren nih mas...tapi di blog saya ko masih belum bisa pasang related post ya...pdahal sdh 5 kali coba pasang script-nya

template saya itu sdh ada read more-nya mas...gimana solusinya ya mas...

mau ganti template..tpi rasanya sayang...

makasih sebelumnya ya mas

13 Maret 2010 09.49

Mas, saya kembali pake template saya yang lama...tapi ko ga bisa masang related post ya mas...

mohon bantuannya mas...maklum msih nyubie bgt nih

Makasih sebelumnya ya mas

13 Maret 2010 14.36

@ zona profit : memang ada template yg ga support dgn cara pasang related post versi yg ada di blog ini, bs di coba pke related post pengganti link within atau related post di sidebar

14 Maret 2010 05.13

sibuk nih kayaknya master kita satu ini...:D

14 Maret 2010 14.52

makasih banyak yaa mas dody....
mas, bagaimana cara memodifikasi kotak komentar agar cantik seperti diblog anda yang satu ini ?

3 April 2010 06.09

mas, kenapa ya gambar pada setiap postingan ga ada yang keluar ?
kalau mau keluar harus di klik dulu readmorenya, baru tuh muncul gambarnya...
kenapa gitu yaa ?
saia pake template yang dulu pernah mas perbaiki sharing sexy nya...

27 Maret 2011 19.37

mas, kenapa ya pas HOME itu read more nya benar, tpi kalo udah klik posting lama jadi kaya gk pake readmore

23 Juni 2011 07.15

hehe, thx info.a sob,,, sementara disimpan dulu ni ilmu.a, siapa tau nnti butuh :)

1 Agustus 2011 16.21

hmm, kagak bisa pak. mungkin uda naseb2 :(
visitback yah

20 Juli 2012 00.49

Terima kasih buat informasinya. Alhamdulillah, sudah berhasil menyembunyikan gambar setelah read more. Masalah ini muncul setelah Blogspot mengeluarkan fitur auto readmore.

3 Agustus 2012 13.40

sya udah slesai prosesnya, dan berhasil menyembunyikan gambar posting , tapi laman saya kok gak bisa dibaca penuh, jadi walau udah diklik readmore tetep kayak tampilan depan, terus postingnya kok selalu ada .fullpost{display:none;} apa mesti kayak gitu???
Mohon kejelasannya...
Terima kasih sebelumnya....

8 Oktober 2012 16.16

mas, kalo blog saya gimana ya? dulu bikinnya pake blogspot yang lama, sekarang mau dihilangkan aja continue readingnya, kok ga bisa alias, lupa html-nya yang mana. bisa minta tolong? thx.

3 November 2012 17.41

okeh siippp om mksh yaaa

3 November 2012 21.03

makasih tutorialnya, sangat membantu. soalnya kalau auto readmore pake thumbnail rasanya jelek bgt.

Poskan Komentar

Reader Community

Recent Comments