Cara Mudah Membuat Read More Otomatis di Blogspot

Home » TUTORIAL » Cara Mudah Membuat Read More Otomatis di Blogspot

Cara Mudah Membuat Read More Otomatis di Blogspot

Posted by Admin Monday, 1 July 2013 0 comments

Menurut saran seorang temanku untuk membuat line breakdi setiap postingan blogku agar page view-nya bisa nambah banyak, membuatku ~~tergugah~~ (#halah..hehe) – terpacu, untuk mencari tahu cara membuat read more (baca selengkapnya…) di postinganku itu. Setelah browsing sana-sini aku malah tambah bingung karena ini ada cara manual dan cara otomatis serta banyak alternatif cara. Kalau milih manual pasti capek karena musti edit satu-satu, jadi cari cara otomatis, but… ups… ketemu lagi sama edit template… jujur kalau masalah edit template musti super hati-hati. Masalahnya kalau salah kode, bisa kacau semuanya. Tapi memang kalau ga kepepet ga belajar dan ga bisa bikin tutorial gini buat bantuin temen kan? Hehe… ada manfaatnya juga dibuat kepepet. Oke, kog jadi malah curhat ya, langsung aja deh ibu-ibu simak tutorial sederhana saya dibawah ini :

Masuk ke www.blogger.com
Ketik email dan kata sandi Anda → MASUK
Klik “TEMPLATE”
Klik tombol "Cadangkan/ Pulihkan" di pojok kanan atas
Unduh template lengkap → setelah selesai mengunduh lalu tutup/close
Klik “EDIT HTML”
Copy kode ini </head> (tekan Ctrl+C)

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 250;

summary_img = 220;

img_thumb_height = 120;

img_thumb_width = 220;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");

for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].

substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.

length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.

substring(0,a-1); return b+" [...]"}function createSummaryAndThumb(d){

var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");

var e=summary_noimg;if(b.length>=1){a='<span style="float:left;

padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width

+'px"height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"

+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};

//]]>

</script>

Taruh kursor di dalam kotak “edit html” tadi. Bisa di belakang salah satu kode script → tekan Ctrl+F sehingga keluar kolom kecil untuk search kode → paste (Ctrl+V) kode </head> → tekan Enter di keyboard Anda
Setelah ketemu kode </head> letakkan/paste kode (no.8) di atas kode </head>
Ketr.No.8-10
Copy kode ini <data:post.body/> dengan cara tekan Ctrl+C, lalu cari di dalam kotak "edit html" seperti langkah no.9 . Setelah ketemu, ternyata kode tersebut tidak hanya ada 1 tapi ada 3 tempat, untuk mengetahuinya bisa tekan Enter di keyboard Anda dengan tetap menaruh kursor di samping kode itu dalam kotak search.
Perhatikan nomor disamping kotak edit html itu untuk mengetahui perbedaan nomor kode yang awal dan terakhir yang sama. Disinilah rumitnya karena Anda harus coba-coba dan berhati-hati dalam mengganti kode. Pakai kode 1, 2 atau yang ke-3? Karena masing-masing template bawaan blogger beda-beda. Kalau saya pakai yang ke-2 (enter kode yang ke 2) → Delete/ hapus kode <data:post.body/> lalu ganti dengan kode (No.13) dibawah ini : (blok kode dibawah ini dengan cara tekan Ctrl+A→ copy kode tekan Ctrl+C).

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb

(&quot;summary<data:post.id/>&quot;);</script>

<span class='rmlink' style='float:left'><b>Baca Selengkapnya</b>

&#8594; <a expr:href='data:post.url'><data:post.title/></a></span>

</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

</b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Paste kode (no.13) → (Ctrl+V) untuk mengganti kode <data:post.body/>
Ketr.no.11-14
Klik “PRATINJAU TEMPLATE” untuk melihat hasilnya apakah tampilan blog Anda sudah menampilkan read more/ baca selengkapnya? Cek juga judul artikel Anda.
Jika belum berhasil, klik Edit HTML tadi lalu hapus script yang baru saja Anda tambahkan terakhir tadi, lalu ganti lagi dengan kode semula <data:post.body/> dan coba gunakan kode <data:post.body/> yang ke 3/terakhir. Ulangi lagi dengan cara : Delete kode <data:post.body/> lalu ganti dengan kode yang sama dengan tadi. Jangan buru-buru disimpan tapi cek dulu dengan cara klik "PRATINJAU TEMPLATE" seperti tadi.

Jika sudah benar maka Anda boleh klik "Simpan/ Save template" → LIHAT BLOG

Sumber : http://ittaqi-tafuzi.blogspot.com

Keterangan :

Untuk mengatur panjang teks atau gambar yang ingin Anda tampilkan :
summary_noimg = 250; banyaknya karakter di postingan tanpa gambar
summary_img =220; banyaknya karakter di postingan + gambar
img_thumb_height = 120; tinggi gambar
img_thumb_width = 220; lebar gambar
Kata Read More bisa juga diganti dengan Baca selengkapnya, dll

indonesia emas

Cara Mudah Membuat Read More Otomatis di Blogspot

Related Post:

0 comments:

Post a Comment