Assalamu'alaikum sahabat semuanya....
Alhamdulillah, terima kasih sudah berkunjung ke blog ana ini yang postingannya campur aduk, he... he, kayak gado-gado aja kali ya! Sengaja ane update postingan kali ini tentang tutorial blogging, karena sebelumnya ane terus postingan tentang artikel Islami. Nah kali ini ane ingin berbagi info tentang seputar tips dan trik blog buat sahabat semua semoga bermanfaat, yaitu cara membuat read more pada blog.
Fungsi dari read more atau dalam bahasa Indonesia adalah baca selengkapnya yang kegunaannya untuk meminimalis sebuah postingan yang cukup panjang. Nah dengan sedikit mengedit kode HTML template blog kita, supaya postingan yang berada pada homepage blog dapat tertata dengan rapi yang pastinya enak dilihat oleh pengunjung yang berada di halaman depan blog kita.
Lalu bagaimana caranya, yuk ikut langkah-langkah dibawah ini :
1. Login ke dasbor blogger kamu.
2. Pilih Layout atau lansung pilih Template.
3. Pilh Edit HTML.
4. Pilih Proses, untuk melanjutkan
5. Jangan lupa centang expand widget template untuk berjaga-jaga dari kesalahan kode yang kita tambahkan.
6. Kemudian cari kode </head>. Untuk mempermudah tekan ctrl+F dalam mencarinya.
7. Copy dan masukkan kode dibawah ini tepat diatas </head>.
8. Setelah itu cari kode seperti ini < data:post.body />.
9. Hapus kode tersebut lalu ganti dengan kode dibawah ini.
10. Save template.
Tulisa read more dapat anda ubah menurut selera atau dengan gambar. Kemudian klik tutup, setelah itu biarkan sebentar agar kode yang kita tambahkan bekerja dengan sempurna. Kemudian lihat blog dan pilih salah satu postingan kamu untuk mengetahuinya hasilnya.
Itu saja yang dapat ane bagikan pada tutorial kali ini semoga bermanfaat.
Alhamdulillah, terima kasih sudah berkunjung ke blog ana ini yang postingannya campur aduk, he... he, kayak gado-gado aja kali ya! Sengaja ane update postingan kali ini tentang tutorial blogging, karena sebelumnya ane terus postingan tentang artikel Islami. Nah kali ini ane ingin berbagi info tentang seputar tips dan trik blog buat sahabat semua semoga bermanfaat, yaitu cara membuat read more pada blog.
Fungsi dari read more atau dalam bahasa Indonesia adalah baca selengkapnya yang kegunaannya untuk meminimalis sebuah postingan yang cukup panjang. Nah dengan sedikit mengedit kode HTML template blog kita, supaya postingan yang berada pada homepage blog dapat tertata dengan rapi yang pastinya enak dilihat oleh pengunjung yang berada di halaman depan blog kita.
Lalu bagaimana caranya, yuk ikut langkah-langkah dibawah ini :
1. Login ke dasbor blogger kamu.
2. Pilih Layout atau lansung pilih Template.
3. Pilh Edit HTML.
4. Pilih Proses, untuk melanjutkan
5. Jangan lupa centang expand widget template untuk berjaga-jaga dari kesalahan kode yang kita tambahkan.
6. Kemudian cari kode </head>. Untuk mempermudah tekan ctrl+F dalam mencarinya.
7. Copy dan masukkan kode dibawah ini tepat diatas </head>.
<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>
//<![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>
8. Setelah itu cari kode seperti ini < data:post.body />.
9. Hapus kode tersebut lalu ganti dengan kode dibawah ini.
<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>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b>Read More</b> »»   </a></span>
</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>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b>Read More</b> »»   </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
10. Save template.
Tulisa read more dapat anda ubah menurut selera atau dengan gambar. Kemudian klik tutup, setelah itu biarkan sebentar agar kode yang kita tambahkan bekerja dengan sempurna. Kemudian lihat blog dan pilih salah satu postingan kamu untuk mengetahuinya hasilnya.
Itu saja yang dapat ane bagikan pada tutorial kali ini semoga bermanfaat.