Cara Menghasilkan Auto Readmore (Thumbnails) Blogger V2 + Button (Updated 2014) - Pendidikan Blog

Ini merupakan post usang yang aku update kembali dan aku sesuaikan dengan beberapa hal, khususnya duduk kendala editing template yang berlawanan dengan template lama. Selain itu, masih banyak kawan dekat blogger yang menyimak cara menghasilkan auto readmore model satu yang kurang sempurna, dan postingan ini bekerjsama merupakan penyempurnaannya, namun mungkin alasannya postingan ini masih kalah di penelusuran SE (di bawah postingan readmore V1), banyak kawan dekat blogger yang masuk ke sana. Oleh alasannya itu, post ini aku update lagi lengkap dengan gambar-gambar auto readmore yang bisa dipake free.

Script auto readmore blogger/blogspot dengan thumbnails (gambar preview) ini merupakan penyempurnaan dari script auto readmore V1, di mana didapatkan adanya duduk kendala pada halaman statis. Ketika halaman statis ditampilkan, auto readmore ikut muncul, sehingga mesti diberi pengecualian (b if cond & b else) untuk static pages pada scriptnya. Selain itu, javascript dlm auto readmore ini juga bersifat internal jadi tidak perlu lagi menampung file .js eksternal yang diupload ke hosting lain. Meskipun file template menjadi sedikit lebih besar, tetapi loading  page menjadi lebih singkat ketimbang auto readmore sebelumnya.

Langkah-langkahnya:

1. Masuk ke dashboard > Template > Edit HTML. Download/back up file XML template apalagi dahulu mudah-mudahan nanti dapat mengembalikan menyerupai semula bila ada kesalahan.

2. Jika dahulu telah diisi script auto readmore yang pertama, hapus apalagi dahulu, gunakan bimbingan dari posting auto readmore V1 untuk mengenali mana saja yang mesti dihapus dan dikembalikan.

3. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F dan masukkan tag di dalam kotak search, tekan enter):

<!-- Auto read more script -https://ujianhidup10.blogspot.com/- Start --> <script type='text/javascript'> var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar summary_noimg = 430; summary_img = 340; img_thumb_height = 150; img_thumb_width = 150; </script> <script type='text/javascript'> //<![CDATA[ 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(thumbnail_mode == "yes") {     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> <!-- Auto read more script -https://ujianhidup10.blogspot.com/- End --> 

• summary_noimg=jumlah abjad tanpa gambar, 
• summary_img=jumlah abjad dengan gambar, 
• sedangkan img_thumb_height dan img_thumb_width merupakan ukuran gambar (tinggi dan lebar [dalam pixel]).

Ubahlah poinpoin tersebut sesuai dengan keinginan.

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F, masukkan instruksi ke dalam kotak pencarian, tekan enter), dan GANTI dengan:

<!-- Auto read more -https://ujianhidup10.blogspot.com/- Start --> <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'>Read More >></a> </b:if> </b:if> <!-- Auto read more -https://ujianhidup10.blogspot.com/- End --> 

Kostumisasi:
Ganti Read More >> dengan kata-kata yang diinginkan. Atau bila ingin mengubahnya dengan gambar, ganti goresan pena berwarna merah tersebut dengan:

<img border='0' src='url (direct link) gambar readmore'/>

contoh:

<a class='more' expr:href='data:post.url'><img border='0' src='http://hostgambar.com/gambar-readmore.png'/></a>

Pake gambar-gambar ini, ato kalo kurang cocok cari sendiri :p
"Save as" lalu upload sendiri dan ambil url gambarnya. Kalo perlu resize dahulu sesuai dengan keperluan dan ukuran yang pas.

Gambar Readmore Button Gratis (PNG Transparan)

----------------
Update (12102011):
Di komentar kawan dekat Ari di bawah ditanyakan: bagaimana cara mudah-mudahan performa teks di post summary - auto readmore dapat rata kiri kanan (justified)? 
Lihat bab ini pada script kedua di atas. Jika auto readmore telah dipasang, cari dengan Ctrl + F:

<div expr:id='&quot;summary&quot; + data:post.id'>

Untuk menghasilkan teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style='text-align:justify;'
Jadinya:

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

----------------
4. Preview apalagi dahulu, bila telah beres, lalu save.

Gunakan kotak komentar untuk menyodorkan pertanyaan, permasalahan, atau apapun wacana script ini.

mencuri merupakan pekerjaan pengecut! © buka-rahasia.blogspot.com