Membuat Read Otomatis Plus Gambar

Berikut ini cara membuat read more otomatis plus menyertakan gambar alias thumnails dihalaman utama blog anda. Jadi anda tidak perlu lagi repot break page artikel yang sobat tulis. nah berikut caranya ane kutip dari blog Hengki
1. Masuk ke blogger, klik template , klik Edit HTML
2. Letakkan kode di bawah ini di atas kode </head> , cari menggunakan Ctrl+F

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

3. Cari kode <data:post.body/>  hapus kode tersebut dan ganti dengan kode di bawah ini. Nanti sobat akan menemukan beberapa kode <data:post.body/>  di edit HTML, maka pilihlah yang nomer dua dari atas. oke

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE &#8594; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></b:if>

Kreatifitaskan auto read more sesuai kehendak dengan mengatur kode berikut :

• var thumbnail_mode = "float";  memutuskan apakah letak thumbnail berada di kiri (float) atau jika tidak silahkan ganti dengan (no-float)
• summary_noimg = 250; (berapa banyak karakter yang ingin ditampilkan di posting tanpa gambar / thumbnail)
• summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
• img_thumb_height = 120; (tinggi thumbnail dalam ukuran pixel)
• img_thumb_width = 120; (lebar thumbnail dalam ukuran pixel)

4. Dan tambahkan kode CSS berikut di atas kode ]]></b:skin agar bertambah menarik penampilan auto read more anda :

.rmlink a {
    background: none repeat scroll 0 0 #E37F52;
    border-radius: 4px;
    color: #FFFFFF !important;
    font-size: 10pt;
    font-weight: 700;
    line-height: 1;
    padding: 1px 3px 1px;
    text-transform: uppercase;
}

Ubah kode #E37F52 sesuai dengan selera anda, lihat kode warna html  untuk membantu anda mencari warna kesukaan.

Sumber : http://hengkikristiantoateng.blogspot.com/2014/01/cara-membuat-auto-read-more-otomatis-thumbnails.html

Berbagi :