Membuat autoreadmore pada blog

Auto readmore adalah salah satu cara untuk menata halaman depan blog agar lebih rapi dan enak di lihat...

Sebenernya pungsi auto redmore sama saja dengan reamore baisa (read: itutuh yang buat menggal kata biasanya ada tex baca seterusnya etc dah)
Namun perbedaannya auto readmore bekerja otomatis saat memenggal kata (read: gak perlu pake span fullpost pada waktu nulis artikel alias nulis tinggal nulis hehe)

Sebenarnya cara membuat auto readmore memang bukan hal baru namun baru kali ini saya posting karena saya pikir sudah banyak di tulis/di share di blog-blog tutorial namun berhubung ada sahabat saya yang bertanya cara memasangnya

Setelah coba buka arsip di ponsel saya (read: beuh gaya dikit istilahnya haha padahal cuman buka x-plore bwt lihat file txt yang tersimpan hehe)

images this deleted

Akhirnya saya mencoba untuk share auto readmore v20 yang saya rasa cukup sederhana dan cocok di pasang pada template mobile (read: blogger hape lah istilahnya yang saat ini memang lagi menjamur hehe)

Langsung saja ke langkah pemasangan
1. Biasalah login dulu ke blog dan pilih Tataletak/Rancangan

2. Masuk ke EDIT HTML

3. Salin dulu template pada download template lengkap (read: itutuh yang di atasnya buat upload template) supaya kalau ada kerusakan tidak bingung tinggal copy dari cadangan

4. Kalau sudah siap centang Expan Template widget
(read: ini tutorial buat yang edit secara online blogger kalau menggunakan aplikasi seperti xplorer di ponsel ea gak perlu mengikuti langkah di atas hehe)

Nah sekarang tinggal mencari script yang harus di ganti/di hapus dan memasang java script auto readmore

1. Cari kode berikut
</head>
Kalau sudah ketemu pasangkan di bagian bawah kode </head> skrip di bawah ini


