Thursday, November 10, 2011

Cara Membuat Read More Blog dengan Mudah

tutorial blog, blogger tutoral, blogspot, blog, Membuat Read More Blog, Auto Read more, Cara buat baca selengkapnya
Pada halaman pertama blog atau halaman branda, jumlah default post yang ditampilkan adalah tujuh post (Silahkan lihat bagian setting di bagian dashbor blog sobat). Kalau ke tujuh postingan sobat blogger ditampilkan pada satu halaman, sudah pasti antara header dan footer blog terdapat jarak yang cukup jauh. Hal itu membuat penampilan blog sobat terlihat kurang indah. Jadi apa yang harus dilakukan? Sobat harus memenggal setiap postingan blog sobat dengan cara “Membuat Read More”. Read More adalah sebuah fitur pemenggal postingan pada halaman depan atau branda suatu blog. Jika title atau link read more di klik, maka postingan penuh akan tampil. Oleh karena itu, Rinjani Lovers akan memberikan Tutorial Blog tentang cara membuat read more. Ikuti langkah di bawah ini untuk membuat Read more blog.
  • Login ke blogger sobat di www.blogger.com
  • Pilih menu Rancangan --- > Edit Html.
  • Kasih tanda centang pada Expand Template Widget
  • Copy kode berikut:
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
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>

  • Paste kode tersebut di atas kode </head>
  • Selanjutnya, Cari kode <data:post.body/>
  • Kalau sudah ketemu, ganti kode <data:post.body/> dengan kode di bawah ini
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<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;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
  • Save atau simpan template sobat

Keterangan Kode di atas:

  1. summary_noimg = 430 = Post terpotong tanpa Gambar
  2. summary_img = 340 = Post terpotong tetap menggunakan gambar
  3. img_thumb_height = 100 = Tinggi Gambar
  4. img_thumb_width = 120 = Lebar Gambar

Dapatkan Artikel terbaru Rinjani Lovers secara gratis! Untuk itu, masukkan Email anda pada kolom di bawah ini. Setiap artikel yang kami publikasikan, akan langsung kami kirim ke Email anda

Delivered by FeedBurner

Baca Artikel menarik lainnya di bawah ini...



2 comments:

  1. mas gimana caranya membuat foto kita di samping kanan seperti punya sampean itu ??

    ReplyDelete
    Replies
    1. riko bayu wiranata...
      Artikelnya sudah saya publikasikan dari dulu. Baca saja disitu.

      Delete

home

Copyright © 2012 Tutorial Blogspot | Design by X-Template