Cara Membuat Read More di Blog Blogspot mungkin belum banyak yang mengetahuinya, untuk itu disini saya akan mencoba menjelaskan secara singkat Bagaimana Cara Membuat Read More di Blog Blogspot.
Tapi sebelumnya saya ingin memberitahukan bahwa Read More yang akan kita buat ini otomatis, maksudnya kita akan belajar Cara Membuat Read More secara otomatis menggunakan bantuan dari jump link yang ada di blogspot.
Dalam tutorial ini saya menggunakan Template Sederhana (standar) dari Blogger.
Baik, langsung saja kita mulai pembahasan cara membuat 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 kode html </head>
3. Letakan kode dibawah ini, tepat diatas kode 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>
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 kode ini <data:post.body/> dan ubah dengan kode 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 == "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>
5. Disini banyak blogger yang bingung, karena ada banyak sekali kode <data:post.body/>, kalau pakai template standar yang diganti adalah yang kode Kedua ( itemprop='description articleBody' )
6. Jika sudah tinggal Anda klik Save dan, silahkan lihat hasilnya. Jika cara membuat read more di blog Anda berhasil, maka hasilnya akan seperti gambar dibawah ini.
Kalau tampilan read more hanya berupa link, sepertinya kurang menarik bukan ? tapi jangan khawatir, kita bisa mengubah tampilan read more dengan bantuan css.
Cara Membuat Read More di Blog Lebih Menarik
1. Sama seperti langkah cara membuat read more diatas, yang pertama adalah buka Template lalu klik Edit
2. Klik CTRL + F dan ketikkan ]]></b:skin> lalu klik Enter
3. Masukkan kode css dibawah ini tepat 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;
}
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 sebenarnya kode javascript diatas bisa Anda ubah sesuai selera, misalnya kita ingin membuat thumbnail-nya lebih besar, katakanlah ingin dirubah menjadi 250px, caranya mudah 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 penjelasan dari saya mengenai cara membuat read more di blog, jika ada hal yang ingin anda tanyakan seputar cara membuat read more di blog ini, jangan sungkan-sungkan untuk menanyakannya melalui kolom komentar dibawah, gratis pastinya.
Akhir kata saya ucapkan terimakasih banyak sudah bersedia meluangkan waktu Anda untuk membaca artikel Cara Membuat Read More di Blog Blogspot.
Terima kasih telah membaca artikel tentang Cara Membuat Read More di Blog Blogspot di blog Tutorial Masa Kini jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.