Cara Membuat Dan Memasang Auto Read More Di Blog

 Cara Membuat dan Memasang Auto Read More Di Blog - Oke sobat langsung saja saya akan terangkan Cara Membuat dan Memasang Auto Read More di blog. Pada Artikel yang sebelumnya saya sudah share tips dan trik tentang Cara buat menu di bawah Header blog/Menu horizontal Dropdown, dan kali ini saya akan share tips dan trik lagi tentang Cara Membuat dan Memasang ReadMore Otomatis di blog.

 Sedikit pengetahuan untuk sobat, Bahwa Fungsi Read More yang akan saya share kali ini memang sangat berbeda dengan versi Read More yang lama. Bila pada Read More versi terdahulu, Cara membuatnya kita harus meng-cut tulisan menggunakan cara manual. Yaitu dengan cara melakukan pemangilan fungsi <div class="fullpost">...</div> atau <span class="fullpost">...</span>

 Penjelasan dari kode diatas adalah biasanya kode tersebut di pasang dan di tanamkan secara manual kedalam halaman postingan. Jadi sobat harus selalu ingat untuk memasangnya setiap mau update atau membuat postingan artikel terbaru blog sobat.

 Namun jika sobat membuat dan memasang versi Auto Read More yang ini, Sobat tidak perlu lagi melakukan membuat readmore secara manual lagi. Karena versi Auto ReadMore kali ini akan lebih canggih, Sebab fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode Read More yang terdahulu atau cara manual diatas.

 Hebatnya lagi sob, Fungsi Read More ini mampu menampilkan image atau gambar pertama yang ada dalam postingan dan mem-fload image atau gambar tersebut di awal paragraf awal, Meskipun gambar atau image yang sobat letakan berada di tengah atau akhir postingan blog sobat.

 Tidak hanya itu saja, Sobat juga bisa mengatur jumlah karakter atau tulisan yang akan ditampilkan dalam readmore. Disini ada dua opsi pilihan untuk jumlah karakter atau tulisan.

1.  Jumlah karakter atau tulisan yang ditampilkan, Jika ada gambar atau image yang di ikutsertakan dalam postingan.
2.  Jumlah karakter atau tulisan tanpa gambar atau image dalam postingan.

 Ok sobat, Kita Langsung saja ke intinya Cara Membuat Dan Memasang Read More Otomatis di Blog. Silahkan sobat ikuti langkah-langkah dan cara-caranya sebagai berikut :

1. Silahkan sobat >> Login atau Masuk ke blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blogger baru, Pilih Menu >> Template >> Edit HTML >> Lanjutkan.
Kemudian beri tanda Centang pada >> Expand Widget Templates.

3. Lalu silahkan sobat cari kode </head> (Gunakan CTRL+F untuk memudahkan pencarian).

4. Jika sudah ketemu, Silahkan sobat tambahkan Kode script di bawah ini tepat diatas kode </head>
Langsung saja sobat copy dan paste kode dibawah ini:

<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)2012 by KUCOPAS

visit http://kuc0pas.blogspot.com to get more code
********************************************/
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>

Catatan:

• img_thumb_height = 120; = (Ukuran Tinggi Thumbnail atau gambar dalam piksel), Ganti nilainya sesuai dengan keinginan sobat.

• img_thumb_width = 120; = (Ukuran Lebar Thumbnail atau gambar dalam piksel), Ganti nilainya sesuaikan dengan blog sobat.

• var thumbnail_mode = "float"; = Sobat dapat mengatur letak thumbnail atau gambar berada di (float) kiri atau jika tidak silahkan sobat ganti dengan (no-float).

• summary_noimg = 250; = (Banyaknya karakter atau tulisan yang akan di tampilkan pada posting tanpa gambar atau thumbnail). Silahkan sobat ganti nilainya untuk mengatur banyak-sedikitnya karakter atau tulisan yang akan ditampilkan dalam blog sobat.

• summary_img = 250; = (Banyak karakter atau tulisan yang akan di tampilkan pada posting dengan gambar atau thumbnail). Silahkan sobat ganti nilainya untuk mengatur banyak-sedikitnya karakter atau tulisan yang akan ditampilkan dalam blog sobat.

5. Kalau sobat sudah selesai meng-edit kodenya, Jangan di simpan dahulu.

6. Masih dalam Edit HTML, Silahkan sobat cari lagi kode <data:post.body/>
Jika sudah ketemu, Silahkan sobat ganti kode <data:post.body/> dengan semua kode dibawah ini:

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

Catatan:

• Ganti READ MORE dengan kata-kata yang sobat inginkan. Seperti contoh, "Selanjutnya", "Lanjutkan", "Baca Selanjutnya" atau yang lain.

7. Langkah yang terakhir, Sekarang sobat klik >> Preview atau Pratinjau terlebih dahulu, Jika hasilnya sudah pas seperti yang sobat inginkan dan template tidak mengalami eror, Silahkan sobat klik >> Simpan Template dan lihat hasilnya.

Penting.!!!

 Bagi sobat yang sudah terlanjur memasang Read More versi lama sebaiknya kodenya di kembalikan dahulu seperti semula.
Caranya sangat mudah, Silahkan sobat hapus kode yang berwarna BIRU dibawah 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;'/>

Nb :
Setiap template mungkin kodenya berbeda, Jadi tinggal sobat sesuaikan saja dengan template blog sobat.

 Demikian tutorial blog yang mengulas tentang Cara Membuat Dan Memasang Auto Read More di Blog. Semoga sobat tidak mengalami kesulitan dan berhasil.

---

| Supported by http://kuc0pas.blogspot.com |

---