Membuat Posting Read More/Baca Selengkapnya untuk Blogspot

Posting Read More/Baca Selengkapnya dibuat dengan tujuan untuk meringkas artikel-artikel yang terlalu panjang. Sangat tidak menyenangkan bagi para pengunjung andaikan mereka harus menggulung layar begitu panjang hanya untuk melihat posting-posting di bawahnya. Nah, untuk mengatasi masalah itu, umumnya para penulis akan membuat sebuah sistem ringkasan posting seperti ini:

Link/tautan Baca Selengkapnya bertugas untuk mengarahkan para pengunjung menuju halaman asli dari artikel tersebut.
Cukup dua langkah perombakan saja yang kita perlukan untuk membuat sistem ini berfungsi, hanya saja di sini Saya memberikan sedikit detail kecil untuk memperindah tampilan linknya.

Pertama-tama masuklah ke tab Rancangan kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Temukan kode ini:

</head>

Salin kode ini, kemudian letakkan tepat di atasnya:

<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>

Setelah itu cari kode yang tampak seperti ini:

<data:post.body/>

TIP: Tekan CTRL + F lalu ketik data:post.body untuk mempermudah pencarian.

Ganti kode tersebut dengan 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='rmlink'><a expr:href='data:post.url'>Baca Selengkapnya</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>

Klik Pratinjau untuk sekedar mengecek perubahannya.

Sistem ringkasan posting ini sebenarnya sudah bisa berfungsi dengan baik, jadi kamu bisa langsung menyimpan perubahannya. Tapi jika kamu ingin memberikan sedikit kegantengan lagi dalam sistem postingmu ini, kamu bisa memberikan efek seperti tombol pada link Baca Selengkapnya.

Salin kode CSS di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

.rmlink 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;}
.rmlink a:hover  {background:#FFDD56;color:#000;}
.rmlink a:active {background:#000;color:#567856;}

Klik Simpan Template.

Sedikit Penyesuaian:

• Tentukan banyaknya huruf yang ditampilkan dalam variabel summary_noimg (jika postinganmu tidak terdapat gambar) dan summary_img (jika postinganmu terdapat gambar).
• Tentukan lebar dan tinggi thumbnail dalam variabel img_thumb_width dan img_thumb_height.

---

Pertimbangkan Juga Beberapa Posting Ini:

• Kosep Auto Read-More Baru dengan Bantuan Textarea
• Posting Auto Read-More Tanpa JavaScript
• Optimasi Thumbnail pada Auto Read-More Link dan Widget