Cara Membuat Read More di Blog
Salam hangat sobat cwek cowok blog, sebenarnya mungkin saja cara
membuat read more di blog belum banyak mengetahuinya termasuk admin yang masih
newbie. Dan sudah banyak yang posting, lantas mengapa admin post lagi karena
mungkin banyak yang kurang paham apalagi yang masih newbie macam admin, ditambah
lagi postingan yang kebanyakan di google cukup rumit. Setelah mutar kesana
kemari akhirnya ketemu juga caranya, so admin hanya membagi pengalaman saja
yah.
Dalam tutorial ini saya menggunakan Template Sederhana (standar) yang disediakan Blogger. Dan adminpun menggunakannya yang simple saja biar gak ribet dan mudah dipahami
Dalam tutorial ini saya menggunakan Template Sederhana (standar) yang disediakan Blogger. Dan adminpun menggunakannya yang simple saja biar gak ribet dan mudah dipahami
Tanpa banyak basi-basi lagi langsung saja pada topiknya :
Cara
Membuat Read More di Blog
1.
Sobat silahkan login di blogger
2.
Klik Thema dan pilih edit HTML
3.
Klik CTRL + F, dan cari kode html </head>
4.
Letakkan kode dibawah ini, tepat
diatas kode </head>
 |
| Gambar 1 |
Lihat gambar 1
<script
type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 275;
summary_img = 275;
img_thumb_height = 120;
img_thumb_width = 120;
</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(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>
var thumbnail_mode = "float" ;
summary_noimg = 275;
summary_img = 275;
img_thumb_height = 120;
img_thumb_width = 120;
</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(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.
Lanjut dan cari kode ini
<data:post.body/> dan ubah dengan kode HTML di bawah ini.
 |
| Gambar 2 |
 |
| gambar 3 |
Lihat gambar 2 dan 3
<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>
<div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
6.
Sobat cewek cowok blog ingat kode <data:post.body/>
yang diganti adalah yang kode kedua setelah kode itemprop='articleBody'> .
kebanyakan sobat blog kurang paham disini sehingga gagal dalam membuat read
more di blog, termasuk admin juga sih. Maklum masih newbie di dunia blogger
Nahh sobat cewek cowok blog sampai disini sudah paham kan,
cara membuat read more pada blog. Tapi sobat tampilan laman page juga pasti
muncul read more dibawah ini cara untuk menghilangkan read more pada lama
Cara
menghilangkan readmore pada laman page
Naah setelah selesai otomatis
lama page juga akan muncul read more untuk menghilangkannya berikut caranya :
Masih di <data:post.body/> yang kita edit tadi supaya muncul
read more kalau sudah keluar ikuti langkah diatas yaah.
Lihat gambar 5 dibawah ini :
 |
| Gambar 5 |
<div class='post-body
entry-content'>
Tambahkan kode dibawah ini tepat di bawah kode tepat setelah kode ( <div class='post-body entry-content' )
<b:if cond='data:blog.pageType == "static_page"'><br/><data:post.body/><b:else/>
setelah selesai lihat dibawahnya ada kode
<div style='clear: both;'/> <!-- clear for photos floats -->
Lalu tambahkan di atasnya Kode
</b:if>
yang terakhir SAVE dan lihat hasilnya
otomatis tulisan read more pada laman page akan hilang, semoga bermanfaat yaah sobat cewek cowok blog
Tambahkan kode dibawah ini tepat di bawah kode tepat setelah kode ( <div class='post-body entry-content' )
<b:if cond='data:blog.pageType == "static_page"'><br/><data:post.body/><b:else/>
setelah selesai lihat dibawahnya ada kode
<div style='clear: both;'/> <!-- clear for photos floats -->
Lalu tambahkan di atasnya Kode
</b:if>
yang terakhir SAVE dan lihat hasilnya
otomatis tulisan read more pada laman page akan hilang, semoga bermanfaat yaah sobat cewek cowok blog
