Cara Menciptakan Read More Di Blog Blogspot

Cara Membuat Read More di Blog Blogspot mungkin belum banyak yang mengetahuinya, untuk itu disini aku akan mencoba menjelaskan secara singkat Bagaimana Cara Membuat Read More di Blog Blogspot.

Tapi sebelumnya aku ingin memberitahukan bahwa Read More yang akan kita buat ini otomatis, maksudnya kita akan berguru Cara Membuat Read More secara otomatis memakai dukungan dari jump link yang ada di blogspot.

Dalam tutorial ini aku memakai Template Sederhana (standar) dari Blogger.

Baik, eksklusif saja kita mulai pembahasan cara menciptakan read more di blog blogspot.

Cara Membuat Read More di Blog

1. Masuk ke Template dan klik Edit Template

2. Klik CTRL + F, dan cari arahan html </head>

3. Letakan arahan dibawah ini, sempurna diatas arahan html </head>

<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>

4. Lanjut dan cari arahan ini <data:post.body/> dan ubah dengan arahan HTML di bawah 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>
<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 == &quot;item&quot;'><data:post.body/></b:if>

5. Disini banyak blogger yang bingung, alasannya ada berbagai arahan <data:post.body/>, kalau pakai template standar yang diganti yaitu yang arahan Kedua ( itemprop='description articleBody' )

6. Jika sudah tinggal Anda klik Save dan, silahkan lihat hasilnya. Jika cara menciptakan read more di blog Anda berhasil, maka akhirnya akan menyerupai gambar dibawah ini.

Kalau tampilan read more hanya berupa link, tampaknya kurang menarik bukan ? tapi jangan khawatir, kita dapat mengubah tampilan read more dengan dukungan css.

Cara Membuat Read More di Blog Lebih Menarik

1. Sama menyerupai langkah cara menciptakan read more diatas, yang pertama yaitu buka Template kemudian klik Edit

2. Klik CTRL + F dan ketikkan ]]></b:skin> kemudian klik Enter

3. Masukkan arahan css dibawah ini sempurna diatas ]]></b:skin>.

.arrow {
font-size: 18px;
font-family: serif;
font-weight: 900;
}
.readmore-link {
margin-top: 20px;
border-bottom: 1px solid gainsboro;
margin-left: 250px;
}

4. Langkah terakhir tinggal anda klik save template.

5. Silahkan Anda cek tampilan read more anda yang baru, gimana ? tambah hancur bukan, haha.

Untuk informasi saja, bahwa sesungguhnya arahan javascript diatas dapat Anda ubah sesuai selera, contohnya kita ingin menciptakan thumbnail-nya lebih besar, katakanlah ingin dirubah menjadi 250px, caranya gampang tinggal Anda ganti img_thumb_height = 120; menjadi img_thumb_height = 250; dan img_thumb_width = 120; menjadi img_thumb_width = 250;

Mungkin itu saja klarifikasi dari aku mengenai cara menciptakan read more di blog, bila ada hal yang ingin anda tanyakan seputar cara menciptakan read more di blog ini, jangan sungkan-sungkan untuk menanyakannya melalui kolom komentar dibawah, gratis pastinya.

Akhir kata aku ucapkan terimakasih banyak sudah bersedia meluangkan waktu Anda untuk membaca artikel Cara Membuat Read More di Blog Blogspot.