Sudah berlangganan artikel blog ini via RSS Feed?

Cara pasang Auto Read More otomatis

read moreKali ini kita akan mencoba cara menggunakan Auto Read More otomatis, yang membuat cara penulis  atau posting artikel lebih mudah karna Read More kali ini kita tidak harus memotong  tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <span class="fullpost">..</span> atau <div class="fullpost">..</div> seperti Read More ini dan yang Read More plus judul artikel. Hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungkin lebih nyaman saya sebut saja dengan fasilitas image thumbnail, dan kita juga dapat pengatur jumlah karakter yang ditampilkan. Lebih jelasnya lihat gambar dibawah ini.

Oya kalo temen - temen masih mengunakan Read More versi lama lebih baik di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini,

<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

Setelah itu langsung ke halaman EDIT HTML , Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste  kode dibawah ini:


<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;

</script>

<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;"><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>

Masih pada halaman EDIT HTML , Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah <data:post.body/>, Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini


<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Lalau simpan dan lihat hasilnya :)

Keterangan:
  • var thumbnail_mode = "float";   (kita dapat memutuskan apakah letak thumbnail berada di ( float) kiri atau jika tidak silahkan ganti dengan (no-float )
  • summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
  • summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
  • img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
  • img_thumb_width = 120 ; (Thumbnail 'lebar dalam piksel)

Sebelumnya saya berterimakasih kepada o-om.com untuk artikel Cara pasang Auto Read More otomatis dan chordpoprock.blogspot.com untuk contohnya.

Terimakasih sudah mengunjungi blog ini... :D

Powered by  MyPagerank.Net

41 komentar:

lina mengatakan...

PErtamaxx lagi :D

putra mengatakan...

Wah mantep nich....

tapi bikin pusing hihihi....

Kempoel Qucluk mengatakan...

thank's mas infonya berguna banget

kolektor FOTO FOTO KUBURAN BAND mengatakan...

terimakasih banyak ya mas.... Semua artikelnya bagus bagus. Aku belajar banyak dari mas.
Sekalian ini aku nitip bawa koleksinya foto foto KUBURAN BAND... hihihi,.

putro mengatakan...

@ Kempoel Qucluk : sering - sering main mas. :P

@ kolektor FOTO FOTO KUBURAN BAND :ya sama2 :D

Anonim mengatakan...

mAz...
kMarin saYa liaT bLOg mAz buAt bisNis proSes untuk web shop..
tolong di tAmpilin lg donk..
^_^

Lala mengatakan...

kereeennn, kapan kapan aku coba dech, sekarang masih males utak atik HTML :P

rudee mengatakan...

mantabs berat!!

chord-chord mengatakan...

hmmm... good..good..

chord-chord mengatakan...

sip!!! maknyoss..

alyssa soebandono mengatakan...

oh..yeah.. yuk.. praktek langsung...

Dody F9 Torres mengatakan...

wah pusing bro..kepanjangan, tar aja deh prakteknya..thanks

Kolektor FOTO FOTO MANOHARA PINOT mengatakan...

sugeng ndalu mas,.. makasih artikelnya ok. nh mampir bawa foto keren eren. Foto nya MANOHARA PINOT. dah liat blum mas? hehehe

kudel mengatakan...

Boleh dicoba tuh triknya.., Thank's infonya

putro mengatakan...

@ all : makasih... , sering2 mampir :D

chordpoprock mengatakan...

cari back link doang ... :D

om-bob mengatakan...

thanks info nya.. numpang backlink nya omz,, :D

hack-b mengatakan...

ikutan juga yah...

BodeL_bully mengatakan...

makasi bnyk bro atas informasi nya . .
good Luck ja bwt Lho . . . ;) ;) :D :D

ArVandy mengatakan...

Terima kasih kakak atas infonya, smakin banyak ilmu aja nich saya stelah mengunjugi blog ini :D

al mengatakan...

maaf mas... saya mau tanya ...saya udah coba memasang link diatas.. tapi kenapa yah... di Home nya postingan nya tidak teratur... terlalu rapat.. coba liat di link saya http://www.alchans.blogspot.com/ sebelum nya terima kasih

Habib alhabsy mengatakan...

kereen, sukses mas. thank u

Squall mengatakan...

Wah pzink bngt....
klo bza pzank lg artkel ttg hal yg sma tp lbih mdah d mngerti...

Fiose mengatakan...

Maaf mas, kok nggak jalan ya padahal udah persis perintah. Thanks

tama mengatakan...

oweeekeeeeeeeeeee......deh

tama mengatakan...

kang aku dah coba tpi ko pas diklik read morenya malah gada tulisanya cm judulnya doang????

info-lockerz.co.cc mengatakan...

Makasih ya atas infonya, sangat membantu saya untuk lebih maju.

Saya juaga mau kasi info Lockerz lagi bagi-bagi IPod Touch, PS 3, MacBook Air, PSP, Wii, Xbox 360 secara GRATIS !!!
untuk informasi, Langsung aja ke http://info-lockerz.co.cc

syupi best mengatakan...

mantaaaaaaaaaaaaaap o-om terussssss

Nikmaya John mengatakan...

Bisa hemat space nih,,,,

unamed mengatakan...

nice you web

jual karpet mengatakan...

oh jadi begitu yah ?

ilawati Pristiani mengatakan...

terimakasih atas artikel cara pasang auto readmorenya ya gan...

baca disini menarik loh mengatakan...

ok deh dan makasih

Kumpulan Tutorial Ilmu Komputer mengatakan...

Mantap gan...
Scrip java pada kriting begitu...

mencegah kanker dengan green palapa mengatakan...

terimakasih atas infonya, sangat bermanfaat sekali buat saya, salam kenal dan salam sukses selalu..!

ayo lihat mengatakan...

thanks atas artikel cara pasang auto readmore otomatis ini...

readmore mengatakan...

Info yang sangat bermanfaat sekali untuk saya, saya sedang mencari info ini, terimakasih banyak, semoga anda sukses!

lihat selengkapnya mengatakan...

Mantap Sob, terimakasih atas artikelnya ya, saya akan berkunjung kembali..

silahkan klik mengatakan...

biasanya readmore otomatis ada pada template bawaan sob, tapi terimakasih atas artikelnya...

Vimax Original Pembesar Mr.P Herbal mengatakan...

artikelnya sangat membantu thanks for sharing
kunjungi web kami gan => www.vimaxkapsuloriginal.com

OBAT ITP mengatakan...

die Informationen sind sehr nett und hilfsbereit zu uns, ich danke Ihnen sehr.

Posting Komentar


 

My Friends Google

My Profile

cojogja Blog ini saya buat, untuk berbagi informasi kepada teman - teman, dan sebagai rangkuman untuk diri saya sendiri. ( Semoga gak bosen Dengan Blog Saya... :D )