<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 170; summary_img = 50; img_thumb_height = 60; img_thumb_width = 50; </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 createSummary AndThumb(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 5px 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>

copy java script 4 mobile




Keterangan:
summary_noimg = 170;Jumlah 170 adalah untuk menentukan jumlah tulisan yang muncul pada artikel tidak bergambar dan jumlah kata bisa kamu sesuaikan menurut keinginan kamu


summary_img = 50;
Jumlah 50 adalah untuk menentukan jumlah tulisan yang muncul pada artikel bergambar dan jumlah kata bisa kamu sesuaikan menurut keinginan kamu


img_thumb_height = 60;
Ini pungsinya mengatur ukuran tinggi images/gambar pada artikel tinggal ubah ukuran 60 untuk menyesuaikan


img_thumb_width = 50;
ini pungsinya untuk mengatur lebar images/gambar pada artikel ubah ukuran 50 unuk menyesuaikan

kalau semua pengaturan gambar dan jumlah tex yang akan di tampilkan sudah selesai sekarang ke tahap selanjunya

2. Cari kode html ini:
<data:post.body/>

jika template anda masih standar belum pernah menggunakan readmore

Sementara untuk pengguna template mobile buatan saya cari kode ini:


<div class=' post-body entry-content'>
<data:post.body/><b:if cond=' data:blog.pageType != &quot;item &quot;'>< div id='more'>
<a expr:href='data:post.url'>
<left>& #187;&#187; &#160;baca semua</left></a></div> </b:if>



Kalau sudah ketemu hapus semua script yang berwarna merah kemudian ganti script yang berwarna merah menggunakan script 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'>createSummary AndThumb(&quot;summary <data:post.id />&quot;);
< /script>
<span class=' rmlink'>
<a expr:href='data:post.url'>< div id='more'>
<a expr:href=' data:post.url'>
<img src='http:// 4.bp. blogspot.com/_il-14Lk5qf8/ TIz3Izga8aI/ AAAAAAAAAHk/ MVp_rxtIKaE/ s320/readmore.gif' /></a></div>< /a></span>
</b:if>

<b:if cond='data:blog.pageType == &quot;item &quot;'>
<style>
#feature-wrapper, #carousel_control, #featured_posts {display: none; padding: 0;margin:0 ;}
</style>
< data:post.body /><br/>
</b:if>

copy paste script 4 mobile




Pastikan kamu benar menaruh script pada tempatnya dan jangan sampe ada kode html yang terhapus/forman penutup tidak sampai ketinggalan agar tidak ada peringatan eror waktu upload template ..

3. Langkah berikutnya Cari kode ini:


<style><b:if cond='data:blog.pageType == &quot; item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}</b:if></ style>


script ini hanya ada jika template kamu sudah memasang reamore (read: bagi pengguna template mobile pasti menemukan script di atas kemudian hapus semua script di atas (read: kalau di template yang belum pasang reamore dan tidak ada ea tidak usah nyari hehe)

4. Nah terakhir save template
(ream: itu bagi yang edit online di blog kalau yang pake app di hape ea tinggal upload hehe)

5. Istirahat dulu kalau kecapean lihat kode html hehe.... Yang sabar aja kan orang sabar di sayang tuhan he..

Met nyoba aja deh moga bermanpaat dan bisa di pasang di blog teman-teman


16 komentar:

  1. Sip bos :D aku pelajari dulu :-D terus berkreasi bos..

    ReplyDelete
  2. All@ oke makasih comennya .He

    ReplyDelete
  3. Boss.. Q k'betulan pemula yg goblok bner.. Q pkek template dr kmu,tp q g tw bwt ngeditny gmna?Misal bwt yg d'headernya home | blog | profil
    gmna y spya home | blog | profil nya jd link di blog q,misal profil i2 jd profil q.. Trus bwt bikin kategory artikel gmna ya?

    ReplyDelete
  4. Edryc@ ea tinggal edit saja ada di dalam template, kalau kategori pos pake label.

    ReplyDelete
  5. makasih tutorialnya brguna bgt bwt ane yg lg bljr ngeblog..

    ReplyDelete
  6. Remis c@ ah bisa saja ... Ea sama-sama makasih juga sudah berkunjung...

    ReplyDelete
  7. kang bagas sya udah coba nee...tp ko tetep nongol smua posting nya..ga kaya kang bagas posting nya cuma beberapa text yang muncul ???

    ReplyDelete
  8. @yostazha pastikan langkah-langkahnya bener sama tutorial di atas karena saya sudah coba dan bisa sob.....

    ReplyDelete
  9. Brot sya pasang di template black mobile v1 ko ngga bisa ya...!!! Text'nya tetep muncul smua..!

    ReplyDelete
  10. @yostazha ikuti saja langkah di atas pastikan mana yang di hapus dan mana yang di tambahkan/ salah nulis kode html pada kolom copas ada bagian < br / > hapus semua kode itu...

    ReplyDelete
  11. kang bagas g blak2kan x. Lbh detail lg :D

    ReplyDelete
  12. @arieftewe kurang blak2an gimana sob memang bagian mana yang tidak di pahami

    ReplyDelete
  13. agar postingan sebelum readmore bisa tampil rata kanan kiri gimana bang ?

    ReplyDelete
  14. @Vista 84 itu bisa langsung dari css .post { text-align:justify;
    atau ubah script di atas pada bagian span style="float:left
    ubah jadi span style="float:justify

    ReplyDelete

MOHON DI BACA
Semoga anda adalah pembaca yang baik hati jika berkenan tinggalkanlah komentar untuk saya

1. Gunakan pilih nama/url pada pemilihan nama jika anda tidak memiliki blog
2. Sebisa mungkin jangan menggunakan id anonim atau id falsu
3. Di mohon komentar tidak mengandung sara, saru, spam dan kata-kata yang tidak pantas di ucapkan
4. Jika komentar tidak pantas di tampilkan admin akan menghapus komentar yang sudah ada.
5. Komentar anda merupakan motipasi bagi kelangsungan blog ini.

About blog | Feedback | Rss
Copyright 2009 - 2012 Hak cipta di lindungi UUD
Naik