Cara Membuat Read More Otomatis Pada Blogspot Kita

Untuk membantu men-split artikel yang terlalu panjang Read More atau Baca Selengkapnya sangatlah penting di dunia blog. Namun ada sedikit kendala yaitu saat melakukan cut atau pemotongan artikel dengan menyisipkan <span class="fullpost"> dan </span> pada bagian akhir artikel itu.

Anda yang membutuhkan Read More Otomatis (RMO) untuk blog yang bersifat portal dan selalu up-todate bisa menggunakan script auto read more di bawah artikel ini, terdapat 2 (dua) script. Silahkan terapkan pada masing-masing blog sehingga mendapatkan readmore sesuai keinginan saudara.

Sekarang saya akan coba membantu memandu dalam menempatkan script tersebut :

1.   Silahkan masuk ke halaman EDIT HTML dan cari kode </head> kemudian letakkan Script No. 1, di atas kode </head> Tapi saya sarankan agar template anda disimpan terlebih dahulu ya.

<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, version 2.0 (for blogspot)


(C)2008 by Anhvo


visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

2.   Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti <data:post.body/>

Kalau sudah, ganti kode <data:post.body/> dengan semua kode Script No. 2, kemudian simpan dan silahkan lihat hasilnya.

<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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Nb : Bagi yang sudah memakai readmore versi lama atau manual, haruslah dibersihkan dulu
seperti default, hapus pada bagian warna orange, seperti contoh yang ada di bawah ini :

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Semoga bermanfaat dan sukses saat mencobanya nanti sobat.

readmore »»  

Tips membuat Readmore Pada Template Bawaan Blogger

Pada kesempatan kali ini kita akan bersama belajar membuat readmore dengan template bawaan blogspot. Readmore yang kali ini gak perlu kode atau script yang susah dan susah banget kali ya. Buat teman-teman yang ingin membuat readmore atau baca selengkapnya pada blognya kini cukup mudah, karena blogger kini menyediakan fasilitas readmore dengan cara yang cukup simpel karena tidak memerlukan penambahan script pada html atau pengaturan pada formating. Langsung aja kita praktekan dengan sangat mudah :

1.  Blog anda harus menggunakan template baru yang telah di sediakan blogger, jika blog anda masih menggunakan template klasik segera upgrade ke template baru. Sehingga mudah untuk menerapkan trik ini.

2.  Temen-temen tinggal potong aja bagian postingan yang akan di potong dengan menuliskan kode <!-- more --> atau dapat click gambar seperti di bawah ini pada postingan yang akan dipotong

Tips tambahan : Agar lebih mudah ketika posting tanpa harus mengetik kode tersebut lagi ikuti langkah berikut  ini. Pada blogger klik pengaturan-klik format lihat kotak kosong yang ada di bawah halaman copas kode tersebut di kotak kosong itu. kemudian save pengaturan, maka otomatis ketika posting kode <!-- more --> tersebut sudah ada.
Semoga bermanfaat dan sukses selalu.

readmore »»  

Cara Membuat Readmore atau Baca Selengkapnya Versi 2

Kalau kemarin kita sudah pernah dibahas kita bahas dulu ( Sudah baca belum?, kalo belum baca dulu gih di sini ), kan kalo kita ng-klik tulisan read more atau Baca Selengkapnya itu kita akan membuka halaman baru sehingga akan meloading lagi halaman web kita selanjutnya. Untuk Read more yang ini, yang akan kita bahas ini nggak gitu cara kerjanya, cara kerjanya yaitu : Di trik Read more yang baru ini, kita akan membuat link Read more yang jika kita meng-klik link tersebut, maka keseluruhan artikel akan terpampang dibawahnya, jadi tidak perlu meload ke halaman yang lain. Dan itu akan lebih mudah dan praktis bagi yang ingin menyimak trik ini silahkan langsung ikuti trik berikut ini :

1. Login ke Blogger dulu

2. Pilih Layout --> Edit HTML

3. Back-up dulu template kamu dengan kilik tulisan Download Template lalu simpan.

4. Beri tanda centang pada kotak yang bertuliskan Expand Template Widget

5. Kopi kode berikut ini dan taruh tepat diatas kode </head>

&lt;/span&gt;<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>

6. Kalau sudah cari kode ini

<div class='post-header-line-1'/>

7. Kemudian cari kode berikut ini <div class='post-body entry-content'> dan ganti menjadi

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

8. Cari kode berikut ini <p><data:post.body/></p>
9. Tambahkan kode ini di bawahnya :

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

10. Hingga semuanya menjadi :

<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>


<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

11. Tulisan 'Selengkapnya' dan 'Ringkasan' bisa diganti dengan apa aja kata yang kamu suka.
12. Lalu simpan template.
13. Pilih menu Setting -->> Formatting
14. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.

<span id="fullpost">


</span>

Selesai dech, semoga sukses ya

readmore »»  

Cara Membuat Readmore atau Baca Selengkapnya Versi 1

Pada Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya. Oleh karena itu ayo belajar membuat read more :

1. Buka menu Layout kemudian pilih Edit HTML.

2. Kasih tanda cek (centang) pada cekbox "expand widget template"

3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :

<p><data:post.body/></p>

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>


<p><data:post.body/></p>


<a expr:href='data:post.url'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya" atau apa saja

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut :

<span class="fullpost">


</span>

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">


</span>

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>

11. Nah semoga berhasil yach dan Selamat Mencoba

readmore »»