Cara Mudah Membuat "Baca Selengkapnya" di Blogger

komputerdia.com - Pentingkah sebuah Read more atau baca selengkapnya pada suatu blogger ? Fitur ini bisa dikatakan tidak terlalu wajib dipasang pada sebuah blogger, hal semacam ini hanya mewakilkan sebuah style dan keperluan tambahan saja. Biasanya seorang blogger ingin memasang fitur "baca selengkapnya" dilandasi hanya karena masalah kerapihan blog yang mereka miliki.

Terlepas dari segala apa yang menjadi latar belakangnya, pada artikel ini saya akan sedikit menjelaskan bagaimana cara membuat "baca selengkapnya atau Read More" di template atau theme bawaan blogger.

Baca juga :

Cara Mudah Membuat "Baca Selengkapnya" di Blogger

Cara Mudah Membuat "Baca Selengkapnya" 

A. Menggunakan Insert Jump Break 

  • Cara ini bisa kalian aplikasikan ketika kalian masih menggunakan template atau theme bawaan dari blogger
  • Pertama silahkan kalian buat postingan atau entri baru pada akun blogger kalian.
  • Buat sedikitnya beberapa ratus kata pembukaan pada artikel yang kalian buat, kemudian kalian tekan tombol "insert jump break" .
Cara Mudah Membuat "Baca Selengkapnya" di Theme Bawaan Blogger
  • Setelah itu kalian akan melihat garis lurus dibawah kata pembukaan tadi.
  • Garis lurus itulah yang nantinya akan menjadi fitur "baca selengkapnya" pada tema bawaan blogger
Cara Mudah Membuat "Baca Selengkapnya" di Theme Bawaan Blogger
  • Silahkan kalian lanjutkan penulisan artikel tersebut sampai dengan selesai.
  • Jika sudah, coba kalian publikasikan artikel kalian tersebut dan lihatlah perbedaan yang terdapat pada beranda blog kalian.
  • Cara pertama ini tidak akan merubah semua artikel kalian mempunyai fitur read more, karena cara ini merupakan cara yang manual.
  • Jika kalian ingin menggunakan fitur "read more" otomatis, silahkan kalian baca panduan selanjutnya

B. Menggunakan Fitur Edit Html
  • Silahkan kalian kalin login ke akun blogger kalian
  • Masuk ke menu Tema / Theme dan silahkan kalian tekan tombol Edit Html .
Cara Mudah Membuat "Baca Selengkapnya" di Blogger
  • Setelah masuk di halaman edit html, silahkan kalian cari kode </head> dengan cara menekan tombol ctrl + f dan ketikan perintah </head> kemudian tekan enter .
  • Setelah kode </head> ketemu, letakkan kode dibawah ini tepat dibawah kode </head> tersebut.
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
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 -->
Keterangan :
Kalimat yang saya berikan warna Merah , bisa kalian sesuaikan dengan selera kalian masing-masing.
summary_noimg = 430 merupakan Jumlah Huruf dengan gambar
summary_img = 340 merupakan Jumlah Huruf Tanpa gambar
img_thumb_height = 150 merupakan  Tinggi gambar
img_thumb_width = 150 merupakan  Lebar Gambar
  • Sekarang cari kode <data:post.body/>, biasanya didalam tema blog akan terdapat 3 kode seperti itu, maka kalian ganti ketiga kode tersebut dengan kode dibawah ini
<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Baca Selengkapnya</a>
</b:if>
</b:if>
<!-- Auto read more End -->
  • Tulisan Baca Selengkapnya diatas, bisa kalian ganti sesuai selera kalian masing-masing
  • Selesai, semoga bermanfaat buat kalian semuanya

.
.

Berlangganan Artikel terbaru (free):

Post a Comment