Hey sob? anda punya blog? pasti sebagian orang mempunyai blog pribadi seperti saya ini, banyak orang yang menginginkan tampilan blog yang dimilikinya itu memiliki tampilan yang enak untuk dilihat atau tampilannya dinamis, tampilan yang simple serta ringan membuat pengunjung tidak sungkan untuk mengunjungi blog anda. Oleh karena itu saya akan membagikan tips cara untuk membuat tampilan blog anda menjadi simple dengan menambahkan fitur Read More pada halaman home page anda.
Read More Otomatis adalah sebuah fitur tambahan untuk blog agar tampilan blog yang dimilikinya terlihat lebih simple, dinamis serta yang terpenting itu ringan. Tidak heran kalau anda melihat blog yang di halaman Home Page nya tidak menampilkan artikel sepenuhnya, melainkan dengan meneruskan artikel dengan mengklik Read More. Oke langsung saja jika anda ingin menembahkan fitur Read More ke blog anda silahkan simak cara ini.
Langkah Menembah Fitur Read More Pada Blog
1. Buka Blogger anda dan pilih elemen Template, lalu klik Edit HTML.
2. Lalu centang Expand Template Widget.
3. Selanjutnya cari kode </head> (gunakan Ctrl+f untuk mempermudah pencarian).
4. Lalu salin coding di bawah ini dan pastekan tepat diatas kode </head>.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
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. Setelah kode yang diatas sudah diletakan, selanjutnya cari kode <data:post.body/> dan kemudian ganti kode <data:post.body/> dengan coding yang 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 style='float:right'><a expr:href='data:post.url'>Read More</a></span>
<b:else/>
<data:post.body/>
</b:if>
6. Dan terakhir simpan Tamplate anda dan lihat hasilnya.
7. Selesai.
3. Selanjutnya cari kode </head> (gunakan Ctrl+f untuk mempermudah pencarian).
4. Lalu salin coding di bawah ini dan pastekan tepat diatas kode </head>.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
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. Setelah kode yang diatas sudah diletakan, selanjutnya cari kode <data:post.body/> dan kemudian ganti kode <data:post.body/> dengan coding yang 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 style='float:right'><a expr:href='data:post.url'>Read More</a></span>
<b:else/>
<data:post.body/>
</b:if>
6. Dan terakhir simpan Tamplate anda dan lihat hasilnya.
7. Selesai.
Oke mungkin itu saja yang bisa kita berikan mengenai artikel "Cara Mudah Membuat Read More Otomatis Pada Blog" ini, semoga dengan apa yang sudah kita berikan ini dapat bermanfaat bagi Kalian. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar. Terimakasih.
Posting Komentar