Memasang Autoreadmore

by - May 05, 2017

Hasil gambar untuk tumblr photography

sasha: Ohya kakk bole request lagi gak?
hehehe :3 gimana caranya buat letak readmore
+ thumbnail postingan jadi berubah?

Hello... today is the day! My beloved friend from cyber world, requested to me. How to make autoreadmore on blog. Sekarang shafia jelaskan dulu apa itu autoreadmore. Autoreadmore kita gunakan untuk posting sesuatu dengan rapi tanpa pasang readmore karena sudah otomatis. Jadi, nanti waktu buka beranda blog, yang kalian lihat sudah ada readmore-nya dengan gambar di samping. Begitu klik readmore, gambarnya pindah ke tengah atau sesuai dengan apa yang kita atur di postingan. Kalau gak ngerti, coba aja deh. Ntar kalian tau hasilnya >.<

1. blogger > Template > Edit HTML
2. centang Ctrl + F
3. Cari kode :

</head>

4. kemudian copy kode di bawah ini dan paste di atas kode barusan

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 500;
summary_img = 500;
img_thumb_height = 300;
img_thumb_width = 300;
</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>

5. belum selesai. Cari lagi kode :

 <data:post.body/>

6. PERHATIKAN. karena ada beberapa kode seperti itu, pilih kode kedua yang kamu temukan dan hapus kode tersebut, diganti dengan kode :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'><style type='text/css'>.post-footer {display:none;}</style><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:right'><a expr:href='data:post.url'>(more...)</a></span></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></b:if>

7. langkah terakhir adalah mencari kode :

]]></b:skin>

8. kemudian paste kode di bawah ini, di atas kode barusan

.rmlink a{font-family:lato; background-color:transparent; color:#8ed0ce; font-size:16px; padding:1px 3px 1px; text-transform:none}
.rmlink a:hover{color:#febeba}

9. klik save template.
10. nah, kalau sudah, kamu gak perlu lagi repot-repot pasang garis potong untuk menambah readmore

You May Also Like

0 komentar