Cara Membuat Read More adalah judul postingan online on the net update dari http://www.tutorialdigital.com/ bercerita tentang Cara Membuat Read More.
Read More berasal dari kalimat bahasa inggris yang kalau di indonesiakan artinya adalah baca selanjutnya atau baca selengkapnya.
Read More banyak digunakan para blogger di halaman index nya untuk mempersingkat postingan blognya dan agar pada halaman index tidak terlalu panjang jika digulung kebawah menggunakan mouse scrool.
Read More juga dapat berfungsi untuk menghindari duplicat content (duplikasi postingan di blog sendiri ). Oleh karena itu digunakanlah read more untuk memenggal tulisan postingan sehingga yang tampil di halaman index adalah penggalan atau ringkasan dari postingan.
Secara singkat fungsi Read More adalah sebagai berikut :
1)Membuat tulisan postingan menjadi penggalan saja atau lebih singkatnya memenggal tulisan.
2)Membuat singkat tulisan di halaman index / halaman depan
3)Membuat agar tulisan postingan di blog tidak ada duplicat content.
lalu bagaimana cara membuat Read More di Blogspot ?
Berikut Cara Membuat Read More untuk Blogspot dari tutorial digital menggunakan javascript:
1) Login ke Blogger Blogspot
2) Tuju ke halaman Tata Letak
3) Kemudian klik Edit HTML untuk mengedit template.
4) Pada tampilan kode template cari kode </head>. Gunakan kontrol cepat untuk mencari dengan menggunakan keyboard tekan ctrl+F (tekan ctrl diikuti dengan menekan tombol F pada keyboard )kemudian tuliskan pada kolom disamping cari kode </head>
5) Kemudian letakkan kode berikut tepat diatas kode </head> :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Auto-readmore-->
<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>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 50;
summary_img = 50;
img_thumb_height = 0;
img_thumb_width = 0;
</script>
<!-- Auto-readmore-->
</b:if>
Keterangan kode :
- <b:if cond='data:blog.url == data:blog.homepageUrl'> ( Kode pembuka untuk membuat tampilan read more hanya pada halaman depan blog dan halaman /search atau halaman label atau halaman kategori dan sejenisnya.)
- <!-- Auto-readmore--> ( Kode yang tidak akan dibaca browser. ini kode fungsinya untuk memudahkan kita saja dalam mencari kode auto read more di template untuk pengaturan selanjutnya.
- <script type='text/javascript'> //<![CDATA[( Kode pembuka javascript untuk xml seperti kode template blogger yang menggunakan format xml kalau untuk HTML cukup <script type='text/javascript'>)
- 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+'...';
} ( Kode fungsi untuk memenggal tulisan )
- 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;
} ( Kode fungsi untuk menampilkan penggalan tulisan )- //]]>
</script> ( Kode Penutup javascript untuk format xml)
- <script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 50;
summary_img = 50;
img_thumb_height = 0;
img_thumb_width = 0;
</script> ( kode javascript untuk pengaturan read more )Apa saja yang bisa diubah ? ubah angka yang berwarna merah.
summary_noimg = 50; ( untuk mengatur jumlah kata jika postingan tanpa gambar )
summary_img = 50; ( untuk mengatur jumlah kata jika postingan disertai gambar )
img_thumb_height = 0; ( tinggi gambar dalam ukuran pixel)
img_thumb_width = 0; (lebar gambar dalam ukuran pixel)
- </b:if> ( kode penutup untuk membuat tampilan read more hanya pada halaman depan blog dan halaman /search atau halaman label atau halaman kategori dan sejenisnya.)
6) Setelah selesai mengatur read more dan menempatkannya diatas kode </head> maka pekerjaan anda belum selesai sampai disini.Langkah selanjutnya adalah menyimpan template degan cara klik tombol simpan.
7) Setelah itu centang expand widget untuk menampilkan kode lengkap dari template.
8) Cari dan temukan kode <data:post.body> kemudian ganti kode tersebut dengan kode dibawah :
<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:left'><a expr:href='data:post.url'/> Klik Untuk Baca Selengkapnya - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Kalimat yang berwarna merah bisa anda ganti dengan tulisan sesuka hati anda. Bisa anda bikin tulisan Read More atau Baca Lebih lanjut atau teruskan membaca.
9) Simpan dan lihat hasilnya di browser.
10) Selesai sudah pekerjaan anda dalam membuat Read More dan selesai juga tutorial cara membuat Read More untuk blogspot dari Tutorial Digital.
Setelah memasukkan alamat email Silahkan cek email anda dan klik tautan link konfirmasi untuk mengkonfimasi status email pendaftaran anda.
Recent Post
Komentar
Statistik
Poskan Komentar