Salam
Blogging, Kali BLOGGINGPASURUAN akan memberikan Tips “Cara Membuat Auto Read More OTOMATIS dengan Gambar Thumbnail “. Cara ini
sebenarnya ada di banyak default template template free download yang Anda bisa
dapatkan gratis pada situs download template gratis, Kecuali template
defaultnya Google umumnya tanpa Auto Read more.
Apa
kegunaan Auto Read more ini ? Auto Readmore akan menampilkan sebagian dari isi
posting ( tidak seluruhnya ) dan gambar – thumbnail, Dan akan lebih mempermudah
pengunjung Blog dalam mencari konten menarik di Blog Andan, tentunya Blog Anda
akan tampak lebih efisien space.
Berikut
ini langkah langkahnya :
1. Masuk Ke Blogger
2. Masuk ke DASHBOARD dan pilih EDIT HTML ( jangan lupa backup Template Anda
dulu )
3. Cari kode </head> gunakan Ctrl + F
untuk lebih cepat mencari kodenya.
4. Letakkan Kode dibawah ini diatas kode
</head>
Keterangan :
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
Keterangan :
posts_no_thumb_sum
= 490; jumlah karakter ( huruf ) jika tampilan
tanpa gambar
posts_thumb_sum
= 400; Jumlah karakte huruf menggunakan gambar
img_thumb_height
= 160; Tinggi dari gambar thumbnailnya
img_thumb_width
= 180; Lebar dari gambar thumbnailnya
Anda bisa merubahnya sesuai dengan selera.
5. Cari kode <data:post.body/>
6. Letakkan script dibawah ini sebelum
<data:post.body/>
<b:if cond='data:blog.pageType !=
"static_page"'>
<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/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<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/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Catatan :
<data:post.body/> umumnya ada 3 kode yang sama, Jika
Anda menempatkan script diatas pada kode
<data:post.body/> yang pertama dan
tidak berhasil , maka letakkan pada <data:post.body/>
yang kedua.
7. Save
Template
Demikian tips Cara Membuat Posting Halaman Blog Menggunakan Auto
Read More dengan Gambar Thumbnail dari BLOGGINGPASURUAN, jika ada pertanyaan
mengenai Tips diatas silahkan tinggalkan komentarnya pada kotak komentar
dibawah ini….
sama sama :)
ReplyDeletebiar selalu muncul gambar gimana caranya gan?
ReplyDeleteMaksudnya gimana nih Mas?
ReplyDeleteApa Img Thumbanail (gambarnya) gk bisa muncul ?
mungkin bisa dijelas'in lebih detail lagi