Monday, May 21, 2012

Membuat readmore otomatis part ||

Em salah satu temen yaitu Pemilik blog myNameFaizal sering bertanya cara membuat readmore karena dia bilang gak bisa nerapin readmore otomatis di blognya nah kali ini saya akan membahas cara membuat readmore otomatis part ||.

Gambar readmore kreasiku

Kenapa part || karena sebelumnya saya sudah pernah membahas Cara membuat readmore otomatis Disini.

1. Log in ke blog anda
2. KLik Rancangan / Template
3. KLik Edit HtmL
4. Cari Kode </head>
5. Dan Letakan kode di bawah ini Di atas kode </head>

<script type='text/javascript'>
var summary_noimg    = 300,
    summary_img      = 300,
    img_thumb_height = 80,
    img_thumb_width  = 90;
</script>
<script type='text/javascript'>
//<![CDATA[
/**
 * =======================================================================
 * Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo
 * =======================================================================
 */
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;"><img alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" 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>

5. SimpaN Template
6. Setelah Anda simpan Template Lalu Centang Expand Template widget Dan Cari Kode di Bawah ini

<data:post.body/>

Setelah ketemu Anda Hapus kode Tersebut dan Ganti dengan Kode ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'> READMORE....!! </a>
</b:if>
</b:if>

7. Klik SIMPAN.

Kode javascript part || ini ringan dan juga ukuran thumbnail nya sudah di optimasi agar ukurannya mengecil dan loadnya ringan kode ini pernah di bahas di blog bang Taufik. Oke segitu aja ya semoga berhasil.

Post ini sengaja saya update karena beberapa blogger gak mengerti maksud tulisanQ.

76 komentar postingan ini

hadir untuk meramaikan suasana

Aduh makasih gan, ngerepotin ga nih :)) mudah2an bisa dan sukses, di taro kode di atas di getged atau di edit html?

Ya ampun Masbroo Coba di Teliti Donk tulisannya haduhhh

nice tutor..
sayangnya blog gw gk bisa dipasangin readmore apa aja..

Thanks sob, jadi gak perlu bikin readmore lagi ya? sudah automatis :)

wah gak tau deh gan, aku bingung harus nulis gimana biar orang ngerti maksud postingan ini :(

aduh zal coba dong di baca dengan teliti postingan diatas, *ikut2an hehehe

Berkunjung ke blog ini, dapet ilmu lagi hehe :D

blog saya udah susah. nggak ilang aja udah untung

hahahah ikut2 aja mbak ckckckck

Hemmm fine. Sama ajah, ujung2nya suruh ganti "data: post" yang aku cari ga ketemu2 pake ctrl+f juga. Ga boleh kali :( ga boleh pake readmore otomatis.

dulu pernah pake kayak gini tapi entah kenapa pas di bagian laman-laman yang lain kok berantakan ya?? jadi di ilangin lagi.. read morenya sih bisa otomatis di halaman utama..

Masa gak punya data:post.body sih waduhh kasian banget tuh blog hehehhee

Dulu itu karena kurang tag kondisional nya bang

ini yang saya cari-cari sobat cara membuat readmore dio postingan saya ijin menggunkannya sobat.. oiya jadi gambar sebagai tagline juga iuk menyusut kan di halaman depan sobat???

woww... keren nih mas.. pasti akan sangat bermanfaat buat kawan2 yang membutuhkan mas :) sukses terus buat masnya :)

itu mah pasti belom di centang expand nya :)

Hhaha Ternyata kodenya dia gak begitu gan beda barusan aku liat source kodenya

kalau gue seneng yg langsung tanpa redmore.. Gan

wah ini ga pake scip ya gan. lebih ringan dong. ehm. mantap nie. makasihya. ane simpen dah, kalau mau make jadi tau tempatnya.

iya sih gan tpai kadang2 Lupa :D

