CARANECOM

Caranecom is a Informative Blogging, place of Information and Learning

CARA BUAT READMORE PADA BLOG SESUAI SELERA


Caranecom : Membuat readmore sesuai selera

Read More merupakan arti dari Baca Selengkapnya mungkin kira-kira seperti itu artinya.

Dalam membuat sebuah artikel atau memposting pada blog jika tulisan atau artikel kita terlalu panjang ada baiknya kita menggunakan read more karena readmore sendiri berfungsi untuk mempersempit tampilan  dari sebuah postingan atau artikel, dengan demikian tampilan artikel akan semakin terlihat menarik untuk para pembaca.

Ada 2 cara dalam membuat Read More pada blog :

Yang pertama adalah membuat readmore secara manual dengan cara login terlebih dahulu ke blogger anda dan pada dashboard pilih postingan untuk dibuka atau membuat artikel baru dan langsung kita terapkan melalui lembar artikel dengan menempatkan cursor pada tempat atau diantara paragraf yang dikehendaki untuk tulisan yang akan terpotong kemudian klik tombol Insert Jump Break yang terlihat seperti lembar kertas sobek seperti pada gambar dibawah ini :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSHUgRfuE-j6BVYCOFLQ74Kz3AyCFDHv2Yhvt5BCp7f8u36vV3obFL1LpsTnW8Cs8DXDUQ3B61jJmx6woTEnfcSooIxM3SxFFFOWh5oP2ofOpJz4mOs4GrusDRvjzVlMkDf87N8lw42QRj/s1600/Readmore+manual.jpg


Berhubung cara diatas merupakan insert jump break untuk membuat read more secara manual maka kita akan melakukan satu persatu pada setiap postingan untuk membuat readmore. yang jelas tidak akan cocok untuk yang akan memposting cukup banyak artikel.
Simpan atau publishkan artikel anda dan lihat hasilnya.

Yang kedua adalah membuat readmore secara otomatis pada blog.
Caranya adalah anda Login terlebih dahulu pada blog anda kemudian pada Dashboard blog pilih Template selanjutnya klik edit HTML setelah tampilan pada box HTML cari kode </Head> atau dengan tekan CTR + F  pada keyboard untuk searching, lalu coppy dan paste script dibawah ini tepat diatas kode </head> tersebut :
<script type="text/javascript">
var thumbnail_mode = "float" ;
summary_noimg = 275;
summary_img = 275;
img_thumb_height = 120;
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>

Keterangan untuk kode berwarna merah adalah :
summary_no_img = 275; Jumlah Huruf dengan gambar
summary_img = 275; Jumlah Huruf Tanpa gambar
img_thumb_height = 120; Tinggi gambar
img_thumb_width = 120; Lebar Gambar



 

Selanjutnay setelah selesai copy script tadi kita lanjutkan dengan mencari kode <data:post.body/> bisa kembali menggunakan CTR + F untuk searching.
Jika anda sudah menemukan kode <data:post.body/> maka ganti kode ini dengan sript dibawah ini : jika kode <data:post.body/> ada lebih dari 1 kode yang sama harap ganti kode dengan cara test atau coba mulai pada yang paling bawah dulu.
<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>
<div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 Pada kode berwarna merah dapat anda ganti sesuai dengan keinginan anda misal Selengkapnya  atau apa saja.

Selanjutnya silahkan Simpan atau publish postingan anda dan lihat hasilnya.

Tentunya jika kita telah menggunakan Read more otomatis kita tidak perlu lagi menggunakan yang secara manual dengan menggunakan Insert Jump Break. karena dengan read more otomatis semua artikel atau postingan kita akan disederhanakan dari halaman awal blog.


Demikian artikel ini dibuat semoga dapat bermanfaat. SALAM BLOGGER