Membahas tentang desain blog (Blogspot) memang susah-susah gampang. Tanpa harus belajar sangat dalam tentang HTML maupun JavaScript, kita dimudahkan karena banyak teman-teman blogger yang disana membagikan cara Membuat Read More, cara menghilangkan tulisan diberdayakan oleh blogger, desain blog dan lain-lain.
Pada kesempatan kali ini saya akan share cara membuat read more pada blog dan berikut adalah caranya:
Silahkan buka blogger.com kemudian pilih Template, Edit HTML dan jangan lupa untuk memberi tanda centang pada Expand Template Widget. Tapi sebelumnya anda perlu untuk memback up template blog anda terlebih dahulu demi keamanan template anda jika terjadi Galat (Error).
Cari kode </head> (tekan CTRL + F) dan letakkan kode dibawah ini tepat diatas kode </head>
Silahkan buka blogger.com kemudian pilih Template, Edit HTML dan jangan lupa untuk memberi tanda centang pada Expand Template Widget. Tapi sebelumnya anda perlu untuk memback up template blog anda terlebih dahulu demi keamanan template anda jika terjadi Galat (Error).
Cari kode </head> (tekan CTRL + F) dan letakkan kode dibawah ini tepat diatas kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 350;
summary_img = 300;
img_thumb_height = 50;
img_thumb_width = 50;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Bumi Informasi
[You must be registered and logged in to see this link.] - Kumpulan Berita dan Informasi Terbaru
*/
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 2px 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 = 350;
summary_img = 300;
img_thumb_height = 50;
img_thumb_width = 50;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Bumi Informasi
[You must be registered and logged in to see this link.] - Kumpulan Berita dan Informasi Terbaru
*/
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 2px 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>
Setelah itu, cari kode <data:post.body/> jika sudah ketemu, ganti kode tersebut 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;font:normal 9px Arial;text-transform:uppercase;padding:2px 5px 0 0;'><a expr:href=post.url'><img src='https://lh6.googleusercontent.com/-FwOHKtFSP5I/UObRrk3BRHI/AAAAAAAAAeI/m-C5R2snR5M/s108/Read%2520More.png'/></a></span>
</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;font:normal 9px Arial;text-transform:uppercase;padding:2px 5px 0 0;'><a expr:href=post.url'><img src='https://lh6.googleusercontent.com/-FwOHKtFSP5I/UObRrk3BRHI/AAAAAAAAAeI/m-C5R2snR5M/s108/Read%2520More.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
Jika selesai, klik simpan! Namun jangan menyimpannya terlebih dahulu, sebaiknya pratinjau, jika anda rasa tidak ada masalah pada template anda, klik simpan!