Ya ampun Kelihatan ni langsung baca, jelas2 disana tulisannya javascript kok komennya gak pake script :((

pasti belum mencentang Expand Template Widget, makannya data:post.body nggak ketemu

itu bang yang b:if == static itu kodenya

Bukan Bang Taufik kodenya dia beda karena template blogger yang sekarang ada tambahannya semacam itemprove gitu kalau gak salah

minta tolong boleh??
kalau bleh tlong dibawah kode itu dikasih kode itu lagi tapi dibuat textarea mas,, biar pengguna hp bisa mengcopas kodenya dengan sempurna, klau gak dibuat textarea kodenya jadi berantakan... Hehe
jadi saya gak bisa coba deh... :D ..

gan , kenapa ya di blog ane gk bisa pasang read more ?? padahal udh ane ikutin tutor nya dari awal sampe akhir ..

Ada gak kode - kode yang di maksud..?

Thanks infonya,
blognya keren :)

waahh,,,terima kasih buat infonya :D

DOWNLOAD ANIME SUBTITLE INDONESIA DISINI YA : http://rizky-kazegami.blogspot.com/

Sama sama dan terima kasih :)

thanks bro...jadi bermanfaat nih.salam blogger

Kalau menghilangkannya gimana ya??

Saya ingin menghilangkannya, reda more saya bawaan template.
Saya udah coba berkali - kali tapi tidak bisa.
Mungkin kwan - kawan ada yang tau???

wewww lumayan susah menjelasinnya hehehe kapan - kapan aku posting untuk caranya

Sukses gan...
hasilnya seperti ini
www.operatingsystem1.blogspot.com

Ada juga cara kaya gini ya? Trims

Wow. its work fine Gan. .

thanks . .
:D

waqh bagus bgt blog nya gan..mampir juga ke punya gua

Sob.. kalau untuk nyepetin loading blog biar gak lemot ntuh gmn y sob.. ini blogmu bnyak animasina tp kok enteng??? ^_^

Animasinya aku buat dengan CSS3

Bro,,, bisa gak tulisan yg tampil rata kiri kanan (justify) ?
thanks atas jawabannya..
salam blogger

Bisa mas itu di atur lewat kode css nya

Gan ntu kode data post body kok kgak nemu ya... ?

Kode yang mana mesti diubah sob?
selamat ramadhan 1433H ;)

wah keren nih.... infonya sangat membantu buat newbie kaya saya... makasih gan...

work 100 % gan, thanks bgt...
gw liat blog ttangga mlah gk pda beres tu tutorialnya...

http://blacklistcorp.blogspot.com

Wih............
Bagus nih buat tambahan ilmu.

Makasih Gan , saya blogger pemula nih , :D
Saya boleh Copas Postingannya ngga??:) :) :)

Langsung di praktekin gan, terima kasih atas artikelnya, sangat bermanfaat :)

Salam

Thanks sudah berbagi ilmunya, sukses selalu...

[blockquote]Keren[/blockquote]

kunjung balik di http://dj-doo.blogspot.com/ :)

dan jgn lupa follback ya

makasih buaanyak bro... manfaat betul..

Thank Gann...

Mantab infonya
berkunjungaya ke blog saya http://cahya-se.blogspot.com/

Thanks sobat..akhirnya bisa jg..lega deh

blognya bagus bro,... bikin kita-kita jadi semangat terus ngeblog,... thanks ya bro,...

wah manteb nih tutorialnya di tunggu kunjungan baliknya ya masbro

mantab gan postingannya,,, thanks gan,..
=D

wah sangat membantu..menambah ilmu..

KODE
[blockquote]Kata-kata Anda[/blockquote]

Jika ingin memasukan gambar gunakan tag
[img]url gambar[/img]
Jika Video
[youtube]URL Video[/youtube]
Jika kata - kata mutiara gunakan
[blockquote]Kata-kata Anda[/blockquote]
Emoticon
EmoticonEmoticon