Artikel Terbaru :
Home » » Cara Membuat Read More Di Blogspot

Cara Membuat Read More Di Blogspot

Jumat, 03 Agustus 2012 | 3komentar

berikut ini cara membuat read more pada blogspot atau blogger.
 Silahkan untuk yang ingin mencoba tutorial blog cara memasang read more pada blogspot ikuti tutorial di bawah ini. Berikut ini cara membuat read more di Blogspot

1. Masuk ke akun Blogger anda

2. Klik  Rancangan > Edit HTML.

3.  Back-up template dulu dengan mengeklik Download Template Lengkap.

4.  Beri tanda centang pada Expand Template Widget

5. Cari kode </head>. Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl + F, lalu masukkan kode yang dimaksud untuk memudahkan pencarian.

6. Copy kode berikut dan paste di atas kode </head>.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;

</script>

<script type='text/javascript'>
//<![CDATA[
/**
Auto-readmore link script (for blogspot)

(C) 2010 Ngulik-Blog.com

visit http://www.Ngulik-Blog.com/
**/
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>
7. Cari kode <data:post.body/>. Ganti kode tersebut dengan kode 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><span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>Baca Selengkapnya</b> &#8594;<data:post.title/></a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
8. SIMPAN 
  • var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)   
  • summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)     
  • summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)     
  • img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)     
  • img_thumb_width = 120;  (Thumbnail 'lebar dalam piksel)     
Baca Selengkapnya (bisa anda ganti dengan selera anda)
    Sekian dulu tutorial blog tentang cara membuat read more di blogspot,
    Share this article :

    ARTIKEL TERKAIT:

    3 komentar:

    1. terimakasih mba tutornya. berhasil :)

      BalasHapus
    2. makasih ya..
      info menarik nya bagi newbe

      BalasHapus
    3. Keren tutorialnya teman, pengen nyoba nih mempelajarinya. Makasih

      BalasHapus

    Silahkan tinggalkan komentar sobat , tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.

     
    Support : Copyright © 2011. Tips Trik Blog | Dan Cara Buat Website - All Rights Reserved
    Template Modify by Siti Saleha
    Proudly powered by Blogger| Thanks For Visiting