Cara Membuat Read More Di Blog. Read more atau baca selengkapnya berguna untuk mempersingkat tampilan dari setiap posting di halaman awal blog. Berikut ini ada 2 cara, yang pertama adalah cara membuat read more manual versi blogger dan read more otomatis.
Cara membuat read more manual versi blogger
- Login Ke blogger. Buka Salah satu Artikel kamu.
- Pada Bagian Option klik Insert Jump Break di halaman yang ingin kamu potong. Contoh:
- Sekarang Save artikel kamu dan coba lihat tampilan awal blog kamu. Maka akan seperti gambar dibawah ini.
- Selesai.
Cara diatas adalah membuat read more atau baca selengkapnya secara manual. Jadi kita harus melakukan cara diatas satu persatu disetiap posting. Selanjutnya kita akan membuat read more otomatis, setiap posting akan di potong atau dipersingkat tampilannya dan diberi satu gambar dibagian kiri di halaman awal blog. Ikuti langkah-langkah dibawah ini.
Cara membuat read more Otomatis
- Login ke blogger. Dari halaman Dasboard Pilih pengaturan Template.
- Selanjutnya klik edit HTML dan cari kode </head> dan Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):
- Keterangan Kode: Edit kode2 dibawah ini agar sesuai dengan yang kalian inignkan.
- Sekarang cari kode <data:post.body/> ada 3 kode yang sama, ganti semuanya dengan kode dibawah ini.
- Tulisan Baca Selengkapnya >>> bisa diganti dengan kata yang kalian inginkan, selanjutnya preview template, jika sudah berubah baru save. Selesai.
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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(thumbnail_mode == "yes") {
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>
<!-- Auto read more script End -->
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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(thumbnail_mode == "yes") {
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>
<!-- Auto read more script End -->
summary_noimg = 430; Jumlah Huruf dengan gambar
summary_img = 340; Jumlah Huruf Tanpa gambar
img_thumb_height = 150; Tinggi gambar
img_thumb_width = 150; Lebar Gambar
summary_img = 340; Jumlah Huruf Tanpa gambar
img_thumb_height = 150; Tinggi gambar
img_thumb_width = 150; Lebar Gambar
<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Baca Selengkapnya >>></a>
</b:if>
</b:if>
<!-- Auto read more End -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Baca Selengkapnya >>></a>
</b:if>
</b:if>
<!-- Auto read more End -->
Gambar diatas adalah contoh tampilan read more otomatis, ada gambar dibagian kiri dan dilanjutkan dengan kalimat-kalimat yang ada. Setelah menambahkan read more otomatis, maka setiap Artikel postingan kita tampilannya akan disederhanakan dari halaman awal blog. Jadi kita tidak perlu lagi menggunakan Tools Insert Jump break, seperti read more manual versi blogger. Setelah publikasi, maka tampilan artikel blog akan seperti diatas.
Silakan baca juga artikel tentang cara membuat kotak komentar facebook yang bersebelahan dengan kotak komentar blogger, dibawah posting blog. Dan juga cara mengganti warna judul sidebar widget yang berada di kanan-kiri posting, dan juga bagian bawah footer blog. Atau Cara membuat related post dibawah posting blog. Semoga Bermanfaat.
No comments:
Post a Comment