Langsung ke konten utama

Cara pasang Auto Read More terbaru ( Part II )

(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.



Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<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;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.



Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.



Langsung copy paste aja 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)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>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>



Kalo sudah, 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>


silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float";
(kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250;
(Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250;
(Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120;
(Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120;
(Thumbnail 'lebar dalam piksel)

Selamat mencoba..
salam blogger Indonesia

Komentar

Bisnis.com mengatakan…
saya coba dh tp kayanya ribet bngett :D :D

Artikel Terkait

Postingan populer dari blog ini

Income Dollar dari Image Space Media

Nah kali ini saya mau sharing sebuah cara dapat dolar dengan Image Space Media. Lantas apa itu Image Space Media?
Image Space Media adalah sebuah jaringan periklanan internet melalui gambar (images). Kalau blog anda banyak postingan yang menggunakan gambar-gambar, sudah pasti akan sangat menguntungkan dan anda bisa peroleh income dolar sangat besar dengan mengikuti Image Space Media.
Image Space Media sangat unik! Iklan akan muncul dari setiap gambar yang ada di blog anda jika mouse diarahkan ke gambar tersebut. Kalau iklan tersebut di-klik oleh pengunjung maka itu berarti anda dapat dolar.
Cara menjadi publishernya sangat gampang, anda tinggal mendaftarkannya disini. Dan jika disetujui maka anda tinggal meletakkan script iklannya di blog anda.
Cara meletakkan script Image Space Media di blog anda sangat mudah. Anda cukup letakkan script Image Space Media di template atau theme blog anda seperti ini:

<body>
Script Image Space Media disini
</body>

Biasanya iklan Image Space Media t…

Promote Burner - Membayar setiap Pengunjung Blog

Promote Burner adalah situs yg membayar kita per pengunjung tanpa perlu mengklik iklan dari situs mereka atau biasa disebut CPM ( cost per impression ) .. Promote Burner ini sejenis paidtopromote tp bedanya situs ini lbih bersahabat buat blog berbahasa Indonesia seperti blog saya ini karna kita di bayar bkn seperti paid to promote yg hanya membayar apabila blog kita di kunjungi oleh orng luar ( inggris, Amerika, Kanada, Australia dll ) tetapi situs ini membayar semua pengunjung yg masuk k'blog kita termasuk orng Indonesia ( contoh iklannya bisa di lihat di blog saya di bawah feed burner ) ..
sekedar info saja dalam 3 hari earning saya sudah sampai $10 !! sistem pembayaran situs ini sama sperti paid to promote mereka membayar kita instant setiap bulan ke akun paypall ... So buat sobat blogger tunggu apalagi buat semua pengunjung sobat menjadi dollar .. semakin banyak pengunjung semakin banyak dollar yg masuk ke saku Paypall sobat ..
Kalu sudah gajian makan" ya ... :)

Paid to Promote - Tambahan Uang dari Blog

Paid to promote ini adalah salah satu cara dimana kita memungkinkan mendapatkan $5/hari hanya dengan blog gratisan dan artikel copy paste(saat ini saya baru mencapai $2/hari) . Paid to promote adalah cara uangkan blog hanya dengan menyisipkan kode iframe yang nantinya akan menjadi banner di blog kita, dan setiap kali blog tersebut tampil atau blog kita di kunjungi orang (tanpa perlu di klik) orang dari amerika, inggris, kanada dan australia maka kita akan mendapatkan uang. jika ada 1000 pengunjung dari 4 negara tersebut kita akan mendapatkan $4, dan $2 untuk 1000 kunjungan dari negara Austria, Belgium, Denmark, Finland, France, Germany, Iceland, Italy, Netherlands, New Zealand, Spain.nah berikut ini panduan paid to promote:
1. pertama tama anda harus punya blog yang kebanyakan pengunjung dari luar negeri terutama amerika, inggris, kanada dan australia. 2. Nah setelah anda punya blog minimal di blogspot anda bisa daftar paid to promote di SINI

3. setelah anda daftar maka anda bisa masuk…