Membuat Posting Baca Selengkapnya atau Read More untuk Blogspot

Posting mode Baca Selengkapnya dibuat untuk meringkas isi posting pada homepage sebuah blog yang dimana isi dari artikel tersebut terlalu panjang. Tentunya sangat tidak mengasyikan bagi pengunjung / pembaca artikel apabila mereka harus menggulung layar sekian panjangnya hanya untuk melihat bait posting dibawahnya, nah untuk mengatasi itu biasanya para admin blog melakukan cara seperti dibawah ini :

Nah dengan tampilan diatas pastinya akan terlihat rapi dan ringkas pada Post homepage nya, tautan Selengkapnya akan membimbing pembaca menuju artikel dalam tampilan penuhnya, oke dalam pemasangannya cukup mudah, cukup ikuti langkah - langkah dibawah ini, disini saya merombak sedikit tampilannya agar lebih menarik.

Pertama tama masuklah ke Blogger Dasboard dan pilih Edit HTML.
cari kode ini :

</head>

Salin kode dibawah ini, dan letakkan tepat diatasnya

<script type='text/javascript'>
//<![CDATA[
    var thumbnail_mode   = "float",
        summary_noimg    = 350,
        summary_img      = 350,
        img_thumb_height = 100,
        img_thumb_width  = 120;

    /******************************************
    Script Posting Read-More versi 2.0 (blogspot)
    (C)2008 oleh Anhvo
    ********************************************/
    function createSummaryAndThumb(a) {
        var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";b.innerHTML=f}function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var c=a.split("<");for(var d=0;d<c.length;d++){if(c[d].indexOf(">")!=-1){c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length)}}a=c.join("")}b=b<a.length-1?b:a.length-2;while(a.charAt(b-1)!=" "&&a.indexOf(" ",b)!=-1)b++;a=a.substring(0,b-1);return a+"...";
    }
//]]>
</script>

Sekarang cari kode yang mirip ini

<data:post.body/>

Ganti kode itu dengan kode dibawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <span class='rifanlink'><a expr:href='data:post.url'>Selengkapnya ►</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>

Klick pratinjau untuk mengecek keberhasilannya dan simpan.

Sistem ini sebenarnya sudah berhasil, namun untuk mempercantik tampilannya seperti gambar diatas, silahkan copy kode dibawah ini dan letakkan tepat diatas ]]></b:skin> atau </style>:

.rifanlink a        {background:#567856;color:#fff;padding:2px 15px 3px;margin:15px 0 0;border:0;float:right;text-decoration:none;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;font-weight:bold;}
.rifanlink a:hover  {background:#FFDD56;color:#000;}
.rifanlink a:active {background:#333;color:#567856;}

Penyesuaian Read More:

• Tentukan banyaknya huruf posting yang akan ditampilkan pada variabel summary_noimg (jika postinganmu tidak terdapat gambar) dan summary_img (jika postinganmu terdapat gambar).
• Tentukan tinggi dan lebarnya thumbnail gambar posting pada variabel img_thumb_width dan img_thumb_height.

Tweet